apache-flex - 如何仅在父级内部移动子级？

Question

最近我在一个使用 Flex 的项目中工作。它是一个照片编辑项目。我已经拿了一个画布并使用代码在该画布中拍摄了一张图像canvas.addChild(image)。现在我可以使用移动代码自由移动图像。图像在画布内和画布外移动。我只想在画布内部而不是外部移动图像/子项。我怎样才能做到这一点？

Answer 1

有两种方法可以做到这一点：

• 边界矩形
• 滚动矩形（或蒙版）

假设您的“移动代码”类似于初始化 onClick 的 Event.ENTER_FRAME 处理程序，您希望制作它，以便图像不能离开父 Canvas 的边界。

第一种情况（边界矩形）将允许您在 retangle 内拖动图像，但您将始终能够看到整个图像。这就是图像裁剪器的工作方式。

要创建边界矩形，您必须编写一个相当详细的方法，但其背后的想法很简单。只需从画布中获取边界矩形，不要让image.x低于 0 也不要让image.x + image.width超出canvas.width. 与身高相同。这是Flex 中的示例图像裁剪器（和源代码）。详细了解他们是如何做到的。

第二种情况（滚动矩形）将允许您创建更多类似平移/缩放的容器，就像您在此 Flex Pan/Zoom Map上看到的那样（这里是源代码）。此外，右侧Flex Image Cropper中的大图像是第二种情况的示例，但它们没有拖动功能。这需要您操作画布上的 scrollRect 属性的位置。该scrollRect属性是flash.geom.Rectangle定义画布的“视口”。然后您更改/更新verticalScrollPositionandhorizontalScrollPosition属性，因此它是向后的（与边界矩形相比）。

我认为，如果您clipAndEnableScrolling在画布上设置为 true，并且在其中拖动子图像（并且image.includeInLayout = true），它应该将图像剪辑为仅显示在画布内。但我猜你想要案例 1。只需搜索这些属性，你就会在 google 上找到一些很好的例子。

祝你好运，应该是一个有趣的项目。

槊