Javascript 将层移动到底部添加到kinetic js中的舞台？

我正在使用Kinetic JS作为图像编辑和图像生成工具。我的工具有一个问题

以下是我的工具的链接：

要更好地理解它，请浏览该工具

右侧：相框，当您单击它们时，图像将与您选择的相框相框

顶部：可以在照片上拖放的照片对象

现在我的问题是：

首先，我们在照片上放置2或3个对象，我们可以控制所有对象，但如果我们选择一个帧，则无法控制对象

我认为这是因为框架设置在顶部，但我想将框架设置在底部或图像上方

注意：由于代码太长，我没有在这里发布。

有两种解决方案：

一,

使用Z索引定位对象的分层。在这种情况下，您可以将主照片/图像置于最低的z索引处，然后将相框层或对象置于照片/图像z索引上方的z索引处，但低于其余对象

例如：

originalPhoto.setZIndex(-2);
photoFrameLayer.setZIndex(-1);
//The rest of the objects should default to z-index: 0 and above.

photoFrameLayer = new Kinetic.Image({
  visible: false
})

//OR

photoFrameLayer.setVisible(false);

//And then:

stage.add(originalPhoto);
stage.add(photoFrameLayer);
//stage.add(theOtherObjects);

//When you select a frame:
photoFrameLayer.setVisible(true);

二,

您可以先将照片/图像添加到后台，然后再添加相框对象/层，但将相框对象/层的“可见”设置为“假”。之后，您可以添加所有其他对象，它们将显示在照片和帧的顶部，因为您在添加它们之后将它们添加到舞台。当您从右侧选择一个相框时，您所要做的就是将标志visible设置为true，它将显示在您的对象下方，因为您将相框添加到舞台上的时间早于所有其他对象。该帧被设置为隐藏，直到选择了一个帧。如果选择“白色边框”“删除边框”，则只需将“可见”设置回false即可

例如：

originalPhoto.setZIndex(-2);
photoFrameLayer.setZIndex(-1);
//The rest of the objects should default to z-index: 0 and above.

photoFrameLayer = new Kinetic.Image({
  visible: false
})

//OR

photoFrameLayer.setVisible(false);

//And then:

stage.add(originalPhoto);
stage.add(photoFrameLayer);
//stage.add(theOtherObjects);

//When you select a frame:
photoFrameLayer.setVisible(true);

---

也可以将形状、组或层移动到其容器的底部，如下所示：

---

layer.moveToBottom

我不知道为什么-1，谁做过请说明原因我在发布问题之前尝试了你的第一个解决方案，它不起作用，因为z索引照片对象位于框架顶部，但我无法移动或缩放照片。现在我尝试你的第二个解决方案。感谢您的帮助我尝试第二种解决方案，我考虑了hat，但问题是这对一帧多帧有用，我如何才能做到这一点。请给我解释一下……你有没有试着在装饰物品之前添加所有的相框？只需添加所有帧，然后在所有帧上设置VisibleFalse。然后，当您单击一个帧时，只有setVisibletrue；对于特定的frame.thanx到@projeqht-您的解释对解决我的问题有很大帮助，设置Visibile为true，但无法完美工作。所以我使用隐藏层：c.canvas.getElement.style.display='none'；对于显示层：c.canvas.getElement.style.display='block'；