html 画布 zindex

Question

如何更改画布内元素的 zindex？

示例代码：

fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) {
    image.set('left', 200).set('top', 250);
    canvas.add(image);
});


var helloWorld = new fabric.Text('Hello world!', { 
  left: 0, 
  top: 0,
  fontfamily: 'delicious_500',
  zindex: 10
});

canvas.add(helloWorld);

使用fabric.js 库。

供将来参考：

fabric.Element.html#bringForward

Answer 1

我根本无法让这该死的东西工作，但这是我对发生的事情的猜测：

1. Fabric 向该 URL 询问图像。当图像返回时，Fabric 被赋予了一个回调方法，因此在等待时，它会继续执行下一个任务
2. Fabric 创建 Text 对象并将其添加到画布中。
3. 最后，它注意到图像已加载（您提供的具体示例实际上对我进行了 404 处理），并将其传递给回调方法。

因为图像是在文本之后添加到画布上的，所以我假设 Fabric 的行为就像画布通常所做的那样：稍后添加的内容将绘制在已经存在的内容之上。 ...即使您为文本指定了 z 索引。

请记住，我无法让它发挥作用，就放弃了。所以我完全有可能完全错了。如果是这样，我有另一个理论：

您确定 zindex 是正确的属性吗？如果是，那么也尝试在图像上设置它：

image.set('left', 200).set('top', 250).set('zindex', 5);

如果您不确定，那么...就这样。

Answer 2

从 Fabric.js 版本 1.1.4 开始，可以使用 zIndex 操作的新方法：

canvas.moveTo(object, index);
object.moveTo(index);

我希望这就是您想要的：

http ://jsfiddle.net/Kienz/RRv3g/