Question

如何在我添加到Kinetic.Group的形状上设置z-index？我的组包含矩形和图像。我想这样做：

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

这给了我以下错误：Uncaught TypeError：无法读取属性＆＃39; children＆＃39;未定义的。

我使用拖放然后将对象分组在一起。我希望图像位于矩形的顶部。我在代码中调用它时，moveToTop()方法会出错。

编辑： http://jsfiddle.net/Dcevd/。尝试这个用例：拖放两个rects，然后拖动图像并将其放在第一个矩形上，然后将其移动到第二个矩形（当你反向操作它时）。它只在dragend上移动到顶部。

Answer 1

回答您的修改

您正在为该组的孩子调用moveToTop()，因此它只会将该图像放在该特定组的操作上。将第二个矩形放置在右侧舞台上后，它会获得一个更高的z-index，然后是您放置的第一个矩形，并因此将“放在”第一个矩形（包括它的图像）之上。为了解决这个问题，我已经将图像的父级（组）设置为在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

在Kinetic.Group中设置形状的z-index

1 个答案: