Fabric.js 中的 strokeUniform 属性

在 Fabric.js 中，strokeUniform 是一个布尔属性，它控制了一个对象的描边宽度是否应该被缩放，以保持同样的厚度无论对象的缩放比例如何。如果 strokeUniform 设置为 false，则描边宽度将随着对象的缩放比例而进行调整，如果设置为 true，则描边宽度将始终保持不变。

基本用法

strokeUniform 属性可以在创建对象时或在对象的属性中设置。创建一个矩形对象并将 strokeUniform 设置为 false，可以看到当我们缩放对象时，描边的宽度也随之而变化。

var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  strokeWidth: 2,
  strokeUniform: false
});

canvas.add(rect);

设置 strokeUniform 属性为 true，可以保持描边宽度不变。

var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  strokeWidth: 2,
  strokeUniform: true
});

canvas.add(rect);

效果演示

可以查看以下代码片段，了解 strokeUniform 属性的效果：

// 不设置 strokeUniform 属性
var circle = new fabric.Circle({
  radius: 50,
  fill: 'green',
  left: 50,
  top: 50,
  strokeWidth: 2
});

// 设置 strokeUniform 属性为 true
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'blue',
  left: 200,
  top: 50,
  strokeWidth: 2,
  strokeUniform: true
});

// 设置 strokeUniform 属性为 false
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  left: 350,
  top: 50,
  strokeWidth: 2,
  strokeUniform: false
});

canvas.add(circle, triangle, rect);

总结

使用 strokeUniform 属性可以控制对象的描边宽度是否跟随缩放比例而调整。 strokeUniform 属性默认为 false，我们可以将其设置为 true，以保持描边宽度不变。