FabricJS 中如何向画布添加对象

在使用 FabricJS 进行图形处理和交互开发时，向画布添加对象是一项基础且关键的操作。通过合理地添加各种对象，能够创建出丰富多彩的交互式图形界面。

要向画布添加对象，需确保已经正确引入了 FabricJS 库。这是一切操作的前提，只有引入成功，才能使用其丰富的功能。

添加简单图形对象，如矩形、圆形等，是常见的需求。以添加矩形为例，代码如下：

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 200,
    height: 150,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 2
});
canvas.add(rect);

在这段代码中，先创建了一个画布对象，然后定义了一个矩形对象，设置了其位置、大小、填充颜色、边框颜色和边框宽度等属性，最后使用 canvas.add() 方法将矩形添加到画布上。

对于添加图像对象，过程稍有不同。可以通过以下步骤实现：

var img = new Image();
img.src = 'your-image-url.jpg';
img.onload = function () {
    var fabricImg = new fabric.Image(img, {
        left: 50,
        top: 50
    });
    canvas.add(fabricImg);
};

这里先创建一个 HTML 的 Image 对象，设置其 src 属性为图像的 URL。当图像加载完成后，利用 fabric.Image() 创建一个 FabricJS 图像对象，并设置其在画布上的位置，再添加到画布。

除了这些基本对象，还可以添加文本对象。代码如下：

var text = new fabric.Text('Hello, FabricJS!', {
    left: 150,
    top: 250,
    fontSize: 30,
    fill: 'green'
});
canvas.add(text);

此代码创建了一个文本对象，设置了文本内容、位置、字体大小和填充颜色，然后将其添加到画布上。

在 FabricJS 中向画布添加对象并不复杂，通过掌握不同类型对象的添加方法，开发者可以灵活地构建各种图形应用，为用户带来出色的交互体验。无论是简单的图形绘制，还是复杂的图像与文本组合，FabricJS 都提供了强大而便捷的工具。