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

Bagaimana untuk menyembunyikan sempadan kawalan segi empat tepat menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-23 15:49:02

ke hadapan

955 orang telah melayarinya

Bagaimana untuk menyembunyikan sempadan kawalan segi empat tepat menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menyembunyikan sempadan 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 perlu mencipta contoh kelas fabric.Rect dan menambahkannya pada kanvas.

Kami boleh menyesuaikan sempadan kawalan dalam pelbagai cara, seperti menambahkan warna tertentu padanya, corak garis putus-putus, dsb. Walau bagaimanapun, kami juga boleh menghapuskan sempadan sepenuhnya dengan menggunakan harta hasBorders.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) − Parameter ini ialah objek digunakan untuk menyediakan penyesuaian tambahan untuk segi empat tepat. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek dengan sifat sempadan.

Kunci pilihan

hasBorders − Sifat ini menerima nilai boolean, apabila ditetapkan kepada palsu, sempadan kawalan tidak akan dipaparkan. Ia membantu dengan membuat sempadan kawalan. Nilai lalai adalah benar.

Contoh 1

Rupa lalai sempadan kawalan objek segi empat tepat

Mari kita lihat contoh kod yang menunjukkan rupa lalai sempadan kawalan segi empat tepat. Oleh kerana nilai lalai bagi sifat hasBorders ialah Benar, sempadan diberikan apabila objek segi empat tepat dipilih.

<!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 borders of a rectangle object</h2>
   <p>Select the rectangle to see the default appearance of controlling borders</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

Gunakan hasBorders sebagai kunci dan tetapkan nilai "false"

Jika harta hasBorders diberi nilai palsu, sempadan tidak akan diberikan lagi. Ini bermakna apabila kita memilih objek segi empat tepat, sempadan kawalan akan disembunyikan.

rreeee

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