-1

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

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

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

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

顶部：您可以拖放到照片上的照片对象。

现在我遇到的问题是：

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

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

注：由于代码比较长，这里就不贴了。

4

2 回答 2

2

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

layer.moveToBottom()

于 2013-07-09T06:12:01.813 回答
0

有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);
于 2013-07-04T13:32:42.010 回答