Fabric Js路径StrokeMiterLimit属性介绍

在Fabric Js中，路径的strokeMiterLimit是指在两条线段的交点处，由交点处内角的一半决定的限制比例。如果该比例大于strokeMiterLimit，则会发生尖角溢出现象，也就是说线段的外角会呈现出一个“刺”。strokeMiterLimit可以控制这个比例。

语法

path.setOptions({strokeMiterLimit: value})

• value：数字类型，表示限制比例。

默认值

默认的strokeMiterLimit为10。

实例

下面是一个简单的例子，创建了一个矩形，并通过修改strokeMiterLimit属性控制线段外角的表现：

// 创建一个矩形
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: 'red',
    stroke: 'green',
    strokeWidth: 10,
    strokeMiterLimit: 5
});
// 添加到画布中
canvas.add(rect);

注意事项

• strokeMiterLimit的值不能小于1。
• 当线段发生交叉时，strokeMiterLimit会影响线段交叉处的角度表现。如果设置过小，会导致角度变平，甚至看不出还原本来的角度是多少。如果设置过大，则会出现尖角溢出的现象。因此，在选择值时，需要根据具体情况进行调整。
• 在canvas元素上，strokeMiterLimit也可以用lineJoin属性来设置。如果设置为“miter”，则线段角上的尖角会受到该属性的影响。

参考资料

• Fabric.js strokeMiterLimit