Flex Mobile GetPixel function of a resized image gets pixel as if the image had its original size

Question

I have an image of 780x585. I am resizing this image to 1246.93x935.19 with scaleMode=ScaleMode.LETTERBOX.

When the user clicks on a graphic and drags it into the picture, I am supposed to get the pixel position where the graphic was dropped.

I do that by listening to the mouse up event and by calling getPixel with the (x,y) coordinates coming from the event when the mouse click is released.

Strange thing is that I get the value of the pixel but not the real one. Instead, I get the value corresponding to the image with it's normal size without being resized.

Does anyone have a clue why this is happening?

Thanks, Dave

Answer 1

When applying some visual changes to a component (like moving, rotating or stretching as in here), Flex will be applying a transormation matrix to modify only the visual appearance of the object.

Let's say you're moving an image by doing image.width *= 2; the actual image width will be modified. If you do image.matrix.scale(2, 1); (this is pseudo-code), the visual appearance will be modified so you can see the resizing but the the actual width will remain the same.

I think applying a Letterbox resizing is using matrix transformation, so even if your image appears larger, its position and size are still the same. That's why you get the same position as before.

To resolve your problem, you simply have to multiply the coordinates you get (with event.localX or anything else) by the image current scaling and that should be it. If you already know the final size, you simply have to do something like: newLocalX = event.localX * (resizedImage.width / originalImage.width);

Here some info if you want to know how Matrixes work.