Question

73

Pinch to zoom with Hammer.js

rated 0 times [ 77] [ 4] / answers: 1 / hits: 19119 / 11 Years ago, tue, october 29, 2013, 12:00:00

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 :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominickmackenziet

Add To Favorites

Follow

Total Points: 583

Total Questions: 101

Total Answers: 117

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

dominickmackenziet questions

1 How to keep user logged after browser closing in React - Express?

Fri, May 20, 22, 00:00, 2 Years ago

1 Why do I get an Unhandled Promise Rejection with await Promise.all

Tue, Jun 1, 21, 00:00, 3 Years ago

1 Convert Maybe< string>[]' to 'string[]

Wed, Apr 7, 21, 00:00, 3 Years ago

1 (0 , _reactRouterDom.useHistory) is not a function

Fri, Feb 12, 21, 00:00, 3 Years ago

1 How to execute API call after entering 3 characters in field?

Fri, Aug 7, 20, 00:00, 4 Years ago

View All

answered 11 Years ago deiong · Accepted Answer

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/