My .NET MAUI app is currently targeting Windows OS. It essentially displays a map and some placemarks on the map.
Here is my relevant xaml lines:
<Grid x:Name="_gridContents">
<Image x:Name="_imageMap" HorizontalOptions="Start" VerticalOptions="Start" Aspect="AspectFit" />
<GraphicsView x:Name="_graphicsViewRoute" />
</Grid>
A graphics view is displayed on top of the image (a map) within the grid cell. My custom drawable routine draws a small circle at a specific pixel location. The circle represents a mark on the underlying image.
canvas.FillColor = Colors.Blue;
canvas.FillCircle(50, 50, 5); // Draw a circle of radius 5 at (50, 50)
I am implementing zooming for the image. In doing so, the circle must be drawn once again at exactly the same relative pixel location of the underlying image.
I can simply scale the parent grid:
_gridContents.Scale *= 1.1; // zoom in 10%
Things work as expected. The image gets zoomed. The circle gets drawn at the right relative position of the map. However, the circle (and all other drawn texts) also get enlarged. This is not desired.
The correct way seems to be to scale the image itself and redraw the circle at the right relative location.
_imageMap.Scale *= 1.1;
...
canvas.FillCircle(50/_imageMap.Scale, 50/_imageMap.Scale, 5);
It seems, in theory this should work. However, when the image gets scaled, it also automatically moves itself within its container. This throws off my calculation.
Wondering how do I calculate the right new location. Perhaps I need some "image offset" value in my calculation. However, I don't see any such property on the image object. Thanks.
