javascript - 使用 Hammer.js 双指缩放

Question

我想要缩放图像的功能。我希望它放大手指所在的区域。

我的索引只有

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

</div>

我的缩放和滚动脚本类似with this example .我做了一些更改以适应我的项目

我的问题在

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

我怎样才能改变它，使其不放大到图片的中心，而是放大到食指触摸显示屏的地方？

抱歉我的英语不好:)

Answer 1

这是一个使用 hammer.js 和 tap 的例子。当您点击时，它会在您点击的位置放大。事件数据对于所有手势都是通用的，因此从点击切换到捏合应该有效。这是一个很好的例子。您可能需要在捏合时增加缩放步长。它已经在 chrome(v30) 和 firefox (v24) 上进行了测试。它基于线程中提到的解决方案， Zoom in on a point (using scale and translate)正如您将看到的，另一种方法也可以是使用 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/