在本教程中,我们将学习如何使用 FabricJS 隐藏圆的控制边框。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈,我们将创建一个 Fabric.Circle 类的实例并将其添加到画布中。我们可以通过多种方式自定义控制边框,例如添加特定颜色、破折号图案等。但是,我们也可以使用 hasBorders 属性完全消除边框。
语法
new fabric.Circle({ hasBorders: Boolean }: Object)
登录后复制
参数
选项(可选) – 此参数是一个对象 为我们的圈子提供额外的定制。使用此参数,可以更改与 hasBorders 为属性的对象相关的颜色、光标、描边宽度等属性。
ul>
选项键
hasBorders – 此属性接受布尔值 值,当设置为 False 时,将不会渲染控制边框。默认值为True。
示例 1
Circle 对象控制边框的默认外观
让我们看一段代码,显示控制圆边框的默认外观。由于hasBorders属性的默认值为True,因此在选择圆形对象时渲染边框。
Hiding the controlling borders of a circle using FabricJS
Select the object and notice its controlling borders. This is the default appearance. Although we have not used the hasBorders property, it is by default set to True.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5 }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
登录后复制
示例 2
将 hasBorders 作为键传递并为其分配“false”值
如果 hasBorders 属性被分配了一个 False 值,边框将不再被渲染。这意味着当我们选择圆形对象时,控制边框将被隐藏。
Hiding the controlling borders of a circle using FabricJS
Select the object and now you will no longer be able to see its controlling borders, as we have set hasBorders as False.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5, hasBorders: false }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
登录后复制
以上就是如何使用 FabricJS 隐藏圆的控制边框?的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2694641.html