Rumah > Artikel > hujung hadapan web > Bagaimana untuk menjadikan sudut kawalan elips telus menggunakan FabricJS?

Bagaimana untuk menjadikan sudut kawalan elips telus menggunakan FabricJS?

WBOYke hadapan: 2023-08-24 18:33:02545semak imbas

如何使用 FabricJS 使椭圆的控制角透明？

Dalam tutorial ini, kita akan belajar cara membuat sudut kawalan Ellipse telus menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kami akan mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Sifat transparentCorners membolehkan kami menjadikan sudut kawalan elips telus.

Syntax

new fabric.Ellipse( { transparentCorners: 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 berkaitan dengan objek yang transparentCorners ialah hartanya.

Options Keys

transparentCorners - Harta ini menerima nilai Boolean yang membolehkan kita menjadikan sudut kawalan objek sebagai lutsinar. Nilai lalainya ialah Benar. . Untuk mencapai matlamat ini, kita perlu memberikan nilai "palsu" kepada harta
transparentCorners

<!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 make controlling corners of Ellipse transparent using FabricJS?</h2>
      <p>Select the object and you will notice that the controlling corners are not transparent. Here we have set the <b>transparentCorners</b> property to False. </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,
            rx: 100,
            ry: 70,
            fill: "red",
            transparentCorners: false,
         });

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

Contoh 2

Melepasi transparent Corners sebagai kunci dengan nilai "benar"

Dalam contoh ini, kami menghantar nilai transparent Corners" dengan atribut "true". Ini akan memastikan sudut kawalan dibuat telus. Ambil perhatian bahawa ini juga merupakan tingkah laku lalai.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menjadikan sudut kawalan elips telus menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mencipta elemen imej secara dinamik menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk mencipta elemen imej secara dinamik menggunakan JavaScript?

Artikel berkaitan

Lihat lagi