在本文中,我们将使用 add 方法将对象添加到画布。创建画布后,我们可以用 FabricJS 中可用的各种对象填充它,例如fabric.Circle、fabric.Ellipse 或fabric.Line 等。
语法
canvas.add(object: fabric.Object);
参数
Object - 该参数的类型为fabric.Object并保存对象
示例 1:在 canvas.add() 中创建对象的实例
而不是创建首先获取对象的实例,然后使用 add() 方法将其渲染到画布上,我们可以直接在 add() 方法中执行此操作。这是一个例子来说明 -
<!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> <div style="padding: 10px; font-weight: bold"> How to add an object to the canvas using FabricJS </div> <canvas id="canvas" width="500" height="300" style="border: 2px solid #000000"> </canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.add( new fabric.Circle({ radius: 40, fill: "#9370db", top: 100, left: 100, }) ); </script> </body> </html>
输出
示例 2:创建一个对象,然后将其添加到画布
在此示例中,我们将了解如何创建使用 Fabric.Triangle 类创建一个三角形对象并将其添加到画布中。
<!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> <div style="padding: 10px; font-weight: bold"> How to add an object to the canvas using FabricJS </div> <canvas id="canvas" width="500" height="300" style="border: 2px solid #000000"> </canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Creating an instance of the fabric.Triangle class var triangle = new fabric.Triangle({ width: 60, height: 70, fill: "#87a96b", left: 30, top:20 }); // Adding it to the canvas canvas.add(triangle); </script> </body> </html>
输出
以上就是如何使用 FabricJS 将对象添加到画布?的详细内容,更多请关注编程之家其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。