FabricJS 中创建带边框颜色矩形的方法

在使用 FabricJS 进行图形绘制与交互开发时，创建带边框颜色的矩形是一项常见需求。掌握此方法，能让开发者轻松为项目增添各种美观实用的矩形元素。

要引入 FabricJS 库。可以通过 CDN 链接直接引入到 HTML 文件中，确保在后续代码中能够正确调用其功能。

创建带边框颜色的矩形，关键代码如下：

// 创建一个 Fabric 画布
var canvas = new fabric.Canvas('canvas');

// 创建一个矩形对象
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 200,
    height: 150,
    fill: 'lightblue', // 矩形填充颜色
    stroke: 'red', // 边框颜色
    strokeWidth: 3 // 边框宽度
});

// 将矩形添加到画布上
canvas.add(rect);

在这段代码中，fabric.Rect 用于创建矩形对象。通过设置 left 和 top 属性确定矩形在画布上的位置，width 和 height 定义其大小。fill 属性设置矩形的填充颜色，而 stroke 属性就是我们重点关注的边框颜色设置，这里将边框颜色设为红色。strokeWidth 则控制边框的宽度，这里设为 3 像素。

如果想要在后续动态改变矩形边框颜色，可以这样操作：

// 获取画布上的矩形对象
var rect = canvas.getObjects()[0];

// 改变边框颜色
rect.set('stroke', 'green');

// 渲染画布，使更改生效
canvas.renderAll();

通过 getObjects() 方法获取画布上的矩形对象，然后使用 set 方法修改 stroke 属性值，最后调用 renderAll() 方法重新渲染画布，就能看到边框颜色的动态变化。

在实际项目中，还可以结合用户交互事件，如点击、鼠标悬停等，实现根据用户操作动态改变矩形边框颜色，为应用增加更多交互性和趣味性。掌握 FabricJS 中创建带边框颜色矩形的方法，无论是简单的图形绘制，还是复杂的界面交互设计，都能更加得心应手，为项目开发带来更多便利与创意。