如何使用 FigPanZoom 正确创建相对于图像的点？答案

【问题标题】：How to properly create a Point relative to an Image using FigPanZoom?如何使用 FigPanZoom 正确创建相对于图像的点？
【发布时间】：2012-06-02 17:33:30
【问题描述】：

我有一个 5000 x 5000 像素的图像。它会定期放大和缩小，以使图像的不同部分适合窗口。

我正在制作一个功能，专注于图像上的不同位置（如地图），然后放大到我指定的特定比例。

我将我的观点传递给这个函数（例如 new Point(2000,2500)），但这总是会中断，因为它与图像无关。

如何在任何给定时间以图像的给定比例使点相对于图像？

附加信息：我在此处使用指南 http://www.adobe.com/devnet/flex/samples/fig_panzoom.html 进行平移和缩放功能。

已解决：

我的一个陷阱是我使用了可能的 bitmapScaleFactor > 1，这会打乱缩放比例。这是最后一个适合我使用的函数。

protected function testFocus(p:Point):void
        {
            var content:ContentRectangle = boardViewer._contentRectangle;
            var panToPoint:PanToPointCommand = new PanToPointCommand(boardViewer, content);
            var scale:Number = boardViewer.bitmapScaleFactor;

            var location = new Point((p.x*scale)+content.x, (p.y*scale)+content.y);             
            var center = new Point(boardViewer.width/2, boardViewer.height/2);

            //Move the point to the center
            panToPoint.fromPoint = location;
            panToPoint.toPoint = center;
            panToPoint.execute();
        }

【问题讨论】：

我不确定我是否理解此功能如何使用您发送它的点。也许你应该分享你的函数背后的代码。
所发生的只是它获取该点并在图像上的该点模拟鼠标单击。在我的问题中，点的坐标 (2000,5000) 代表图像中的像素 x 和 y，而不是舞台。
在不准确了解 DisplayObject 层次结构的情况下，很难说最好的方法是什么，但您可以查看文章：help.adobe.com/en_US/as3/dev/…，它讨论了坐标空间的转换。它可能会为您指明正确的方向。
@martineno 我正在使用本弹性指南中概述的层次结构：adobe.com/devnet/flex/samples/fig_panzoom.html。
PanToPointCommand 类怎么样？在您链接到的工具包中，它似乎会做正确的事情。

标签： actionscript-3 apache-flex flex4

【解决方案1】：

我没有对此进行测试，但是如何使用应用于图像的比例因子来改变点坐标。

例如

var scaler:Number = 0.5;

image.scaleX = image.scaleY = scaler;

new Point(2000*scaler,2500*scaler);

【讨论】：

这种方法的问题在于它不仅仅与比例有关。我需要图像中的实际点，因为图像也会平移，因此图像的点 (100,200) 可能位于特定实例的 (50,200) 或 (200, 50) 位置。因此，虽然这可能会给我相对于比例的正确点，但它仅适用于图像停靠在 (0,0) 时。
我结合了这一点和 martineno 关于利用我已经拥有的东西的评论，我将添加到 OP 中。谢谢。

【解决方案2】：

您在寻找@987654321@/mouseY 吗？但是，这些不考虑任何轮换。

要考虑轮换，您可以执行以下操作（未经测试的代码）：

var mat:Matrix = image.transform.concatenatedMatrix;
mat.invert();

// now use mat to transform point from 'stage space' to 'image space'
var pImage:Point = mat.transform(new Point(stage.mouseX, stage.mouseY));

【讨论】：