Se le da un acercamiento a una imagen en particular utilizando el método de escala y traducción. En este proceso de acercamiento, una imagen debe acercarse desde el centro de la imagen. Esa imagen tiene algo de ancho y alto en caso de forma rectangular y tiene las dimensiones adecuadas de acuerdo con la forma de la imagen. En el proceso de acercamiento , una imagen aumenta de tamaño según los requisitos. En un visor de imágenes, este proceso de acercamiento es muy importante. Para obtener este proceso, puede usar el método scale() y translate() .
El método scale() escala el dibujo actual a un tamaño más pequeño o más grande. Si escala un lienzo, todos los dibujos futuros también se escalarán. La posición también se escalará. Si escala (2, 2), el dibujo se colocará el doble de la izquierda y la parte superior del lienzo que especifique. El método translate() reasigna la posición (0, 0) como el lienzo. Si tiene una imagen y la escala por un factor de 2, el punto inferior derecho se duplicará en ambas direcciones x e y, ya que (0, 0) es la parte superior izquierda de la imagen. Si desea hacer zoom en la imagen del centro, la solución es la siguiente:
- Traduce la imagen.
- Escale la imagen por factores x e y.
- Traduce la imagen de nuevo.
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Zooming process using scale and trsnslate
</title>
<style>
#canvas {
border: 2px solid black;
}
h1{
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Scroll your mouse inside the canvas</p>
<canvas id="canvas" width="600" height="200"></canvas>
</center>
<script>
var zoomIntensity = 0.1;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = 600;
var height = 200;
var scale = 1;
var orgnx = 0;
var orgny = 0;
var visibleWidth = width;
var visibleHeight = height;
function draw() {
context.fillStyle = "white";
context.fillRect(orgnx, orgny, 800 / scale, 800 / scale);
context.fillStyle = "green";
context.fillRect(250,50,100,100);
}
setInterval(draw, 800 / 60);
// Scroll effect function
canvas.onwheel = function(event) {
event.preventDefault();
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
var scroll = event.deltaY < 0 ? 1 : -2;
var zoom = Math.exp(scroll * zoomIntensity);
context.translate(orgnx, orgny);
orgnx -= x / (scale * zoom) - x / scale;
orgny -= y / (scale * zoom) - y / scale;
context.scale(zoom, zoom);
context.translate(-orgnx, -orgny);
// Updating scale and visisble width and height
scale *= zoom;
visibleWidth = width / scale;
visibleHeight = height / scale;
}
</script>
</body>
</html>
Producción :