Contents
How to zoom at the mouse coordinates in Java?
The main entrypoint for the code is main.js. It instantiates the four rectangles, and colors, sizes, and positions each one. It also wires up a listener for the wheel event. When the user rolls the mouse wheel, the code calls the World#zoom method, supplying the mouse coordinates as a 2D vector.
How to zoom about a point using affine transformations?
Given a point P (for example, the coordinates of the mouse), zooming about that point using affine transformations is a four-step process. Apply any existing world-/scene-wide transformation (s).
How to zoom in on a point in JavaScript?
If instead you would like to zoom the image about the center, then a solution is as follows: (1) translate the image such that its center is at (0, 0); (2) scale the image by x and y factors; (3) translate the image back. i.e. More abstractly, the same strategy works for any point.
What happens if you zoom in a second time?
If the user were to zoom in a second time at the same point, then the existing world transformation matrix T would need to be preserved. Take a look at the following plunk which shows the algorithm in action. The code is also available on GitHub in case you want to run it on your own machine.
How does a scale change the screen coordinates?
A scale is applied such that the world is 125×125 in screen coordinates. Since a scale operation is about the origin, the point P remains at the origin. Lastly the world is translated back by {40,40}, thereby restoring point P to its origin location.
How many matrix multiplications do you need to zoom a sniper rifle?
Keep in mind that the zoom involves four matrix multiplications, but the product only has to be computed once per zoom. In a more complex scenario like a first-person shooter, a player may be able to zoom about the crosshairs of their sniper rifle.