Установить z-индекс фигур в Kinetic.Group

Question

Как мне установить z-index для фигур, которые я добавляю в Kinetic.Group? Моя группа содержит прямоугольники и изображения. Я хочу сделать это:

rectangle.setZIndex(1); 
image.setZIndex(2);

Это дает мне следующую ошибку: Uncaught TypeError: Невозможно прочитать свойство 'children' из undefined.

Я использую перетаскивание, а затем группирую объекты вместе. Я хочу, чтобы изображения были на вершине прямоугольника. moveToTop() Метод выдает ошибки, когда я вызываю его внутри моего кода.

РЕДАКТИРОВАТЬ: http://jsfiddle.net/Dcevd/. Попробуйте этот вариант использования: перетащите и отпустите две линии, затем перетащите изображение и поместите его на первый прямоугольник, затем переместите его на второй (когда вы делаете это наоборот, это работает). он движется к вершине только на драгенде.

Answer 1

Ответ на ваше редактирование

Ты звонишь moveToTop() на ребенка из группы, поэтому он будет только помещать изображение в оп этой конкретной группы. Как только вы поместите второй прямоугольник в правую сцену, он получит более высокий z-индекс, чем первый, который вы поместили, и, следовательно, будет "поверх" первого прямоугольника (включая его изображения). Чтобы решить эту проблему, я установил, что родительский элемент изображения (группа) переместился в начало на dragstart, это исправляет это для меня:

cloneImg.on('dragstart', function(){
    this.startX=this.x();
    this.startY=this.y();
    this.getParent().moveToTop();
});

Смотрите также скрипку: http://jsfiddle.net/Dcevd/3/

PS. Если вы посмотрите документы KineticJS, то увидите, что setZIndex доступен на изображениях Kinetic (как и во всех других формах). http://kineticjs.com/docs/Kinetic.Image.html