html - 在不缩放其他标记的情况下在 html5 中捏缩放图像

Question

您好，我的双指缩放有问题。我有网络应用程序(演示文稿)，我希望能够在触摸屏显示器上使用捏合来放大/缩小。当我捏整个浏览器时，它会变大或变小，但我只想在 img 上制作它。

如何实现？有任何想法吗？问候

Answer 1

您没有提供任何代码，所以我只能为您提供一些一般指导。监听 gestureend 事件，并读取传入的 GestureEvent 的 scale 属性':

scale: The distance between two fingers since the start of an event, as a multiplier of the initial distance.

The initial value is 1.0. If less than 1.0, the gesture is pinch close (to zoom out). If greater than 1.0, the gesture is pinch open (to zoom in).

因此，要监听捏合事件，您可以这样做:

var img = document.querySelector('img.myImage');
img .addEventListener('gestureend', function(e) {
if (e.scale < 1.0) {
    //User is pinching fingers together
} else if (e.scale > 1.0) {
    // User is spreading fingers apart
}}, false);

引用:https://developer.apple.com/library/safari/documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/javascript/instp/GestureEvent/scale