在缩放手势上缩放图像

问题描述

我使用jQuery 插件来检测夹点事件，让用户能够缩放在图像上进/出。这是我的代码的要点：$ b​​
$ b

 
 var w = 800，
 h = 600; 
 $（'img'）。on（'touchy-pinch'，function（e，$ target，data）{
 $（this）.css（{
 width：w * data .scale，
 height：h * data.scale 
}）; 
}）; 
 

其中自定义数据对象包含以下内容：

• 缩放


• previousScale


• currentPoint


• startPoint


• startDistance

它在第一次捏合时工作正常，但是一旦我的手指离开屏幕然后再次尝试重做，图像重新缩放。我如何修改我的处理程序，以便图像继续停止而不是重新缩放？使用数据的previousScale并没有帮助，因为previousScale也会被重置。

解决方案

这里的问题是，不会将您的变量w和h重置为其缩放后的值，只能使用css，因此在另一个缩放事件中，样式将恢复为800x600。你需要一个永久性的w和h，它们被设置为 w * data.scale 和 h * data.scale 比例尺事件。

I'm using the jQuery touchy plugin for detecting the pinch event to give users the ability to zoom in/out on an image. Here's the gist of my code:

var w = 800,
    h = 600;
$('img').on('touchy-pinch', function (e, $target, data) {
    $(this).css({
        width: w * data.scale,
        height: h * data.scale
    });
});

Where the custom data object contains the following:

• scale
• previousScale
• currentPoint
• startPoint
• startDistance

It works fine on the first pinch, but once my fingers leave the screen and then I try to do it again, the image re-scales back up. How can I modify my handler so that the image continues where it left off rather than re-scale? Using the data's previousScale didn't help since the previousScale just gets reset as well.

解决方案

The problem here is that you're not resetting your vars w and h to their post-scaled values, only the css, so the style reverts back to 800x600 on another scale event. You need a persistent w and h that are set to w*data.scale and h*data.scale on the scale event.

这篇关于在缩放手势上缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！