添加图层移动到底部以动态js阶段？

Question

我正在使用Kinetic JS进行图像编辑和图像生成工具。我对该工具有1个问题。

以下是我的工具的链接：http://demo.vthinksolution.com/photodecorator/page2.php?uid=18&cid=4&image=http://demo.vthinksolution.com/photodecorator/img/default.jpg

为了更好地理解它，请浏览工具。

右侧：相框时，单击它们时，图像将以您选择的图像为框架。

顶部：可以拖动的照片对象＆amp;放在照片上。

现在我遇到的问题是：

首先我们在照片上放置2或3个对象，我们可以控制所有对象，但是如果我们选择一个框架，那么我们就无法控制对象。

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

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

Answer 1

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

layer.moveToBottom（）

Answer 2

有两种解决方案：

1）

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

例如：

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

2）

您可以先将照片/图像添加到舞台，然后再添加相框对象/图层，然后将visible设置为false以获取相框对象/图层。之后，您可以添加所有其他对象，它们将显示在照片和框架的顶部（因为您在添加它们后将它们添加到舞台上）。当您从右侧选择相框时，您只需将visible标记为true，它就会显示在您的对象下方，因为您已将所有其他框架添加到舞台上对象。框架被设置为隐藏，直到选择框架。如果您选择白框（删除框架），那么您只需将visible设置回false。

例如：

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);