FabricJS 中设置圆填充的方法

在使用 FabricJS 进行图形绘制和操作时，设置圆的填充是一项常见且重要的任务。FabricJS 是一个强大的 JavaScript 库，它为开发者提供了丰富的功能来创建和操作各种图形元素。

要在 FabricJS 中创建一个圆，我们可以使用以下基本代码：

var circle = new fabric.Circle({
    radius: 50,
    left: 100,
    top: 100
});

这里创建了一个半径为 50，位于页面横坐标 100 像素、纵坐标 100 像素位置的圆。

接下来，设置圆的填充有多种方式。最常见的是设置纯色填充，只需在创建圆的配置对象中添加 fill 属性即可。例如：

var circle = new fabric.Circle({
    radius: 50,
    left: 100,
    top: 100,
    fill: '#FF0000' // 设置为红色
});

这样，圆就会被填充为红色。

除了纯色填充，还可以使用渐变填充来为圆增添更丰富的视觉效果。FabricJS 支持线性渐变和径向渐变。以线性渐变为例，代码如下：

var gradient = new fabric.LinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');

var circle = new fabric.Circle({
    radius: 50,
    left: 100,
    top: 100,
    fill: gradient
});

这段代码创建了一个从红色到绿色的线性渐变填充的圆。径向渐变的设置方式类似，只是使用 fabric.RadialGradient 来创建渐变对象。

另外，如果想要使用图片来填充圆，也是可行的。首先需要加载图片，然后将其作为填充源。代码如下：

fabric.Image.fromURL('your-image-url.jpg', function (img) {
    var circle = new fabric.Circle({
        radius: 50,
        left: 100,
        top: 100,
        fill: img
    });
});

在实际应用中，我们可能还需要动态地改变圆的填充。可以通过获取圆的实例，然后重新设置其 fill 属性来实现。例如：

// 假设已经有一个圆实例 circle
circle.fill = '#0000FF'; // 动态将填充改为蓝色

通过上述方法，开发者可以根据项目需求灵活地设置 FabricJS 中圆的填充，为图形绘制和交互带来更多可能性。