How to properly create a Point relative to an Image using FigPanZoom?

0
votes

I have an Image that's 5000 pixels by 5000 pixels. It's scaled up and down regularly to fit different parts of the image into the window.

I'm making a function that focuses in on different places on the image (like a map) and then zooms into a certain scale that I specify.

I pass my point into this function (new Point(2000,2500) for example)) however this always breaks because it's not relative to the image specifically.

How do I make the Point relative to the image at the image's given scale at any given time?

Additional Info: I'm using the guide here http://www.adobe.com/devnet/flex/samples/fig_panzoom.html for panning and zooming functionality.

Solved:

One of my pitfalls was that I was using a possible bitmapScaleFactor > 1 which would mess up the scaling. This was the final function that worked for my usage.

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();
        }
2
actionscript-3apache-flexflex4
I'm not sure I understand how this function is using the point you send it. Perhaps you should share the code behind your function. – JeffryHouser
All that happens is it takes the point and simulates a mouse click at that point on the image. In my question, the point's coords (2000,5000) represent the pixel x and y in the image, not the stage. – buddyp450
Without knowing precisely your DisplayObject hierarchy, it's difficult to say what the best approach would be but you can take a look at the article: help.adobe.com/en_US/as3/dev/… that talks about translating coordinate spaces. It might point you in the right direction. – martineno
@martineno I'm using the hierarchy outlined in this flex guide: adobe.com/devnet/flex/samples/fig_panzoom.html. – buddyp450
How about the PanToPointCommand class? It seems like it will do the right thing, in the toolkit that you linked to. – martineno

2 Answers

1
votes

I've not tested this but how about using the scale factor that is being applied to the image to alter the point coordinates.

e.g.

var scaler:Number = 0.5;

image.scaleX = image.scaleY = scaler;

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

Are you looking for DisplayObject.mouseX/mouseY? These do not take any rotation into account, however.

To take rotation into account, you could do something like (untested code):

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));