Bagaimana untuk menambah lejang putus-putus pada segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah lejang putus-putus pada segi empat tepat menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-25 12:29:09

ke hadapan

944 orang telah melayarinya

如何使用 FabricJS 向矩形添加虚线描边？

Dalam tutorial ini, kita akan belajar cara menambah lejang putus-putus pada segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas Fabric.Rect dan menambahkannya pada kanvas. Sifat StrokeDashArray membolehkan kami menentukan corak sempang untuk sapuan objek.

Syntax

new fabric.Rect( { strokeDashArray: Array }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang merupakan sifat StrokeDashArray.

Kekunci Pilihan

StrokeDashArray - Sifat ini membolehkan kita menentukan corak sempang untuk lejang objek. Kita boleh melakukan ini dengan menghantarnya secara array. Contohnya, jika kita melepasi tatasusunan dengan nilai [2,3], ia mewakili corak sempang 2px sengkang dan 3px jurang, dan corak ini berulang tanpa had.

Contoh 1

Nampak lalai strok objek

Mari kita lihat contoh kod yang menerangkan rupa lalai strok objek segi empat tepat. Memandangkan kami tidak menggunakan atribut StrokeDashArray, corak sempang tidak dipaparkan.

<!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>Default appearance of an object&rsquo;s stroke</h2>
   <p>You can see that there is no dashed stroke on the rectangle</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: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#2a52be",
         strokeWidth: 7,
      });

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

Salin selepas log masuk

Contoh 2

Melalui sifat StrokeDashArray sebagai kunci

Dalam contoh ini, kami menghantar nilai [9,2] kepada sifat StrokeDashArray. Ini bermakna corak putus-putus akan dibuat dengan garisan panjang 9 piksel diikuti dengan jurang 2 piksel, kemudian sekali lagi garisan panjang 9 piksel dilukis, dan seterusnya.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menambah lejang putus-putus pada segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!