Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengunci kecondongan menegak Ellipse menggunakan FabricJS?

Bagaimana untuk mengunci kecondongan menegak Ellipse menggunakan FabricJS?

王林ke hadapan: 2023-09-01 15:05:10666semak imbas

如何使用 FabricJS 锁定 Ellipse 的垂直倾斜？

Dalam tutorial ini, kita akan belajar cara mengunci kecondongan menegak elips menggunakan FabricJS. Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek elips dalam kanvas, kita juga boleh menentukan sama ada kita mahu berhenti mencondongkan objek secara menegak. Ini boleh dilakukan menggunakan atribut lockSkewingY.

Syntax

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

Parameter

#🎜#🎜🎜🎜#🎜🎜🎜 🎜# (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang lockSkewingY ialah hartanya. kunci pilihan

#🎜🎜🎜##🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 # - Harta ini menerima

boolean
nilai. Jika kita memberikan nilai "benar", kecondongan menegak objek akan dikunci. Contoh 1强>Tingkah laku lalai Objek elips dalam kanvas
#🎜🎜🎜🎜 Mari kita lihat contoh untuk memahami kelakuan lalai objek Ellipse apabila sifat

tidak digunakan. Anda boleh mencondongkan objek secara mendatar dan menegak dengan menekan kekunci

shift

dan kemudian menyeret secara mendatar atau menegak.

<!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 lock the vertical skewing of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically by pressing the <b>shift</b> key. The object will get skewed. This is the default behavior. Here we have not applied the <b>lockSkewing</b> property. </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: 115,
            top: 50,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

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

Contoh 2

Lulus lockSkewingY sebagai kunci dengan nilai "benar" #🎜#🎜 Dalam contoh ini kita akan melihat bagaimana kita boleh menggunakan sifat lockSkewingY untuk menghentikan keupayaan objek elips untuk condong secara menegak. Walaupun kita boleh mencondongkan objek elips secara mendatar, kita tidak dibenarkan melakukan operasi yang sama secara menegak.

<!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 lock the vertical skewing of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it horizontally by pressing the <b>shift</b> key. The object will get skewed. But we have locked its vertical skewing by applying the <b>lockSkewingY</b> property. </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: 115,
            top: 50,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
            lockSkewingY: true,
         });

         // 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 mengunci kecondongan menegak Ellipse menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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

Artikel sebelumnya：kes yang tidak ditentukanArtikel seterusnya：kes yang tidak ditentukan

Artikel berkaitan

Lihat lagi