How to zoom in on a point using scale and translate ?
You are given a zoom in to particular image by using scale and translate method. In this zooming process, an image should be zoom in from the center of the image. That image has some width and height in case of rectangular shape and has proper dimensions according to the shape of the image. In zoom in process an image get bigger in size as per requirement. In an image viewer this zoom in process is very important. To get this process you can use scale() and translate() method.
The scale() method scales the current drawing into a smaller or larger size. If you scale a canvas, all future drawings will also be scaled. The position will also be scaled. If you scale(2, 2) drawing will be positioned twice as far from the left and top of the canvas as you specify. The translate() method remaps the (0, 0) position as the canvas. If you have an image and scale it by a factor of 2, the bottom-right point will double in both x and y direction as (0, 0) is the top-left of the image. If you like to zoom the image of the center then a solution is as follows:
- Translate the image.
- Scale the image by x and y factors.
- Translate the image back.
Below example illustrate the above approach:
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.