Bagaimana untuk menjadikan sudut kawalan elips telus menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menjadikan sudut kawalan elips telus menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 18:33:02

ke hadapan

609 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek< /em> 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>

Salin selepas log masuk

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!