Object relative to the image while zooming in or out

Question

I have a map that is being drawn on the screen inside a VisualizationView. I am able to zoom in and out on this map, depending on where I focused inside this view using the touch functionality.

I also toggle between zooming in and drawing on this map. When I draw an arrow on the map and switch back to zooming in. I want the arrow I drawed on the map to stay at the same spot relative to the map I am zooming in and out on. Meaning the x and y pos of this arrow have to be adjusted.

I have all the variables needed I just dont know how to solve this since its math related.

Can someone explain to me how I can solve this math wise. I tried looking on the internet but I could not find a good explanation. Also the map resolution on the Tablet is always 576 x 576.

public void onZoom(final double focusX, final double focusY,
                final double factor) {

     //pseudocode
     Triangle.x = ..
     Triangle.y = ..
     Triangle.repaint();
     //peusocode
}

The code for the zooming is as following straight from the Library.

public void zoom(double focusX, double focusY, double factor) {
synchronized (mutex) {
  Transform focus = Transform.translation(toMetricCoordinates((int) focusX, (int) focusY));
  double zoom = RosMath.clamp(getZoom() * factor, MINIMUM_ZOOM, MAXIMUM_ZOOM) / getZoom();
  transform = transform.multiply(focus).scale(zoom).multiply(focus.invert());
}

}

I hope someone can explain the math behind solving this.

Answer 1

I'm not directly familiar with the library you're using, but to move the location of the arrow (triangle) to its new location you should apply the same transform to it as you do to the map.

Think of it this way: Before zooming, the location of the arrow (the center or head of the arrow, however you define "location") and the point on the map it's pointing to have the same coordinates. After zooming, the point on the map will have moved to a new location and you want the arrow to move to that same new location, thus you need to use the same transform. Like I said, I'm not familiar with the library you're using so I can't tell you exactly how to do that, but that's where you want to be.

Note, however, that you only want to transform one point of the arrow/triangle and draw the other points relative to it. If you transform all 3 you'll end up with the arrow getting larger and smaller as you zoom in and out (which I assume you don't want).