Question

我需要为现有的对象属性集引入一些额外的属性。

像：

ID
地理位置
etc

每当我绘制一个形状时，我需要为形状添加其他属性，并且需要从toDataLessJSON()

Answer 1

从版本1.7.0开始，levon的代码停止工作。您需要做的就是修复如下：

// Save additional attributes in Serialization
fabric.Object.prototype.toObject = (function (toObject) {
    return function (properties) {
        return fabric.util.object.extend(toObject.call(this, properties), {
            textID: this.textID
        });
    };
})(fabric.Object.prototype.toObject);

您必须收到properties参数并将其传递给toObject。

Answer 2

这是一个用于添加自定义属性并将其保存在画布上任何对象的JSON序列化中的代码。（我使用标准的javascript对象属性，但它适用于我）

canvas.myImages = {};
fabric.Image.fromURL('SOME-IMAGE-URL.jpg', function(img) {
      canvas.myImages.push(img);
      var i = canvas.myImages.length-1;

      canvas.myImages[i].ID = 1;  // add your custom attributes
      canvas.myImages[i].GeoLocation = [40, 40];

      canvas.add(canvas.myImages[i]);
      canvas.renderAll();
});

然后在对象序列化中包含自定义属性。

// Save additional attributes in Serialization
fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            textID: this.textID
        });
    };
})(fabric.Object.prototype.toObject);

// Test Serialization
var json = JSON.stringify(canvas.toDatalessJSON());
console.log(json);

canvas.clear();

// and load everything from the same json
canvas.loadFromDatalessJSON(json, function() {
    // making sure to render canvas at the end
    canvas.renderAll();
}

FabricJs - 如何为每个对象添加属性

2 个答案: