Bagaimana untuk mengunci kecondongan menegak bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengunci kecondongan menegak bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-30 12:09:04

ke hadapan

1337 orang telah melayarinya

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

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

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang lockSkewingY ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Kunci Pilihan

lockSkewingY - Hartanah ini menerima nilai boolean< /strong>. Jika kita memberikan nilai "benar", kecondongan menegak objek akan dikunci.

Contoh 1

Gelagat lalai objek Bulatan dalam kanvas

Mari kita lihat contoh kod untuk memahami gelagat lalai objek Bulatan apabila sifat lockSkewingY 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>Locking the vertical skewing of a circle using FabricJS</h2>
      <p>Select the object, hold the <b>shift</b> key, and stretch it horizontally or vertically. The object will get skewed freely. This is the default behavior. Here we have not applied the <b>lockSkewingY</b> property, but by default, it is set to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            fill: "white",
            radius: 50,
            stroke: "black",
            strokeWidth: 5
         });

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

Salin selepas log masuk

Contoh 2

Melalui kunciSkewingY sebagai kunci dengan nilai "true"

Dalam contoh ini kita akan melihat bagaimana untuk menghentikan keupayaan bulatan untuk mencondongkan objek secara menegak menggunakan sifat lockSkewingY. Seperti yang kita lihat, walaupun kita boleh mencondongkan objek bulat secara mendatar dengan menekan kekunci Shift, kita tidak dibenarkan melakukan perkara yang sama secara menegak.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk mengunci kecondongan menegak bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!