Bagaimana untuk menambah pukulan putus-putus pada segitiga menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah pukulan putus-putus pada segitiga menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 18:45:08

ke hadapan

1155 orang telah melayarinya

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

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

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang StrokeDashArray ialah sifat, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Option Key

Stroke DashArray - Harta ini menerima array yang membolehkan kita menentukan corak putus-putus bagi pukulan objek. 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 bagi strok objek segi tiga. 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&#39;s stroke</h2>
   <p>You can see there is no dash pattern in the stroke</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 triangle object
      var triangle = new fabric.Triangle({
         left: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
      });

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

Salin selepas log masuk

Contoh 2

Melalui sifat StrikeDashArray 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 panjang 2 piksel, kemudian sekali lagi lukis garisan panjang 9 piksel, dan seterusnya.

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