cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan kelegapan sempadan bulatan semasa bergerak menggunakan FabricJS?

Bagaimana untuk menetapkan kelegapan sempadan bulatan semasa bergerak menggunakan FabricJS?

王林
王林ke hadapan
2023-08-24 14:53:02888semak imbas

如何使用 FabricJS 在移动时设置圆的边框不透明度？

Dalam tutorial ini, kami akan menggunakan FabricJS untuk menetapkan kelegapan sempadan Bulatan semasa bergerak. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh menggunakan sifat borderOpacityWhenMoving untuk menukar kelegapan bulatan semasa ia bergerak mengelilingi kanvas.

Syntax

new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang borderOpacityWhenMoving ialah harta. . Ia membolehkan kami mengawal kelegapan sempadan apabila menggerakkan objek bulat. Nilai lalai ialah 0.4.

    • ul>

    Contoh 1

    • Menunjukkan kelakuan lalai bagi hartanah borderOpacityWhenMoving

      Mari kita lihat contoh yang menunjukkan kelakuan lalai bagi harta boderOpacityWhenMoving. Apabila kita memilih objek bulatan dan mengalihkannya ke sekeliling kanvas, kelegapan sempadan pemilihan berubah daripada 1 (legap sepenuhnya) kepada 0.4, yang menjadikannya kelihatan sedikit lut sinar. 

      <!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>Setting the border opacity of Circle while moving using FabricJS</h2>
      <p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
         });

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

      Melalui sempadanOpacityWhenMoving sebagai kunci

    Mari kita lihat contoh memberikan nilai pada harta

    borderOpacityWhenMoving

    . Dalam contoh ini, kami menentukan nilai sebagai 0. Ini memberitahu kita bahawa apabila kita mengalihkan bulatan, kelegapan sempadan akan berubah kepada 0 dan menjadi tidak kelihatan. rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan sempadan bulatan semasa bergerak 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 menetapkan warna isian elips menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan warna isian elips menggunakan FabricJS?

Artikel berkaitan

Lihat lagi