2

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

4

2 回答 2

1

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

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

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

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

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

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

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

于 2011-02-17T06:17:00.810 回答
1

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

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

我希望这是你想要的：

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

于 2013-11-26T03:23:31.070 回答