html画布zindex答案

【问题标题】：html canvas zindexhtml画布zindex
【发布时间】：2011-06-28 20:49:12
【问题描述】：

如何更改画布内元素的 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

【问题讨论】：

你能举个例子吗？ Do you really have an element in the canvas?
@sdleihssirhc 发布了一些示例代码来说明我的意思。我希望能够在图像上方设置文本。
哇，fabric.js docs 有点没用。
@sdleihssirhc 据我了解，您使用 object.set() 设置它的问题是我不知道要设置什么属性。 :S

标签： javascript html canvas fabricjs

【解决方案1】：

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

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

因为图像被添加到画布在文本之后，我假设 Fabric 的行为就像画布通常一样：稍后添加的东西被绘制在被添加的东西之上已经在那了。 ...即使您为文本指定了 z-index。

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

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

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

如果你不确定，那么......你去吧。

【讨论】：

那么 zindex 只是一个随机猜测。也尝试了 zIndex 无济于事。不知道什么是真正的财产。我也尝试过设置图像。感谢您的帮助 +1，我尝试在 google 上查找 canvas api，但没有成功。 :(
@mark 我的第一个想法怎么样？尝试在图像之前声明helloWorld，然后在添加图像后将其添加到画布中。（即，移动canvas.add(helloWorld)，使其位于图像函数内部中。）
成功了！耶，谢谢！对不起，我第一次说的时候没明白你的意思。 :P 不幸的是还没有弄清楚canvas zindex的api命令，所以目前的问题标题有点误导。但它解决了我目前的问题，非常感谢
@mark 是的，当我重新阅读我的答案时，我意识到我指出这可能是问题所在，但实际上并没有说明如何解决它。哎呀。万事大吉。

【解决方案2】：

从 fabric.js 版本 1.1.4 开始，一种新的 zIndex 操作方法可用：

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

我希望这是你想要的：

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

【讨论】：