canvas :使用自定义画布属性导出

Question

使用canvas.toJSON();，我无法导出定制的画布属性。

我得用帆布的原型。但我不知道如何建造一个原型结构。

现有(允许)数据：

var clipFath = this.clipPath, data = {
         version: fabric.version,
         objects: this._toObjects (methodName, propertiesToInclude),
};

我需要这样做：

var clipFath = this.clipPath, data = {
         version: fabric.version,
         objects: this._toObjects (methodName, propertiesToInclude),
         custom_settings_json: this.custom_settings /* <-- */
};

原始源第7698行：

在下面的示例中，我可以向fabric对象添加自定义设置。我需要一个类似的画布结构。来源

fabric.Object.prototype.toObject = (function (toObject) {
  return function (propertiesToInclude) {
      propertiesToInclude = (propertiesToInclude || []).concat(
        ['custom_attr_1','custom_attr_2'] /* <- */
      );
      return toObject.apply(this, [propertiesToInclude]);
  };
})(fabric.Object.prototype.toObject);

我尝试将它设置为画布，如下所示

var canvas = new fabric.Canvas('canvas');
var custom = {
    "data1": 1,
    "data2": 2
}
canvas.custom_settings_json = custom;
var json_data = canvas.toJSON();
console.log(json_data);

// console log:
{
  "version":"2.4.1",
  "objects":[{.....}],
  "custom_settings_json": {
        "data1": 1,
        "data2": 2
  }
}

但是，在没有custom_settings_json的情况下，在toJSON输出中得到了这个结果。

// console log:
{
  "version":"2.4.1",
  "objects":[{.....}]
}

Answer 1

您需要从_toObjectMethod扩展fabric.StaticCanvas方法。

我做了一个例子小提琴。打开控制台，您将看到来自toJSON方法的json具有自定义参数data1、data2、data3。

​

//rewrite core
fabric.StaticCanvas.prototype._toObjectMethod = (function(toObjectMethod) {
  return function(propertiesToInclude) {
    return fabric.util.object.extend(toObjectMethod.call(this, "toDatalessObject", propertiesToInclude), {
      data1: this.data1,
      data2: this.data2,
      data3: this.data3,
    });
  };
})(fabric.StaticCanvas.prototype._toObjectMethod);
//end

var myCanvas = new fabric.Canvas('my-canvas');
myCanvas.data1 = 1;
myCanvas.data2 = 2;
myCanvas.data3 = 4;
console.log(myCanvas.toJSON(['test']));

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js'></script>

<canvas id="my-canvas" width="550" height="550"> </canvas>

​

Answer 2

您可以扩展画布的toJSON。当然，您需要在将画布数据作为json获取之后添加属性，只需在之后使用您的自定义属性进行扩展。

演示

​

fabric.Canvas.prototype.toJSON = (function(toJSON) {
  return function(propertiesToInclude) {
    return fabric.util.object.extend(toJSON.call(this,propertiesToInclude), {
      custom_settings_json: this.custom_settings_json
    });
  }
})(fabric.Canvas.prototype.toJSON);

var canvas = new fabric.Canvas('c', {
  "custom_settings_json": {
    "data1": 1,
    "data2": 2
  }
});

canvas.add(new fabric.Circle({
  left: 10,
  top: 10,
  radius: 50
}))

console.log(canvas.toJSON())

canvas{
  border:2px solid;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c"></canvas>

​