B4J Question Convert ImageView click event coordinates to actual image pixel coordinates

[lonnieh]

I'm really struggling with getting a pixel coordinate from an ImageView click event (with preserve ratio enabled). Without preserving the ratio and scaling to fit it is trivial. But I would prefer to scale the image to fit while preserving the ratio.

Lets say the ImageView is 500x500, and the source image is 400x400. The ImageView will scale it to 500x500 to fill the image and you can easily surmise the pixel coordinate from the event coordinate.

If the ratio of the image doesn't match the ImageViews' then that is where I am struggling. I have tried figuring the aspect ratio of both the image and ImageView then calculating the scale for each axis, but I fail to do it correctly every time. Maybe I am overthinking something. Is there an elegant way to do this?

I am trying to overlay a base image with a canvas that I am able to draw onto but the base images vary in size. Some can be small and others are very large. So instead of changing the window size to match I would like to handle it by scaling the image down. I don't think this problem is unique to B4J, I don't think I know how to do it anywhere.

Hope this makes sense, thank you for reading

 

[Sagenut]

If you load an image 1.000 X 1.000 (resized to 500 X 500) you want to get 500x and 500y if clicking on the center of the image view?

 

[lonnieh]

Pretty much, but the issue starts when you load an image like 1100x1000 into a 500x500 ImageView which scales it down. Because then the height won't be entirely filled, in this example the horizontal axis will scale to 500 and the vertical axis will scale to something like 454.

 

[Sagenut]

You would need to resize the Image view to 500x454 and load the image with LoadbitmapResize accordingly.
For the coordinates you can try with
RealImageWidth * XClickCoord / imageviewwidth
and
RealImageHeight * YClickCoord / imageviewHeight

 

[jkhazraji]

Scale (adjust) the image pixel coordinates in click event rather than scaling the image itself.

 

[lonnieh]

That is what I just did, here is what I ended up with. Thank you guys for the help. Doing it this way seems to work great (so far)

' Define aspect ratios for the canvas
Dim CanvasAspectW As Double = DrawCanvas.Width / DrawCanvas.Height
Dim CanvasAspectH As Double = DrawCanvas.Height / DrawCanvas.Width

' Get the dimensions of the image
Dim ImageWidth As Double = IV.GetImage.Width
Dim ImageHeight As Double = IV.GetImage.Height
Dim ImageRatio As Double = ImageWidth / ImageHeight

' Initialize units to the image dimensions
Dim UnitsX As Double = ImageWidth
Dim UnitsY As Double = ImageHeight

' Adjust units based on the aspect ratio comparison
If ImageRatio < CanvasAspectW Then
    ' The image is taller relative to the canvas
    UnitsX = ImageHeight * CanvasAspectW ' Scale width to match canvas aspect ratio
Else If ImageRatio > CanvasAspectW Then
    ' The image is wider relative to the canvas
    UnitsY = ImageWidth * CanvasAspectH ' Scale height to match canvas aspect ratio
End If

' Map the mouse coordinates to the image coordinates
Dim MapMouseX As Double = (EventData.X / DrawCanvas.Width) * UnitsX
Dim MapMouseY As Double = (EventData.Y / DrawCanvas.Height) * UnitsY

' Log the mapped coordinates
Log("Mapped Image Coordinates: (" & MapMouseX & ", " & MapMouseY & ")")