Fabric.js addClass() 方法

在 Fabric.js 中，将添加样式类应用于对象或图形元素是通过 addClass(className) 方法完成的。使用这个方法，你可以轻松修改对象的显示方式，加入特定的样式类。

方法介绍

方法名称： addClass

方法参数： className

方法描述： 添加一个 CSS 类到对象的 HTML 元素上。

使用示例

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

// 添加一个带有“highlight”类的样式类
rectangle.addClass('highlight');

canvas.add(rectangle);
canvas.renderAll();

效果说明

在上述示例中，我们创建了一个红色的矩形，然后将样式类highlight添加到它的 HTML 元素上。这可以让我们使用 CSS 规则对其进行特殊的样式化。

.highlight {
  stroke: yellow;
  stroke-width: 5;
}

因此，添加一个highlight类让矩形的边缘变成黄色且10px宽。

建议

• 添加多个 CSS 类到单个对象，可以将它们用空格分隔开。
• 可以通过 removeClass(className) 方法来移除对象上的样式类。

结论

通过使用 addClass() 方法，你可以轻松地向你的 Fabric.js 对象添加 CSS 类，使其可以很容易地在 HTML 中进行样式化。