Fabric.js ActiveSelection strokeUniform 属性介绍

概述

在Fabric.js中，ActiveSelection是一种特殊类型的对象，表示同时选中多个可编辑的对象。strokeUniform属性是ActiveSelection对象的一个布尔值属性，用于定义选中的对象是否具有相同的描边宽度。

语法

activeSelection.strokeUniform = true|false;

属性值

• true：选中的对象具有相同的描边宽度，即描边宽度统一为ActiveSelection对象自身的描边宽度。
• false：选中的对象的描边宽度保持原样，即不会统一为ActiveSelection对象自身的描边宽度。

示例

假设我们有两个矩形，分别具有不同的描边宽度，我们将这两个矩形组合在ActiveSelection对象中并设置strokeUniform属性为true或false，观察其效果。

var canvas = new fabric.Canvas('canvas');

var rect1 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 50,
  top: 50,
  fill: 'red',
  strokeWidth: 5
});

var rect2 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 200,
  top: 50,
  fill: 'blue',
  strokeWidth: 2
});

var group = new fabric.ActiveSelection([rect1, rect2], {
  strokeUniform: true
});

canvas.add(group);

在上述示例中，当strokeUniform属性为true时，选中的两个矩形的描边宽度将统一为ActiveSelection对象自身的描边宽度，即5像素。

当strokeUniform属性为false时，选中的两个矩形的描边宽度将保持原样，即rect1为5像素，rect2为2像素。

注意事项

• strokeUniform属性仅对选中多个对象的ActiveSelection有效，对于单个对象无效。
• 当设置strokeUniform属性时，需保证ActiveSelection对象的strokeWidth属性为有效值。