Fabric.js 多边形 strokeUniform 属性

介绍

strokeUniform 是 Fabric.js 多边形的一个属性，用于指定多边形边框在不同位置的宽度是否要保持相同。当 strokeUniform 值为 false 时，多边形的不同边的边框宽度可以不同。当 strokeUniform 值为 true 时，多边形的边框宽度会被强制保持相等。

语法

object.strokeUniform = true|false;

示例

设置 strokeUniform 为 true

var canvas = new fabric.Canvas('canvas');
var polygon = new fabric.Polygon([
  {x: 10, y: 10},
  {x: 10, y: 50},
  {x: 50, y: 50},
  {x: 50, y: 10}
]);
polygon.fill = 'red';
polygon.stroke = 'blue';
polygon.strokeWidth = [10, 5, 10, 5]; // 不同边的边框宽度
polygon.strokeUniform = true; // 设置为 true 强制边框宽度相等
canvas.add(polygon);

以上代码生成的多边形如下图所示：

设置 strokeUniform 为 false

var canvas = new fabric.Canvas('canvas');
var polygon = new fabric.Polygon([
  {x: 10, y: 10},
  {x: 10, y: 50},
  {x: 50, y: 50},
  {x: 50, y: 10}
]);
polygon.fill = 'red';
polygon.stroke = 'blue';
polygon.strokeWidth = [10, 5, 10, 5]; // 不同边的边框宽度
polygon.strokeUniform = false; // 设置为 false 不强制边框宽度相等
canvas.add(polygon);

以上代码生成的多边形如下图所示：

总结

strokeUniform 属性可以用于指定多边形边框宽度是否相等，更加方便地创建具有不同宽度边框的多边形形状。在一些特殊场景下，比如需要对多边形的某些边加粗或加重视觉效果，就可以使用这个属性。