问题
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.
回答1:
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.
来源:https://stackoverflow.com/questions/12356116/scaling-image-on-pinch-gesture