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.
new fabric.Triangle({ centeredScaling: Boolean }: Object)#🎜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
centeredScalingcenteredScaling accept#🎜 -🎜 Hartanah ini menerima#🎜 🎜#Boolean dan membolehkan kita mengawal sama ada objek harus menggunakan pusatnya sebagai asal transformasi.
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>
<!-- Adding the Fabric JS Library-->
<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>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>
<!-- Adding the Fabric JS Library-->
<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>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!
Bagaimana untuk menyelesaikan ralat yang tidak diketahui 11
Apakah tujuan pengurusan storan?
fungsi sistem().
Bagaimana untuk menyelesaikan ralat parsererror
Apakah teknik ujian biasa?
Kaedah pelaksanaan fungsi main balik suara Android
Tutorial membina laman web mudah PHP
Bagaimana untuk menyediakan penghala
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
