使用Hammer.js进行缩放 [英] Pinch to zoom with Hammer.js

问题描述

我想要一个图像的缩放缩放功能。我想让它放大手指所在的区域。

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

我的指数只是

<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

我的问题在于

        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?

抱歉我的英文不好：）

推荐答案

这是hammer.js和tap的一个例子。点按它时会放大您点击的位置。事件数据对于所有手势都是通用的，因此从点击切换到捏合应该起作用。这是一个很好的例子。您可能需要在捏合时增加缩放步长。它已经在chrome（v30）和firefox（v24）上进行了测试。
它基于线程中提到的解决方案，
放大一个点（使用比例和翻译）
因为你会看到一个替代方案也可以使用画布。

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/

这篇关于使用Hammer.js进行缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！