如何才能让孩子只在父母体内移动？
最近我在做一个使用 Flex 的项目。它是一个照片编辑项目。我使用了 Canvas 并使用代码 canvas.addChild(image) 在该画布中拍摄了图像。现在我可以使用移动代码自由移动图像。图像在画布内部和画布外部移动。我只想将图像/子项移动到画布内部而不是外部。我该怎么做？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有两种方法可以做到这一点：
假设您的“移动代码”类似于在单击时初始化的 Event.ENTER_FRAME 处理程序，您希望使图像不能离开父级的边界帆布。
第一种情况（边界矩形）将允许您在矩形内拖动图像，但您始终能够看到整个图像。这就是图像裁剪器的工作原理。
要创建边界矩形，您必须编写一个相当详细的方法，但其背后的想法很简单。只需从画布中获取边界矩形，不要让
image.x低于 0，也不要让image.x + image.width超出 <代码>canvas.width。与身高相同。以下是 Flex 中的图像裁剪器 示例（以及 来源）。详细了解一下他们是如何做到的。第二种情况（滚动矩形）将允许您创建更多类似平移/缩放的容器，就像您在 此 Flex 平移/缩放地图（此处为 来源）。另外，右侧 Flex Image Cropper 中的大图像就是一个示例第二种情况，但他们没有拖拽。这需要您操作画布上的scrollRect 属性的位置。
scrollRect属性是定义 Canvas 的“视口”的flash.geom.Rectangle。然后，您可以更改/更新verticalScrollPosition和horizontalScrollPosition属性，使其向后（与边界矩形相比）。我认为如果您在画布上将
clipAndEnableScrolling设置为 true，并且在其内部拖动子图像（以及image.includeInLayout = true），它应该会剪辑图像仅显示在画布内。但我猜你想要案例 1。只需搜索这些属性，你就会在 google 上找到一些很好的例子。祝你好运，应该是一个有趣的项目。
槊
There are two ways to do this:
Assuming your "moving code" is something like an Event.ENTER_FRAME handler initialized onClick, you want to make it so the image can't leave the bounds of the parent Canvas.
The first case (bounding rectangle) will allow you to drag the image within the retangle but you will always be able to see the whole image. This is how Image croppers work.
To create a bounding rectangle, you'll have to write a fairly detailed method, but the idea behind it is simple. Just get the bounding rectangle from the canvas, and don't let the
image.xgo below 0 and don't letimage.x + image.widthgo beyondcanvas.width. Same with height. Here's a sample Image Cropper in Flex (and the source). Check out how they did it for details.The second case (scroll rectangle) would allow you to create more of a pan/zoom like container like you see on this Flex Pan/Zoom Map (here's the source). Also, the large image in the Flex Image Cropper on the right is an example of this second case, but they don't have the dragging. That requires that you manipulate the position of the scrollRect property on the canvas. The
scrollRectproperty is aflash.geom.Rectangledefining the Canvas' "viewport". You then change/update theverticalScrollPositionandhorizontalScrollPositionproperties, so it's backwards (compared to the Bounding Rectangle).I think if you set
clipAndEnableScrollingto true on the canvas, and you drag a child image around inside of it (andimage.includeInLayout = true), it should clip the image to only show up inside the canvas. But I'm guessing you want case 1. Just search those properties and you'll find some good examples on google.Good luck, should be a fun project.
Lance