1、创建一个Fabric组并向其添加元素
2、标识要修改的组中的特定元素
3、访问并修改该元素的填充颜色
下面是JavaScript中的一个代码示例:
// Create a Fabric.js canvas
var canvas = new fabric.Canvas('canvas');
// Create a rectangle and a circle
var rectangle = new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: 'red' //矩形，初始填充红色
});
var circle = new fabric.Circle({
left: 30,
top: 30,
radius: 25,
fill: 'blue' // 圆形，初始填充红色
});
//创建group元素
var group = new fabric.Group([rectangle, circle]);
// 将group加到canvas中
canvas.add(group);
// 获取组中的特定元素(在本例中为圆圈)
var targetElement = group.getObjects()[1]; // 获取组内第二个元素（圆形）。
// 修改填充色为绿色
targetElement.set({ fill: 'green' });
// 更新画布
canvas.renderAll();
在上面的代码中:
1.我们创建一个Fabric.js画布，并在其中添加一个矩形和一个圆形。
2.我们创建一个组，并将矩形和圆形添加到组中。
3.我们使用“group.getObjects()[1]”，获得组内的特定元素(circle)。
4.我们使用targetElement.set (fill:'green') 访问和修改圆形元素的填充颜色
5.最后，我们渲染画布以查看更新后的填充颜色。
效果图：
未修改颜色之前↓
修改颜色之后↓
