Zoom in on a point (using scale and translate)
Posted
by csiz
on Stack Overflow
See other posts from Stack Overflow
or by csiz
Published on 2010-05-26T19:24:45Z
Indexed on
2010/05/27
8:11 UTC
Read the original article
Hit count: 126
I want to be able to zoom in on the point under the mouse in canvas with the mouse whell, like when zooming on maps.google.
I'd like straight code as I've been working on this for 5h+
Something to start with:
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var scale = 1;
var originx = 0;
var originy = 0;
function draw(){
context.fillStyle = "white";
context.fillRect(originx,originy,800/scale,600/scale);
context.fillStyle = "black";
context.fillRect(50,50,100,100);
}
setInterval(draw,100);
canvas.onmousewheel = function (event){
var mousex = event.clientX - canvas.offsetLeft;
var mousey = event.clientY - canvas.offsetTop;
var wheel = event.wheelDelta/120;//n or -n
var zoom = 1 + wheel/2;
scale *= zoom;
originx += 0;//???
originy += 0;//???
context.scale(zoom,zoom);
context.translate(0,0);//???
}
</script>
© Stack Overflow or respective owner