Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melumpuhkan penskalaan tengah segitiga menggunakan FabricJS?

Bagaimana untuk melumpuhkan penskalaan tengah segitiga menggunakan FabricJS?

WBOYke hadapan: 2023-09-15 15:33:081152semak imbas

如何使用 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)

Parameter

#🎜Parameter#🎜#🎜#🎜#Pilihan Pilihan) - 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

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>
   <!-- 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

#🎜🎜 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!

对象 ul fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menukar bahasa halaman menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menukar bahasa halaman menggunakan JavaScript?

Artikel berkaitan

Lihat lagi