在本教程中,我们将学习如何使用 FabricJS 使椭圆不可见。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们将创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。我们的椭圆对象可以通过多种方式进行自定义,例如更改其尺寸、添加背景颜色或使其可见或不可见。我们可以通过使用 visible 属性来做到这一点。
语法
new fabric.Ellipse( { visible: Boolean }: Object)
参数
选项(可选)- 此参数是一个对象 为我们的椭圆提供额外的定制。使用此参数,可以更改与 visible 属性相关的对象的颜色、光标、描边宽度和许多其他属性。
选项键
可见 - 此属性接受布尔值强> 值允许我们将对象渲染到画布上。其默认值为 True。
示例 1
传递 visible 属性作为具有“true”值的键
让我们举个例子来了解当我们向 visible 属性传递“true”值时会发生什么。通过将值指定为“true”,我们确保 Ellipse 对象渲染到画布上。这也是 FabricJS 中的默认行为。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to make an Ellipse invisible using FabricJS?</h2> <p>The object is visible on the canvas because we have set the <b>visible</b> property to True. This is the default behavior. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, rx: 100, ry: 70, fill: "red", visible: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
示例 2
将 visible 属性作为具有“false”值的键传递
在此示例中,我们将 visible 属性作为带有“false”值的键传递。分配一个假值将确保我们的椭圆对象不会渲染到画布上。它只是不会使对象“不可见”,而是完全摆脱它。它可用于从画布中删除对象,而无需删除其代码。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to make an Ellipse invisible using FabricJS?</h2> <p>Here the ellipse object is invisible because we have set the <b>visible</b> property to False. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, rx: 100, ry: 70, fill: "red", visible: false, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
以上就是如何使用 FabricJS 使椭圆不可见?的详细内容,更多请关注编程之家其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。