如何使用 FabricJS 将对象添加到画布?


在本文中,我们将使用 **add** 方法将对象添加到画布。创建画布后,我们可以使用 FabricJS 中提供的各种对象(如 fabric.Circle、fabric.Ellipse 或 fabric.Line 等)填充它。

语法

canvas.add(object: fabric.Object);

参数

  • 对象 − 此参数的类型为 fabric.Object,并包含我们要添加到画布中的对象。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例 1:在 canvas.add() 内部创建对象实例

我们可以直接在 **add()** 方法内部执行此操作,而不是首先创建对象实例,然后使用 **add()** 方法将其渲染到画布上。以下是一个说明此方法的示例:

Open Compiler
<!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** 类创建三角形对象并将其添加到画布。

Open Compiler
<!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>

输出

更新于: 2022年3月24日

1K+ 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告