locked
Extend zoom control

    Question

  • I have a canvas that draw multiple images. I want to zoom this canvas so  I am trying to use zoom control with CSS. I have a div contains canvas and set CSS to zoom. Everything works well. But when I try to change zoom behavior (like double-tap to zoom), I have a problem here. The canvas never snap exact point where I double tap on it. It always goes to right.

    1. So could I extend zoom control so that I can change the snap point when I zooming?
    2. Do we have some callbacks notify zoom progress (like onZoomOut or onZoomIn)?
    3. And finally, could I set CSS for div that contains cavas auto resize when zoom? Because if I set width and height auto, then div will be full screen. If I set length for width height, when zoom, I cannot see the canvas fully. 

    Thanks,

    Vivian Ng

    Thursday, December 8, 2011 3:56 AM

Answers

  • Hi Vivian,

    That is a CSS style and not a control so it is not exposed as a control.  The first thing that comes to mind is to treat the Tap just like you would a mouse click.  It will give you the offsetX and offsetY coordinates so you know where in the canvas you are zooming.  Then take those coordinates and do the math to zoom in on that point and move the origin of your zoom so that the point stays in the same place on the canvas. 

    For your 3rd question... What you are describing there is not zooming but resizing.  If you want to see the whole canvas you would want to do a resize not a zoom.

    -Jeff


    Jeff Sanders (MSFT)
    Thursday, December 8, 2011 8:41 PM
    Moderator

All replies

  • My code below

    CSS:

    .zoomElement
    {
        overflow: auto;
        -ms-content-zooming: zoom;
        -ms-scroll-rails: none;
        -ms-content-zoom-boundary-min: 100%;
        -ms-content-zoom-boundary-max: 300%;
        -ms-content-zoom-snap-type: proximity;
        -ms-content-zoom-snap-points: snapInterval(50%, 0);
    }


    HTML:

    <div id="zoomArea" style="width:auto; height: auto;background: #cccccc; top:-230px; left:250px; position:absolute;" class="zoomElement">
                <canvas id="drawArea">
                </canvas>
            </div>
    


    Javascript:

    function doubleTapZoom() {
    canvas = document.getElementById("drawArea");
    zoomArea = document.getElementById("zoomArea");
    zoomArea.msContentZoomFactor = zoomFractor;
    }


    Thursday, December 8, 2011 4:04 AM
  • Hi Vivian,

    That is a CSS style and not a control so it is not exposed as a control.  The first thing that comes to mind is to treat the Tap just like you would a mouse click.  It will give you the offsetX and offsetY coordinates so you know where in the canvas you are zooming.  Then take those coordinates and do the math to zoom in on that point and move the origin of your zoom so that the point stays in the same place on the canvas. 

    For your 3rd question... What you are describing there is not zooming but resizing.  If you want to see the whole canvas you would want to do a resize not a zoom.

    -Jeff


    Jeff Sanders (MSFT)
    Thursday, December 8, 2011 8:41 PM
    Moderator