Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan penskalaan berpusat Ellipse menggunakan FabricJS?

Bagaimana untuk melumpuhkan penskalaan berpusat Ellipse menggunakan FabricJS?

王林ke hadapan: 2023-09-17 09:25:021059semak imbas

如何使用 FabricJS 禁用 Ellipse 的居中缩放？

Dalam tutorial ini, kita akan belajar cara melumpuhkan Centered Zoom Ellipse menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Apabila menskalakan melalui kawalan, tetapkan sifat centeredScaling nilai "true" untuk menggunakan pusat sebagai asal transformasi objek.

Syntax

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

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak lagi sifat objek yang berkaitan dengan atribut centeredScaling.

Option Key

centeredScaling - Hartanah ini menerima nilai boolean em>. Apabila sifat ini Benar, objek menggunakan pusat sebagai asal transformasi. . Apabila kita mengezum masuk pada objek, asal transformasi adalah pusat elips.

<!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>How to disable the centered scaling of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it from its corners. The ellipse will scale up from its center. This is the default behavior.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Melumpuhkan atribut centeredScaling

Kami boleh melumpuhkan atribut centeredScaling dengan memberikan nilai "false" kepadanya. Ini tidak lagi akan menggunakan pusat elips sebagai pusat transformasi. Berikut ialah kod untuk demonstrasi -

<!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>How to disable the centered scaling of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mengekalkan lebar lejang segitiga apabila menskala menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mengekalkan lebar lejang segitiga apabila menskala menggunakan FabricJS?

Artikel berkaitan

Lihat lagi