Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menyembunyikan sempadan kawalan elips menggunakan FabricJS?

Bagaimana untuk menyembunyikan sempadan kawalan elips menggunakan FabricJS?

王林ke hadapan: 2023-08-24 15:17:04719semak imbas

如何使用 FabricJS 隐藏椭圆的控制边框？

Dalam tutorial ini, kita akan belajar cara menyembunyikan sempadan kawalan elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kami boleh menyesuaikan sempadan kawalan dalam pelbagai cara, seperti menambah warna tertentu, corak sempang, dsb. Walau bagaimanapun, kami juga boleh menghapuskan sempadan sepenuhnya menggunakan harta hasBorders.

Syntax

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

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek 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 hasBorders ialah atribut. . Nilai lalai ialah
Benar

Kemunculan lalai sempadan kawalan objek EllipseContoh berikut menunjukkan rupa lalai sempadan kawalan Ellipse. Memandangkan nilai lalai bagi sifat hasBorders ialah "benar", sempadan dipaparkan apabila objek elips dipilih. em>

<!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 hide the controlling borders of an Ellipse using FabricJS?</h2>
      <p>Select the object and you would get to see the controlling borders. 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: 105,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

Contoh 2 Melepasi hasBorders

sebagai kunci dan memberikannya nilai "palsu"

Jika harta

>hasBorders

diberi nilai "palsu". Ini bermakna apabila kita memilih objek elips, sempadan kawalan akan disembunyikan. rreeee

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan sempadan kawalan elips 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：Bagaimana untuk membuka kamera web menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk membuka kamera web menggunakan JavaScript?

Artikel berkaitan

Lihat lagi