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

WBOY
Lepaskan: 2023-08-27 11:25:07
ke hadapan
1355 orang telah melayarinya

如何仅当对象完全包含在 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)
Salin selepas log masuk

Parameter

  • Element - Parameter ini ialah elemen 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>
    Salin selepas log masuk
    Contoh 2Meluluskan 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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan