cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mendayakan pemilihan objek hanya apabila objek itu terkandung sepenuhnya dalam kawasan pemilihan dalam FabricJS?

Bagaimana untuk mendayakan pemilihan objek hanya apabila objek itu terkandung sepenuhnya dalam kawasan pemilihan dalam FabricJS?

WBOY
WBOYke hadapan
2023-08-27 11:25:071356semak imbas

如何仅当对象完全包含在 FabricJS 中的选择区域中时才启用对象选择？

Dalam artikel ini, kita akan belajar cara menggunakan FabricJS untuk mendayakan pemilihan objek hanya apabila ia terkandung sepenuhnya dalam kawasan pemilihan. Kita boleh menggunakan sifat SelectionFullyContained untuk mencapai ini.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)

Parameter

  • Element - Parameter ini ialah elemen em> itu sendiri dan boleh diterbitkan menggunakan Document.getById atau 🜎 Element sendiri. Kanvas FabricJS akan dimulakan pada elemen ini.

  • Pilihan (pilihan)

    - Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar jidar dan banyak sifat lain yang berkaitan dengan kanvas, yang mana selectionFullyContained ialah harta. Ia menerima nilai Boolean yang menentukan sama ada objek harus dipilih hanya jika ia terkandung sepenuhnya dalam kawasan pemilihan. Nilai lalai ialah Palsu. . Dalam contoh ini, kami lulus nilai SelectionFullyContained sebagai False. 

    <!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Enabling selection of an object only when it is fully contained in a selection area</h2>
   <p>Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionFullyContained: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
    Contoh 2

    • Meluluskan pilihanFullyContained kunci ke kelas dengan nilai True

Mari kita lihat contoh kod di mana nilai sifat selectionFullyContained telah ditetapkan kepada True. Seperti yang kita dapat lihat, objek hanya dipilih jika ia terkandung sepenuhnya dalam kawasan pemilihan.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mendayakan pemilihan objek hanya apabila objek itu terkandung sepenuhnya dalam kawasan pemilihan dalam FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

值传递 对象
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk memanggil fungsi dari nama fungsi yang disimpan dalam rentetan menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk memanggil fungsi dari nama fungsi yang disimpan dalam rentetan menggunakan JavaScript?

Artikel berkaitan

Lihat lagi