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

我无法让dang的东西工作，但这是我猜测发生了什么：

Fabric会询问图片的网址。在返回图像时，Fabric已经给出了一个回调方法，因此在等待时，它会继续执行下一个任务。
Fabric创建Text对象并将其添加到画布。
最后，它注意到图像已加载（您实际提供给我的特定示例404），并将其传递给回调方法。

因为在文本之后将图像添加到画布，我假设Fabric正如画布通常那样：稍后添加的内容是在事物的基础上绘制的。已经在那了。 ...即使你给了文本一个z-index。

记住，我无法让它工作而只是放弃了。所以完全有可能我完全错了。如果是这样的话，我还有另一种理论：

您确定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/

html canvas zindex

2 个答案: