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 # yieldForward

Answer 1

Начиная с версии 1.1.4 fabric.js доступен новый метод для манипулирования zIndex:

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

Я надеюсь, что это то, что вы хотите:

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

Answer 2

Я не могу заставить эту чертову штуку работать, но вот мое предположение относительно того, что происходит:

1. Fabric запрашивает этот URL для изображения. Fabric возвращается метод обратного вызова, когда изображение возвращается, поэтому, пока оно ожидает, оно переходит к следующей задаче
2. Fabric создает объект Text и добавляет его на холст.
3. Наконец, он замечает, что изображение загружено (конкретный пример, который вы на самом деле предоставили мне 404), и передает его в метод обратного вызова.

Поскольку изображение добавляется на холст после текста, я предполагаю, что Fabric работает так же, как обычно, как холст: вещи, которые добавляются позже, рисуются поверх уже существующих там. ... Даже если вы дали тексту z-индекс.

Помните, я не мог заставить его работать и просто сдался. Так что вполне возможно, что я совершенно, совершенно неправ. Если это так, у меня есть другая теория:

Вы уверены, что zindex является правильным свойством? Если да, то попробуйте установить его также на изображение:

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

И если вы не уверены, тогда ... вот, пожалуйста.