Fabric.js 获取对象属性与粘贴对象方法

作者: luohao 更新: 2023-02-21 分类: JS

概述

Fabric.js 是一个强大的 HTML5 Canvas 绘图库，提供了丰富的图形操作 API。本文介绍如何获取画布中文本对象的属性，以及将属性数据粘贴为新对象。

Fabric.js 文档：FabricJS (Gitee)

获取文本对象属性

var data = [];

// 遍历画布上所有对象
for (const index in canvas._objects) {
    // 判断是否为文本对象（有 fontSize 属性）
    if (canvas._objects[index].fontSize !== undefined) {
        var v = canvas._objects[index].toObject();
        data.push(v);
    }
}

console.log(JSON.stringify(data));  // 输出所有文本对象属性

粘贴（复制）对象

// 将保存的属性数据还原为新对象
for (const index in data) {
    var text = new fabric.Text("");
    text.set(data[index]);   // 批量设置属性
    canvas.add(text);        // 添加到画布
    canvas.renderAll();      // 重新渲染
}

关键 API 说明

方法/属性说明
canvas._objects画布上所有对象的数组
obj.toObject()将 Fabric 对象序列化为普通 JS 对象
obj.toJSON()序列化为 JSON 字符串
text.set(obj)批量设置对象属性
canvas.add(obj)将对象添加到画布
canvas.renderAll()重新渲染整个画布

完整示例：复制粘贴功能

var clipboard = null;

// 复制选中对象
function copy() {
    var active = canvas.getActiveObject();
    if (active) {
        active.clone(function(cloned) {
            clipboard = cloned;
        });
    }
}

// 粘贴
function paste() {
    if (clipboard) {
        clipboard.clone(function(cloned) {
            cloned.set({
                left: cloned.left + 20,
                top: cloned.top + 20
            });
            canvas.add(cloned);
            canvas.setActiveObject(cloned);
            canvas.renderAll();
        });
    }
}

应用场景

  • 在线设计器中复制粘贴文本元素
  • 保存/恢复画布状态
  • 批量修改同类型对象的属性
  • 模板化生成图形

标签：