cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan kelegapan sempadan apabila memindahkan segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan kelegapan sempadan apabila memindahkan segi empat tepat menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-08-25 10:17:07783semak imbas

Bagaimana untuk menetapkan kelegapan sempadan apabila memindahkan segi empat tepat menggunakan FabricJS?

Dalam tutorial ini kami akan menetapkan kelegapan sempadan bagi segi empat tepat apabila bergerak FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. untuk Untuk mencipta segi empat tepat, kita perlu mencipta contoh kelas Fabric.Rect dan menambahnya pada kanvas.

Kita boleh menggunakan sifat borderOpacityWhenMoving untuk menukar kelegapan segi empat tepat apabila menggerakkannya dalam kanvas.

Syntax

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

Parameter

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

    • ul>

    Contoh 1

    • Menunjukkan gelagat lalai harta

      borderOpacityWhenMovingMari kita lihat contoh kod yang menunjukkan gelagat lalai bagi harta

      Whenboder. Apabila kita memilih objek segi empat tepat dan menggerakkannya Di sekeliling kanvas, kelegapan sempadan pilihan berubah daripada 1 (legap sepenuhnya) kepada 0.4 Ini menjadikan ia kelihatan agak 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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
   <p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</b></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,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>
    Contoh 2

    Melalui sempadanOpacityWhenMoving sebagai kunciMari kita lihat contoh kod yang memberikan nilai pada sifat borderOpacityWhenMoving

    . Dalam contoh ini, kami menentukan nilai sebagai 0. Ia memberitahu kita bahawa apabila kita mengalihkan segi empat tepat, kelegapan sempadan akan berubah kepada 0 dan menjadi tidak kelihatan.

    rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan sempadan apabila memindahkan segi empat tepat 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 mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mengubah saiz objek secara tidak seragam dengan sudut menggunakan FabricJS?

Artikel berkaitan

Lihat lagi