Pinch to zoom with Hammer.js

Question

I want a pinch to Zoom function for an image. I want it to zoom in the area where the fingers are.

My index is only

<div id="wrapper" style="-webkit-transform: translate3d(0,0,0);overflow: hidden;">

</div>

And my script for zooming and scrolling is similar with this example. I have made a few changes to fit with my project

My problem is in

        case 'transform':
            rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;

How can I change it so that it doesn't zoom into the center of the picture but at place where the first finger have touch the display?

Sorry for my bad english :)

Answer 1

This is an example with hammer.js and tap. As you tap it will zoom in at the point where you tapped. The event data is common for all gestures so switching from tap to pinch should work. It is a good example to work on. You may need to increase the scale step as you pinch. It has been tested on chrome(v30) and firefox (v24). It is based on the solution mentioned at the thread, Zoom in on a point (using scale and translate) as you will see an alternative could also be to use canvas.

HTML

<div style="-webkit-transform: translate3d(0,0,0);overflow: hidden;" class="zoomable">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" />
</div>

JS

(function ($) {

    $(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

        Hammer($('.zoomable img').get(0)).on("tap", function (event) {

            var posX = event.gesture.center.pageX;
            var posY = event.gesture.center.pageY;


            // find current location on screen 
            var xScreen = posX; //- $(this).offset().left;
            var yScreen = posY; //- $(this).offset().top;

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

            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).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                .css('-webkit-transform-origin', xImage + 'px ' + yImage + 'px').css('-moz-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)').css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
                .css('-o-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)').css('-o-transform-origin', xImage + 'px ' + yImage + 'px').css('transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)');
        });
    });
})(jQuery);

http://jsfiddle.net/SySZL/