在本文中，我们将学习如何使用 FabricJS 设置画布上选择区域的边框颜色。选择指示是否应启用组选择。 FabricJS 允许我们使用 SelectionBorderColor 属性相应地调整边框颜色。
语法
new fabric.Canvas(element: HTMLElement|String, { selectionBorderColor: String }: Object)
参数
元素 – 此参数是元素本身，可以使用 document.getElementById() 或 元素本身的 id 派生。 FabricJS 画布将在此元素上初始化。
选项（可选） – 此参数是一个对象，它提供对我们的画布进行额外的定制。使用此参数，可以更改与画布相关的颜色、光标、边框宽度等属性以及许多其他属性，其中selectionBorderColor是我们可以用来指示选区边框颜色的属性。 SelectionBorderColor 属性的默认值为 rgba(255,255,255,0.3)。
示例 1
使用颜色名称设置选择区域color
Cutout老照片上色
Cutout.Pro推出的黑白图片上色
20 查看详情 
selectionBorderColor 属性接受一个字符串，该字符串确定选区边框的颜色。颜色通常比选区本身的颜色深。让我们看一个代码示例，了解如何使用 FabricJS 设置画布中选择区域的边框颜色。
Setting the border color of a selection area on a canvas
Select an area around the object. You will notice that the border color of the selection would be red in color.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionBorderColor: "green", }); // Creating an instance of the fabric.Rect class var rect = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#006400", angle: 90, }); // Adding it to the canvas canvas.add(rect); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
示例 2
使用 rgba 值作为选择区域颜色
我们还可以使用“rgba”值，其中“a”代表“alpha”表示不透明度。在此示例中，我们使用了栗色，其“rgba”值为 (112,0,0)，0.9 表示不透明度。
Setting border colour of selection area using FabricJs
Select an area around the object to see the border color of the selection area. Here we have used "rgba" value to set the border color of the selection area.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionBorderColor: "rgba(112,0,0,0.9)", }); // Creating an instance of the fabric.Rect class var rect = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#006400", angle: 90, }); // Adding it to the canvas canvas.add(rect); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
以上就是如何使用 FabricJS 设置画布上选择区域的边框颜色？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/530639.html
微信扫一扫 
支付宝扫一扫 
