javascript - 重新加载后的 FabricJS 图像 Z-index

Question

我已经实现了一个 Canvas ，我可以在其中添加不同的对象。一切正常，直到我重新加载网站并且图像被添加到其余对象之上。我想这是因为加载图像需要更长的时间。我正在尝试将每个对象移动到它们使用

插入的索引

this.canvas.add(object);
this.canvas.moveTo(object, parseInt(object.zindex));

请注意，我已将 z-index 作为对象的属性附加，并在将一个对象添加到 Canvas 后立即存储它。 出于某种原因，这并没有改变重绘时的任何内容，并且尽管将对象移至排序索引，但对象仍位于它们所在的位置。 有人遇到过这样的问题吗？

Answer 1

canvas.loadFromJSON(json, function() {
  canvas.renderAll();
}, function(o, object) {
  canvas.moveTo(object, object.index);
});

同时 loading from json , 使用 reviver 并将对象移动到指定索引。

演示

var canvas = new fabric.Canvas('c');
var index = 0,
  json;
var url = '//fabricjs.com/assets/pug.jpg';
fabric.Image.fromURL(url, function(img) {
  img.scaleToWidth(200)
  img.set({
    index: index++
  })
  canvas.add(img);
  canvas.add(new fabric.Circle({
    radius: 50,
    left:30,
    fill:'green',
    index: index++
  }));
})
canvas.add(new fabric.Circle({
  radius: 50,
  index: index++
}));

function saveCanvas() {
  json = canvas.toJSON(['index'])
}

function reloadCanvas() {
  canvas.loadFromJSON(json, function() {
    canvas.renderAll();
  }, function(o, object) {
    canvas.moveTo(object, object.index);
  })
}

canvas{
 border:2px solid #000;
}

<button type="button" name="button" onclick="reloadCanvas()">reload</button>
<button type="button" name="button" onclick="saveCanvas()">save</button><br>
<script type="text/javascript" src="
https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>