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

Bagaimana untuk mengunci kecondongan mendatar Ellipse menggunakan FabricJS?

PHPzke hadapan: 2023-09-14 12:49:02810semak imbas

如何使用 FabricJS 锁定 Ellipse 的水平倾斜？

Dalam tutorial ini, kita akan belajar cara mengunci kecondongan mendatar 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 mendatar. Ini boleh dilakukan menggunakan atribut lockSkewingX.

Syntax

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

Parameter

Pilihan (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 berkaitan dengan objek yang lockSkewingX ialah hartanya.

Kunci Pilihan

lockSkewingX - Hartanah ini menerima nilai Boolean强>. Jika kita memberikan nilai "benar", kecondongan mendatar objek akan dikunci. . Anda boleh mencondongkan objek secara mendatar dan menegak dengan menahan kekunci Shift dan 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>Locking the horizontal skewing of Ellipse using FabricJS</h2>
      <p>Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. 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: 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>

Melepasi

lockSkewingX sebagai kunci dengan nilai "true" Dalam contoh ini kita akan melihat bagaimana kita boleh menggunakan sifat lockSkewingX untuk menghentikan keupayaan objek Ellipse mendatar. Walaupun kita boleh mencondongkan objek elips secara menegak, kita tidak dibenarkan melakukan operasi yang sama secara mendatar.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mengunci kecondongan mendatar 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：FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada paparan semasa kanvas?Artikel seterusnya：FabricJS - Bagaimana untuk memusatkan objek Line secara menegak pada paparan semasa kanvas?

Artikel berkaitan

Lihat lagi