Bagaimana untuk melumpuhkan penskalaan berpusat Bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan penskalaan berpusat Bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-07 17:13:02

ke hadapan

1418 orang telah melayarinya

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

Dalam tutorial ini, kita akan belajar cara melumpuhkan penskalaan berpusat Bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Apabila menskalakan dengan kawalan, tetapkan nilai sebenar pada sifat centeredScaling, menggunakan pusat sebagai asal transformasi objek.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada kalangan kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain bagi objek yang berkaitan dengan sifat centeredScaling

kekunci pilihan

centeredScaling property

centeredScaling
property accepts ini - nilai. Apabila sifat ini Benar
, objek menggunakan pusat sebagai asal transformasi.

Contoh 1

Melepasi

centeredScaling

sebagai kunci dan memberikannya nilai "benar"

Mari kita lihat sekeping kod untuk melihat bagaimana objek bulat

berkelakuan

em > Harta tanah didayakan. Apabila kita mengezum masuk pada objek, asal usul penjelmaan ialah pusat bulatan.

<!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 centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true
         });

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

Salin selepas log masuk

Contoh 2🎜🎜🎜Melumpuhkan hartanah centeredScaling🎜🎜🎜Kami boleh melumpuhkan harta 🎜centeredScaling🎜 dengan menyatakan nilai palsu untuknya. Ia akan memaksa bulatan untuk tidak lagi menggunakan pusat bulatan sebagai pusat penjelmaan. Berikut adalah kod untuk membuktikannya 🎜

<!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 centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false
         });

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

Salin selepas log masuk

🎜

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