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

Question

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

喜欢:

1. ID
2. 地理位置
3. 等等

每当我绘制一个形状时,我需要为形状添加其他属性并需要从中获取 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();
}