Question

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

插入到的索引中

from django.contrib.auth.decorators import login_required

@login_required
def home(request):
   # your code

请注意，我已将z-index附加为对象的属性，并在将一个对象添加到画布后立即进行存储。由于某种原因，这不会改变重绘的内容，尽管将对象移动到已排序的索引中，它们仍然保持原样。有人遇到过这样的问题吗？

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>

重新加载后的FabricJS图像Z索引

1 个答案: