Question

从JSON加载画布数据后，具有自定义类型属性的元素不会呈现。

重现的步骤是：

1）点击SAVE按钮

2）某处的Mover RED元素

3）点击RESTORE按钮

没有任何事情发生，但是如果注释掉了type属性，那么一切都很完美。

不确定这是一个错误还是我忘了添加一些东西...... TNX

fabric.ContainerRect = fabric.util.createClass(fabric.Rect, {
  type: 'container-rect',
  initialize: function(options) {

    this.callSuper('initialize', options);

    this.on('moving', function() {
      // console.log('Red is moving...');
    });
  },
  _render: function(ctx) {
    this.callSuper('_render', ctx);
  }
});

fabric.ContainerRect.fromObject = function(options) {
  return new fabric.ContainerRect(options);
}

//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
  width: 600,
  height: 600
};

const redBox = new fabric.ContainerRect({
  left: 0,
  top: 0,
  width: 50,
  height: 50,
  fill: 'red'
});

canvas.add(redBox);
canvas.renderAll();


$("#save").on('click', function() {
  store = canvas.toJSON();
  console.log(store);
});

$("#restore").on('click', function() {
  canvas.loadFromJSON(store, function() {
    //console.log('restored:', canvas.getObjects());
    //canvas.renderAll();
  });
});

#paper {
  border: solid 1px red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>

Answer 1

fabric.ContainerRect.fromObject = function(object, callback) {
  return fabric.Object._fromObject('ContainerRect', object, callback);
};

您需要在fromObject中使用回调。

如果你删除了类型，那么它的对象需要rect类型，而从json加载时需要fabric.Rect.fromObject方法而不是fabric.ContainerRect.fromObject，这就是为什么要工作。

<强> 样本

fabric.ContainerRect = fabric.util.createClass(fabric.Rect, {
  type: 'container-rect',
  initialize: function(options) {

    this.callSuper('initialize', options);

    this.on('moving', function() {
      // console.log('Red is moving...');
    });
  },
  _render: function(ctx) {
    this.callSuper('_render', ctx);
  }
});

fabric.ContainerRect.fromObject = function(object, callback) {
  return fabric.Object._fromObject('ContainerRect', object, callback);
};

//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
  width: 600,
  height: 600
};

const redBox = new fabric.ContainerRect({
  left: 0,
  top: 0,
  width: 50,
  height: 50,
  fill: 'red'
});

canvas.add(redBox);
canvas.renderAll();


$("#save").on('click', function() {
  store = canvas.toJSON();
  console.log(store);
});

$("#restore").on('click', function() {
  canvas.loadFromJSON(store, function() {
    console.log('restored:');
  });
});

#paper {
  border: solid 1px red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>

FabricJS - 自定义类型不在LoadFromJSON上呈现

1 个答案: