时间戳

首页 > 解决方案 > fabricjs：使用自定义画布属性导出

javascript - fabricjs：使用自定义画布属性导出

问题描述

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.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":[{.....}]
}

标签： javascriptcanvasfabricjs

解决方案

您可以扩展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>

推荐阅读