Zoom in on a point using scale and translate

Question

I want to be able to zoom in on the point under the mouse in an HTML 5 canvas  like zooming on Google Maps  How can I achieve that

User · Answer

This is actually a very difficult problem (mathematically), and I'm working on the same thing almost. I asked a similar question on Stackoverflow but got no response, but posted in DocType (StackOverflow for HTML/CSS) and got a response. Check it out http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example

I'm in the middle of building a jQuery plugin that does this (Google Maps style zoom using CSS3 Transforms). I've got the zoom to mouse cursor bit working fine, still trying to figure out how to allow the user to drag the canvas around like you can do in Google Maps. When I get it working I'll post code here, but check out above link for the mouse-zoom-to-point part.

I didn't realise there was scale and translate methods on Canvas context, you can achieve the same thing using CSS3 eg. using jQuery:

$('div.canvasContainer > canvas')
    .css('-moz-transform', 'scale(1) translate(0px, 0px)')
    .css('-webkit-transform', 'scale(1) translate(0px, 0px)')
    .css('-o-transform', 'scale(1) translate(0px, 0px)')
    .css('transform', 'scale(1) translate(0px, 0px)');

Make sure you set the CSS3 transform-origin to 0, 0 (-moz-transform-origin: 0 0). Using CSS3 transform allows you to zoom in on anything, just make sure the container DIV is set to overflow: hidden to stop the zoomed edges spilling out of the sides.

Whether you use CSS3 transforms, or canvas' own scale and translate methods is upto you, but check the above link for the calculations.

Update: Meh! I'll just post the code here rather than get you to follow a link:

$(document).ready(function()
{
    var scale = 1;  // scale of the image
    var xLast = 0;  // last x location on the screen
    var yLast = 0;  // last y location on the screen
    var xImage = 0; // last x location on the image
    var yImage = 0; // last y location on the image

    // if mousewheel is moved
    $("#mosaicContainer").mousewheel(function(e, delta)
    {
        // find current location on screen 
        var xScreen = e.pageX - $(this).offset().left;
        var yScreen = e.pageY - $(this).offset().top;

        // find current location on the image at the current scale
        xImage = xImage + ((xScreen - xLast) / scale);
        yImage = yImage + ((yScreen - yLast) / scale);

        // determine the new scale
        if (delta > 0)
        {
            scale *= 2;
        }
        else
        {
            scale /= 2;
        }
        scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

        // determine the location on the screen at the new scale
        var xNew = (xScreen - xImage) / scale;
        var yNew = (yScreen - yImage) / scale;

        // save the current screen location
        xLast = xScreen;
        yLast = yScreen;

        // redraw
        $(this).find('div').css('-moz-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                           .css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
        return false;
    });
});

You will of course need to adapt it to use the canvas scale and translate methods.

Update 2: Just noticed I'm using transform-origin together with translate. I've managed to implement a version that just uses scale and translate on their own, check it out here http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html Wait for the images to download then use your mouse wheel to zoom, also supports panning by dragging the image around. It's using CSS3 Transforms but you should be able to use the same calculations for your Canvas.

User · Answer

I want to put here some information for those  who do separately drawing of picture and moving -zooming it   This may be useful when you want to store zooms and position of viewport   Here is drawer   function redraw ctx       self ctx clearRect 0 0 canvas width  canvas height     self ctx save      self ctx scale self data zoom  self data zoom         self ctx translate self data position left  self data position top     position second       Here We draw useful scene My task - image     self ctx drawImage self img  0 0     position 0 0 - we already prepared    self ctx restore       Restore        Notice scale MUST be first   And here is zoomer       function zoom zf  px  py          zf - is a zoom factor  which in my case was one of  0 1  -0 1         px  py coordinates - is point within canvas         eg  px   evt clientX - canvas offset   left        py   evt clientY - canvas offset   top     var z   self data zoom      var x   self data position left      var y   self data position top       var nz   z   zf     getting new zoom     var K    z z   z zf     putting some magic      var nx   x -    px zf    K         var ny   y -    py zf    K        self data position left   nx     renew positions     self data position top   ny         self data zoom   nz         and zoom     self redraw ctx       redraw context         and  of course  we would need a dragger   this my cont mousemove function evt       if  is drag           var cur pos    x  evt clientX - off left                         y  evt clientY - off top          var diff    x  cur pos x - old pos x                      y  cur pos y - old pos y           self data position left     diff x   self data zoom       we want to move the point of cursor strictly         self data position top     diff y   self data zoom            old pos   cur pos          self redraw ctx

User · Answer

The better solution is to simply move the position of the viewport based on the change in the zoom  The zoom point is simply the point in the old zoom and the new zoom that you want to remain the same  Which is to say the viewport pre-zoomed and the viewport post-zoomed have the same zoompoint relative to the viewport  Given that we re scaling relative to the origin  You can adjust the viewport position accordingly   scalechange   newscale - oldscale  offsetX   - zoomPointX   scalechange   offsetY   - zoomPointY   scalechange     So really you can just pan over down and to the right when you zoom in  by a factor of how much you zoomed in  relative to the point you zoomed at

User · Answer

I ran into this problem using c    which I probably shouldn t have had i just used OpenGL matrices to begin with   anyways  if you re using a control whose origin is the top left corner  and you want pan zoom like google maps  here s the layout  using allegro as my event handler       initialize double originx   0     or whatever its base offset is double originy   0     or whatever its base offset is double zoom   1          main               set up your window with whatever         tool you want  load resources  etc                        while  running              Pan               Left button scrolls             if  mouse    1                   get the translation  in window coordinates              double scroll x   event mouse dx      x2-x1               double scroll y   event mouse dy      y2-y1                   Translate the origin of the element  in window coordinates                    originx    scroll x              originy    scroll y                        Zoom                Mouse wheel zooms            if  event mouse dz  0                      Get the position of the mouse with respect to                  the origin of the map  or image or whatever                  Let us call these the map coordinates             double mouse x   event mouse x - originx              double mouse y   event mouse y - originy               lastzoom   zoom                  your zoom function              zoom    event mouse dz   0 3   zoom                  Get the position of the mouse                in map coordinates after scaling             double newx   mouse x    zoom lastzoom               double newy   mouse y    zoom lastzoom                   reverse the translation caused by scaling             originx    mouse x - newx              originy    mouse y - newy                              draw originx originy zoom          NOTE The following is pseudocode                 the point is that this method applies so long as                 your object scales around its top-left corner                 when you multiply it by zoom without applying a translation          draw your object by first scaling        object width   object width   zoom      object height   object height   zoom           then translating        object X   originx      object Y   originy

User · Answer

Here s an alternate way to do it that uses setTransform   instead of scale   and translate    Everything is stored in the same object  The canvas is assumed to be at 0 0 on the page  otherwise you ll need to subtract its position from the page coords   this zoomIn   function  pageX  pageY        var zoomFactor   1 1      this scale   this scale   zoomFactor      this lastTranslation             x  pageX -  pageX - this lastTranslation x    zoomFactor          y  pageY -  pageY - this lastTranslation y    zoomFactor            this canvasContext setTransform this scale  0  0  this scale                                      this lastTranslation x                                      this lastTranslation y      this zoomOut   function  pageX  pageY        var zoomFactor   1 1      this scale   this scale   zoomFactor      this lastTranslation             x  pageX -  pageX - this lastTranslation x    zoomFactor          y  pageY -  pageY - this lastTranslation y    zoomFactor            this canvasContext setTransform this scale  0  0  this scale                                      this lastTranslation x                                      this lastTranslation y        Accompanying code to handle panning   this startPan   function  pageX  pageY        this startTranslation             x  pageX - this lastTranslation x          y  pageY - this lastTranslation y           this continuePan   function  pageX  pageY        var newTranslation    x  pageX - this startTranslation x                            y  pageY - this startTranslation y       this canvasContext setTransform this scale  0  0  this scale                                      newTranslation x  newTranslation y      this endPan   function  pageX  pageY        this lastTranslation             x  pageX - this startTranslation x          y  pageY - this startTranslation y             To derive the answer yourself  consider that the same page coordinates need to match the same canvas coordinates before and after the zoom  Then you can do some algebra starting from this equation    pageCoords - translation    scale   canvasCoords

User · Answer

One important thing    if you have something like   body     zoom  0 9      You need make the equivilent thing in canvas   canvas     zoom  1 1

User · Answer

Here s my solution for a center-oriented image    x000D   x000D  var MIN SCALE   1  x000D  var MAX SCALE   5  x000D  var scale   MIN SCALE  x000D   x000D  var offsetX   0  x000D  var offsetY   0  x000D   x000D  var  image           myImage    x000D  var  container       container    x000D   x000D  var areaWidth     container width    x000D  var areaHeight    container height    x000D   x000D   container on  wheel   function event    x000D      event preventDefault    x000D      var clientX   event originalEvent pageX -  container offset   left  x000D      var clientY   event originalEvent pageY -  container offset   top  x000D   x000D      var nextScale   Math min MAX SCALE  Math max MIN SCALE  scale - event originalEvent deltaY   100    x000D   x000D      var percentXInCurrentBox   clientX   areaWidth  x000D      var percentYInCurrentBox   clientY   areaHeight  x000D   x000D      var currentBoxWidth    areaWidth   scale  x000D      var currentBoxHeight   areaHeight   scale  x000D   x000D      var nextBoxWidth    areaWidth   nextScale  x000D      var nextBoxHeight   areaHeight   nextScale  x000D   x000D      var deltaX    nextBoxWidth - currentBoxWidth     percentXInCurrentBox - 0 5   x000D      var deltaY    nextBoxHeight - currentBoxHeight     percentYInCurrentBox - 0 5   x000D   x000D      var nextOffsetX   offsetX - deltaX  x000D      var nextOffsetY   offsetY - deltaY  x000D   x000D       image css   x000D          transform    scale     nextScale        x000D          left        -1   nextOffsetX   nextScale  x000D          right       nextOffsetX   nextScale  x000D          top         -1   nextOffsetY   nextScale  x000D          bottom      nextOffsetY   nextScale x000D          x000D   x000D      offsetX   nextOffsetX  x000D      offsetY   nextOffsetY  x000D      scale     nextScale  x000D      x000D  body   x000D      background-color  orange  x000D    x000D   container   x000D      margin  30px  x000D      width  500px  x000D      height  500px  x000D      background-color  white  x000D      position  relative  x000D      overflow  hidden  x000D    x000D  img   x000D      position  absolute  x000D      top  0  x000D      bottom  0  x000D      left  0  x000D      right  0  x000D      max-width  100   x000D      max-height  100   x000D      margin  auto  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  container  gt  x000D       lt img id  myImage  src  http   s18 postimg org eplac6dbd mountain jpg  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

if wheel  gt  0        this scale    1 1       this offsetX -   mouseX - this offsetX     1 1 - 1       this offsetY -   mouseY - this offsetY     1 1 - 1     else       this scale    1 1 1       this offsetX -   mouseX - this offsetX     1 1 1 - 1       this offsetY -   mouseY - this offsetY     1 1 1 - 1

User · Answer

I like Tatarize s answer  but I ll provide an alternative   This is a trivial linear algebra problem  and the method I present works well with pan  zoom  skew  etc   That is  it works well if your image is already transformed   When a matrix is scaled  the scale is at point  0  0    So  if you have an image and scale it by a factor of 2  the bottom-right point will double in both the x and y directions  using the convention that  0  0  is the top-left of the image    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   myMatrix    translate image width   2  image height   2        3    scale xFactor  yFactor                             2    translate -image width   2  -image height   2      1   More abstractly  the same strategy works for any point   If  for example  you want to scale the image at a point P   myMatrix    translate P x  P y     scale xFactor  yFactor     translate -P x  -P y     And lastly  if the image is already transformed in some manner  for example  if it s rotated  skewed  translated  or scaled   then the current transformation needs to be preserved   Specifically  the transform defined above needs to be post-multiplied  or right-multiplied  by the current transform   myMatrix    translate P x  P y     scale xFactor  yFactor     translate -P x  -P y     multiply myMatrix     There you have it   Here s a plunk that shows this in action   Scroll with the mousewheel on the dots and you ll see that they consistently stay put    Tested in Chrome only   http   plnkr co edit 3aqsWHPLlSXJ9JCcJzgH p preview

User · Answer

You need to get the point in world space  opposed to screen space  before and after zooming  and then translate by the delta   mouse world position   to world position mouse screen position   zoom    mouse world position new   to world position mouse screen position   translation    mouse world position new - mouse world position    Mouse position is in screen space  so you have to transform it to world space  Simple transforming should be similar to this   world position   screen position   scale - translation

User · Answer

Finally solved it    x000D   x000D  var zoomIntensity   0 2  x000D   x000D  var canvas   document getElementById  canvas    x000D  var context   canvas getContext  2d    x000D  var width   600  x000D  var height   200  x000D   x000D  var scale   1  x000D  var originx   0  x000D  var originy   0  x000D  var visibleWidth   width  x000D  var visibleHeight   height  x000D   x000D   x000D  function draw    x000D         Clear screen to white  x000D      context fillStyle    white   x000D      context fillRect originx originy 800 scale 600 scale   x000D         Draw the black square  x000D      context fillStyle    black   x000D      context fillRect 50 50 100 100   x000D    x000D     Draw loop at 60FPS  x000D  setInterval draw  1000 60   x000D   x000D  canvas onwheel   function  event   x000D      event preventDefault    x000D         Get mouse offset  x000D      var mousex   event clientX - canvas offsetLeft  x000D      var mousey   event clientY - canvas offsetTop  x000D         Normalize wheel to  1 or -1  x000D      var wheel   event deltaY  lt  0   1   -1  x000D   x000D         Compute zoom factor  x000D      var zoom   Math exp wheel zoomIntensity   x000D       x000D         Translate so the visible origin is at the context s origin  x000D      context translate originx  originy   x000D     x000D         Compute the new visible origin  Originally the mouse is at a x000D         distance mouse scale from the corner  we want the point under x000D         the mouse to remain in the same place after the zoom  but this x000D         is at mouse new scale away from the corner  Therefore we need to x000D         shift the origin  coordinates of the corner  to account for this  x000D      originx -  mousex  scale zoom  - mousex scale  x000D      originy -  mousey  scale zoom  - mousey scale  x000D       x000D         Scale it  centered around the origin due to the trasnslate above   x000D      context scale zoom  zoom   x000D         Offset the visible origin to it s proper position  x000D      context translate -originx  -originy   x000D   x000D         Update scale and others  x000D      scale    zoom  x000D      visibleWidth   width   scale  x000D      visibleHeight   height   scale  x000D    x000D   lt canvas id  canvas  width  600  height  200  gt  lt  canvas gt  x000D   x000D   x000D    The key  as  Tatarize pointed out  is to compute the axis position such that the zoom point  mouse pointer  remains in the same place after the zoom    Originally the mouse is at a distance mouse scale from the corner  we want the point under the mouse to remain in the same place after the zoom  but this is at mouse new scale away from the corner  Therefore we need to shift the origin  coordinates of the corner  to account for this   originx -  mousex  scale zoom  - mousex scale  originy -  mousey  scale zoom  - mousey scale  scale    zoom   The remaining code then needs to apply the scaling and translate to the draw context so it s origin coincides with the canvas corner

User · Answer

Here s an approach I use for tighter control over how things are drawn  x000D   x000D  var canvas   document getElementById  canvas    var ctx   canvas getContext  2d     var scale   1  var xO   0  var yO   0   draw     function draw           Clear screen     ctx clearRect 0  0  canvas offsetWidth  canvas offsetHeight           Original coordinates     const xData   50  yData   50  wData   100  hData   100              Transformed coordinates     const x   xData   scale   xO       y   yData   scale   yO       w   wData   scale       h   hData   scale          Draw transformed positions     ctx fillStyle    black       ctx fillRect x y w h      canvas onwheel   function  e       e preventDefault         const r   canvas getBoundingClientRect          xNode    e pageX - r left        yNode    e pageY - r top       const newScale   scale   Math exp -Math sign e deltaY    0 2         scaleFactor   newScale scale       xO   xNode - scaleFactor    xNode - xO       yO   yNode - scaleFactor    yNode - yO       scale   newScale       draw      x000D   lt canvas id  canvas  width  600  height  200  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

you can use scrollto x y  function to handle the position of scrollbar right to the point that you need to be showed after zooming for finding the position of mouse use event clientX and event clientY  this will help you

User · Answer

Here s a code implementation of  tatarize s answer  using PIXI js  I have a viewport looking at part of a very big image  e g  google maps style     canvasContainer on  wheel   function  ev         var scaleDelta   0 02      var currentScale   imageContainer scale x      var nextScale   currentScale   scaleDelta       var offsetX   - mousePosOnImage x   scaleDelta       var offsetY   - mousePosOnImage y   scaleDelta        imageContainer position x    offsetX      imageContainer position y    offsetY       imageContainer scale set nextScale        renderer render stage           canvasContainer is my html container  imageContainer is my PIXI container that has the image in it  mousePosOnImage is the mouse position relative to the entire image  not just the view port     Here s how I got the mouse position     imageContainer on  mousemove     bind function ev        mousePosOnImage   ev data getLocalPosition imageContainer       mousePosOnViewport x   ev data originalEvent offsetX      mousePosOnViewport y   ev data originalEvent offsetY      self

[javascript] Zoom in on a point (using scale and translate)

Examples related to javascript

Examples related to html

Examples related to canvas