Bagaimana untuk menyembunyikan sudut kawalan segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menyembunyikan sudut kawalan segi empat tepat menggunakan FabricJS?

王林

Lepaskan： 2023-08-31 18:05:08

ke hadapan

624 orang telah melayarinya

如何使用 FabricJS 隐藏矩形的控制角？

Dalam tutorial ini, kita akan belajar cara menyembunyikan sudut kawalan segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas Fabric.Rect dan menambahkannya pada kanvas. Sudut kawalan objek membolehkan kita menambah atau mengurangkan perkadarannya, meregangkannya atau menukar kedudukannya.

Kami boleh menyesuaikan sudut kawalan dalam pelbagai cara, seperti menambahkan warna tertentu padanya, menukar saiznya dan banyak lagi. Kami juga boleh menyembunyikannya menggunakan harta hasControls.

Syntax

new fabric.Rect({ hasControls: Boolean }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang hasControls adalah harta.

Option Key

hasControls - Sifat ini menerima nilai Boolean yang membolehkan kami menunjukkan atau menyembunyikan sudut kawalan objek yang dipilih secara aktif. Nilai lalainya adalah benar.

Contoh 1

Kawal rupa lalai sudut

Mari kita lihat contoh kod yang menunjukkan rupa lalai sudut kawalan. Oleh kerana nilai lalai harta hasControls ialah Benar, sudut kawalan tidak disembunyikan.

<!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>Default appearance of controlling corners</h2>
   <p>Select the rectangle to see the default appearance of controlling corners</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Pass hasControls sebagai kunci dan tetapkan nilai False

Dalam contoh ini, kita akan melihat cara menyembunyikan sudut kawalan dengan menggunakan atribut hasControls. Kita perlu memberikan nilai False kepada kunci hasControls. Dengan melakukan ini, sudut kawalan akan disembunyikan.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan sudut kawalan segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!