Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah strok pada segitiga menggunakan FabricJS?

Bagaimana untuk menambah strok pada segitiga menggunakan FabricJS?

WBOYke hadapan: 2023-09-21 13:49:02725semak imbas

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

Dalam tutorial ini, kita akan belajar cara menambah lejang 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 Fabric.Triangle dan menambahkannya pada kanvas.

Objek segi tiga kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menukar warna garisan yang dilukis di sekeliling objek. Kita boleh melakukannya dengan menggunakan atribut Stroke.

Syntax

new fabric.Triangle({ stroke : String }: Object)

Parameter

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

Kekunci Pilihan

Stroke - Sifat ini menerima String untuk menentukan warna sempadan objek ini. . Kod warna heksadesimal bermula dengan "#" diikuti dengan nombor enam digit yang mewakili warna. Dalam kes ini, kami menggunakan "#3cb371", iaitu Mid-Sea Green.

<!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>Passing stroke as key with a hexadecimal value</h2>
   <p>You can see that the stroke around the triangle is of medium sea-green colour</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: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "#3cb371",
         strokeWidth: 7,
      });

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

Strokeproperty

Dalam contoh ini, kita akan melihat cara untuk menentukan nilai rgba untuk sifat stroke. Daripada kod warna hex, kita boleh menggunakan nilai RGBA yang bermaksud: merah, hijau, biru dan alfa. Parameter alfa menentukan kelegapan warna. Dalam contoh ini, kami menggunakan nilai

, iaitu hijau laut dengan kelegapan 0.8.

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

String 值传递对象 ul fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menetapkan saiz sudut kawalan segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan saiz sudut kawalan segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi