Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?

王林

Lepaskan： 2023-09-08 17:13:02

ke hadapan

1200 orang telah melayarinya

如何使用 FabricJS 禁用 Triangle 的选择性？

Dalam tutorial ini, kita akan belajar cara untuk melumpuhkan selektiviti segi tiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas.

Untuk mengubah suai objek, kita perlu memilihnya dalam FabricJS. Walau bagaimanapun, kita boleh melumpuhkan tingkah laku ini dengan menggunakan atribut selectable.

Syntax

new fabric.Triangle{ selectable: Boolean }: Object)

Salin selepas log masuk

Parameter

#🎜Parameter#🎜#🎜#🎜#Pilihan Pilihan) < /em> - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat objek yang berkaitan dengan sifat
selectable

, seperti warna, kursor, lebar lejang dan banyak sifat lain. < /ul>
Kunci pilihan
pilihan #🎜🎜 diterima🎜🎜 #Boolean nilai. Apabila ia diberikan nilai "palsu", objek tidak boleh dipilih untuk pengubahsuaian. Nilai lalainya adalah benar.
Contoh 1
Apabila tingkah laku lalai atau atribut pilihan ditetapkan kepada "benar" #🎜🎜🎜🎜🎜##🎜 # Mari lihat contoh kod untuk memahami cara objek bertindak secara lalai apabila sifat < /p>boleh dipilih
ditetapkan kepada Benar. Apabila sifat boleh pilih ditetapkan kepada Benar, kita boleh memilih objek, mengalihkannya di sekeliling kanvas dan mengubah suainya.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default behaviour or when selectable property is set to 'true'</h2> <p>You can try moving the triangle around the canvas or scaling it to prove that it's selectable</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Salin selepas log masuk
Contoh 2
Luluskan atribut pilihan sebagai kunci
#🎜🎜🎜#Dalam contoh ini kepada atribut yang dipilih. Ini bermakna kita tidak lagi boleh memilih objek segi tiga untuk pengubahsuaian.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing selectable property as key</h2> <p>You can see that the triangle is no longer selectable</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, selectable: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Salin selepas log masuk
Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!