Bagaimana untuk menetapkan warna isian segitiga menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menukar rupa objek Segitiga dengan menukar warna isiannya 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.

Kita boleh menggunakan atribut fill, yang membolehkan kita menentukan warna isian objek.

Syntax

new Fabric.Triangle({ fill: String }: Object)

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 fill merupakan atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Option key

• fill - Sifat ini menerima string yang membolehkan kita menukar warna isian objek. Nilai lalainya ialah rgb(0,0,0), iaitu hitam.

Contoh 1

Warna isian lalai untuk objek segi tiga

Mari kita lihat contoh kod yang menunjukkan kepada kita warna isian lalai untuk objek segi tiga dalam FabricJS. Jika kita melangkau sifat isian sepenuhnya semasa mencipta objek segi tiga, ia akan menjadikan hitam dengan warna isian.

< !DOCTYPE html>






三角形对象的默认填充颜色
可以看到三角形的默认填充颜色是黑色


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

Contoh 2

Melalui isi atribut sebagai kunci

Kami juga boleh menentukan sebarang nama warna atau nilai RGBA untuk atribut fill. Dalam contoh ini, kami telah memberikannya nilai "biru", menukar warna isian dengan sewajarnya.

rreeee

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