如何使用 FabricJS 设置三角形选择的背景颜色？

在本教程中，我们将学习如何使用 FabricJS 设置三角形选择的背景颜色。三角形是 FabricJS 提供的各种形状之一。为了创建一个三角形，我们必须创建一个 Fabric.Triangle 类的实例并将其添加到画布中。

我们可以更改对象的尺寸、旋转它或当它被主动选择时对其进行操作。我们可以使用 selectionBackgroundColor 属性来更改三角形选区的背景颜色。

语法

new Fabric.Triangle({ SelectionBackgroundColor : String }: Object)

参数

• 选项< /strong>（可选） - 此参数是一个对象，它为我们的三角形提供额外的自定义。使用此参数，可以更改与 selectionBackgroundColor 为属性的对象相关的属性，例如颜色、光标、描边宽度和许多其他属性。

< /ul>

选项键

• selectionBackgroundColor - 此属性接受字符串值。分配的值将确定选区的背景颜色。

示例 1

selectionBackgroundColor 时的默认颜色 em> 未使用属性

让我们看一个代码示例，以了解在未使用 selectionBackgroundColor 属性时选择内容的显示方式。从这个例子中我们可以看到，选择区域或对象后面的区域没有颜色。

不使用selectionBackgroundColor属性时的默认颜色
可以选择三角形，可以看到选择区域没有颜色。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
});

// 将其添加到画布中
canvas.add(三角形);

登录后复制

示例 2

将 selectionBackgroundColor 属性作为键传递

在此示例中，我们正在为 selectionBackgroundColor 属性分配一个值。在本例中，我们向其传递了十六进制值“da70d6”，即洋红色，因此选择区域看起来就是该颜色。

将selectionBackgroundColor属性作为键传递
您可以选择三角形以查看选择区域现在具有洋红色


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
选择背景颜色：“#da70d6”，
});

// 将其添加到画布中
canvas.add(三角形);

登录后复制

以上是如何使用 FabricJS 设置三角形选择的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！