我们可以更改对象的尺寸、旋转它或当它被主动选择时对其进行操作。我们可以使用 selectionbackgroundcolor 属性来更改三角形选区的背景颜色。
语法new fabric.triangle({ selectionbackgroundcolor : string }: object)
参数选项(可选) - 此参数是一个对象,它为我们的三角形提供额外的自定义。使用此参数,可以更改与 selectionbackgroundcolor 为属性的对象相关的属性,例如颜色、光标、描边宽度和许多其他属性。
选项键selectionbackgroundcolor - 此属性接受字符串值。分配的值将确定选区的背景颜色。
示例 1selectionbackgroundcolor 时的默认颜色 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 设置三角形选择的背景颜色?的详细内容。
