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

Bagaimana untuk menambah strok pada segitiga menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-21 13:49:02

ke hadapan

706 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> 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.

< /ul>
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>  <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>
Salin selepas log masuk
Contoh 2
Melalukan nilai rgba kepada
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
rgba (46,139,87,0.8)
, iaitu hijau laut dengan kelegapan 0.8.
rreeee
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!