如何才能将孩子只在父母内部移动？

Question

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

Answer 1

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

• 边界矩形
• 滚动矩形（或面罩）

假设你的“移动代码”有点像初始化的Event.ENTER_FRAME处理器onClick，你想使它成为图像不能离开父Canvas的边界。

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

要创建一个边界矩形，您必须编写一个相当详细的方法，但其背后的想法很简单。只需从画布中获取边界矩形，并且不要让image.x低于0并且不要让image.x + image.width超出canvas.width。与高度相同。这里有一个样本Image Cropper in Flex（和the source）。看看他们是如何做到的细节。

第二种情况（滚动矩形）可以让您像this Flex Pan/Zoom Map（此处为the source）所示的那样创建更多的像平底锅一样的容器。此外，右侧的Flex Image Cropper中的大图像是第二种情况的示例，但它们没有拖动。这就要求你在画布上操作scrollRect属性的位置。 scrollRect属性是定义Canvas'“视口”的flash.geom.Rectangle。然后您更改/更新verticalScrollPosition和horizontalScrollPosition属性，因此它是向后的（与边界矩形相比）。

我认为如果您在画布上将clipAndEnableScrolling设置为true，并且在其内部拖动一个子图像（和image.includeInLayout = true），它应该剪切图像以仅显示在画布内。但我猜你想要案例1.只要搜索这些属性，你会发现一些很好的例子在谷歌。

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

兰斯