fabricjs: экспорт с пользовательскими атрибутами canvas - PullRequest
Новая
       6

fabricjs: экспорт с пользовательскими атрибутами canvas

0 голосов
/ 04 октября 2018

С 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 /* <-- */
};

Оригиналsource line 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":[{.....}]
}

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Вы можете продлить toJSON холста.Кроме того, вам нужно добавить свойства после получения данных холста в виде json, просто добавьте свое пользовательское свойство после.

DEMO 

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>
0 голосов
/ 04 октября 2018

Вам нужно расширить _toObjectMethod метод с fabric.StaticCanvas.

Я сделал пример jsfiddle .Откройте консоль, и вы увидите метод json from toJSON с пользовательскими параметрами 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>
...