Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?

Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?

WBOYke hadapan: 2023-08-24 20:53:071172semak imbas

Dalam tutorial ini, kita akan belajar cara melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita perlu mencipta contoh kelas fabric.Rect dan menambahkannya pada kanvas. Apabila menskala melalui pengawal, tetapkan sifat centeredScaling kepada benar untuk menggunakan pusat sebagai titik permulaan untuk transformasi objek.

Syntax

new fabric.Rect({ centeredScaling: Boolean }: Object)

Parameter

Pilihan (pilihan) − Parameter ini ialah Objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami menggunakan parameter, kursor lebar dan sifat seperti lot, kursor lebar dan warna ini sifat lain boleh diubah berkaitan dengan objek yang berpusatScaling adalah sifat

Contoh 1 didayakan Apabila kita menskalakan objek, asal transformasi ialah pusat segi empat tepat.

rreee

. Lumpuhkan sifat centeredScalingKami boleh melumpuhkan sifat
centeredScaling

<!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 a "true" value to it</h2>
   <p>Try scaling the rectangle to see that centered scaling has been enabled</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredScaling: true,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Boolean Object using Property 对象 this fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menunjukkan penunjuk pemuatan dalam React Native?Artikel seterusnya：Bagaimana untuk menunjukkan penunjuk pemuatan dalam React Native?

Artikel berkaitan

Lihat lagi