cari

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

Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-08-24 20:53:071243semak imbas

Bagaimana untuk melumpuhkan penskalaan berpusat segi empat tepat menggunakan FabricJS?

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
    Contoh 2

  • . Lumpuhkan sifat centeredScalingKami boleh melumpuhkan sifat

    centeredScaling
    • dengan menetapkannya kepada False. Ini tidak lagi menggunakan pusat segi empat tepat sebagai pusat penjelmaan. Berikut ialah contoh kod untuk menunjukkan perkara ini - 
<!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