Fabric.js 多边形边框颜色属性

当使用 Fabric.js 创建多边形时，可以定义多边形的边框颜色属性。

方法

有两种方法可以设置多边形的边框颜色：

1. 通过 set() 方法

// 创建多边形对象
var polygon = new fabric.Polygon([
    {x: 50, y: 50},
    {x: 150, y: 50},
    {x: 150, y: 150},
    {x: 50, y: 150}
], {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 2
});

// 设置边框颜色为黄色
polygon.set('stroke', 'yellow');

2. 直接更改属性

// 创建多边形对象
var polygon = new fabric.Polygon([
    {x: 50, y: 50},
    {x: 150, y: 50},
    {x: 150, y: 150},
    {x: 50, y: 150}
], {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 2
});

// 直接更改边框颜色属性
polygon.stroke = 'yellow';

示例

以下示例演示了如何创建一个多边形对象，并设置其边框颜色属性：

// 创建一个 canvas 对象
var canvas = new fabric.Canvas('c');

// 创建多边形对象
var polygon = new fabric.Polygon([
    {x: 50, y: 50},
    {x: 150, y: 50},
    {x: 150, y: 150},
    {x: 50, y: 150}
], {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 2
});

// 设置边框颜色为黄色
polygon.set('stroke', 'yellow');

// 将多边形对象添加到画布上
canvas.add(polygon);

结论

在 Fabric.js 中，可以通过 set() 方法或直接更改属性来设置多边形对象的边框颜色。无论使用哪种方法，都可以轻松地创建自定义的多边形对象。