Bagaimana untuk melumpuhkan penskalaan tengah segitiga menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan penskalaan tengah segitiga menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-15 15:33:08

ke hadapan

1104 orang telah melayarinya

如何使用 FabricJS 禁用三角形的中心缩放？

Dalam tutorial ini, kita akan belajar cara melumpuhkan penskalaan berpusat segitiga 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.

Apabila objek diskalakan dengan kawalan, nilai sebenar sifat centeredScaling ditetapkan, dengan asal transformasi menjadi pusatnya.

Syntax

new fabric.Triangle({ centeredScaling: 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 warna, kursor, lebar lejang dan sifat lain objek yang berkaitan dengan atribut
centeredScaling

. < /ul>
Kunci pilihan
centeredScaling accept#🎜 -🎜 Hartanah ini menerima#🎜 🎜#Boolean dan membolehkan kita mengawal sama ada objek harus menggunakan pusatnya sebagai asal transformasi.
Contoh 1
Pass centeredScaling sebagai kunci dan tetapkan nilai "benar" #🎜🎜🎜🎜🎜 Mari kita lihat contoh kod untuk memahami cara objek segi tiga berkelakuan apabila sifat centeredScaling didayakan. Apabila kita mengezum masuk pada objek, asal usul penjelmaan ialah pusat segitiga.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing centeredScaling as key and assigning it a "true" value</h2> <p>Try scaling the triangle to see that it is using its center as the center of transformation.</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: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: true, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Salin selepas log masuk
Contoh 2
Lumpuhkan atribut Penskalaan berpusat
#🎜🎜 dengan#Kami boleh melumpuhkannya dengan#Kami boleh melumpuhkannya #🎜 🎜#centeredScaling atribut. Ini tidak lagi menggunakan pusat segi tiga sebagai pusat transformasi. Berikut ialah contoh kod untuk menunjukkan
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the centeredScaling property</h2> <p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</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: 60, width: 100, height: 70, fill: "#5f9ea0", centeredScaling: false, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Salin selepas log masuk
Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penskalaan tengah segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!