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.
new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)Element - Parameter ini ialah elemen
- 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. 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!Contoh 2Meluluskan pilihanFullyContained kunci ke kelas dengan nilai TrueMari 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. <!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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
