移动端双指缩放图片JS事件的实践心得

这篇文章发布于 2020年06月12日,星期五,23:09,归类于 JS实例。 阅读 36072 次, 今日 16 次 17 条评论

 

一、Chrome浏览器双指触摸的模拟

结果是模拟不了。

页面整体缩放行为是可以通过按住Shift键+页面左键模拟的,但是,实际上,还是一个触摸点,因此无法模拟双指缩放行为。

除非是有触摸板,或者屏幕就是触摸屏。

否则,只能连手机进行调试了。

Mac触控板双指缩放

本小节内容补充于2022-09-29

Mac触控板的双指缩放可以使用下面的逻辑判断:

// mac 双指缩放
document.addEventListener('mousewheel', function (event) {
  if (!event.deltaY || !event.ctrlKey) {
    return;
  }
  event.preventDefault();

  // 缩放执行
  if (event.deltaY < 0) {
    // 放大...
  } else if (event.deltaY > 0) {
    // 缩小...
  }
}, {
  passive: false
});

其中,'mousewheel' 可以改成 'wheel' 事件。

放大和缩小的逻辑写在对应的代码位置处。

二、触摸屏与event.touches

在触屏设备下,要判断是单指还是多指操作,可以通过event.touches数组对象的长度判断。

例如:

document.addEventListener('touchstart', function (event) {
    var touches = event.touches;
    if (touches.length == 1) {
        console.log('单指');
    } else if (touches.length >= 2) {
        console.log('多指');
    }
});

按照我们的理解,上面的逻辑应该是无懈可击的。

实际上并不是。

我一开始也是在'touchstart'事件中判断是单指还是双指,结果发现了奇怪的现象,有时候是单指,有时候是双指,双指复现的概率可能不到1成。

这可真是奇怪了。

后来一番测试,终于弄清楚原因了。

只有当两个指头同时触摸屏幕的时候,才能在touchstart事件中被识别为双指操作。

这太难了,没有谁的两个指头是一样长的,很难同一时间戳中屏幕的。

因此,双指事件的判断需要在touchmove事件中才行。

三、双指行为的判断

代码如下:

document.addEventListener('touchmove', function (event) {
    if (event.touches && event.touches.length == 2) {
        console.log('双指在移动');
    }
});

四、双指缩放功能的实现

双指缩放功能的实现的难点就是缩放比例的计算。

event.touches中的每一项都是触摸点对象,包含了触碰的元素以及触摸点的坐标。

其中,触摸点的坐标就可以用来计算缩放比例。

我们记录下第一次双指行为发生时候的两个手指点的坐标值,于是就可以计算出这两个指头之间的距离;

然后继续touchmove的时候,实时计算出新的两个手指的坐标距离。

一开始的距离/现在的距离 = 应该缩放的比例。

如下图所示:

双指操作示意

实例演示

假设页面上有一张图片元素,要实现这种图片的双指缩放预览效果:

<img id="image" src="1.png">

则可以试试使用下面所示的JS代码:

var eleImg = document.querySelector('#image');
var store = {
    scale: 1
};
// 缩放事件的处理
eleImg.addEventListener('touchstart', function (event) {
    var touches = event.touches;
    var events = touches[0];
    var events2 = touches[1];

    event.preventDefault();

    // 第一个触摸点的坐标
    store.pageX = events.pageX;
    store.pageY = events.pageY;

    store.moveable = true;

    if (events2) {
        store.pageX2 = events2.pageX;
        store.pageY2 = events2.pageY;
    }

    store.originScale = store.scale || 1;
});
document.addEventListener('touchmove', function (event) {
    if (!store.moveable) {
        return;
    }

    event.preventDefault();

    var touches = event.touches;
    var events = touches[0];
    var events2 = touches[1];
    // 双指移动
    if (events2) {
        // 第2个指头坐标在touchmove时候获取
        if (!store.pageX2) {
            store.pageX2 = events2.pageX;
        }
        if (!store.pageY2) {
            store.pageY2 = events2.pageY;
        }

        // 获取坐标之间的举例
        var getDistance = function (start, stop) {
            return Math.hypot(stop.x - start.x, stop.y - start.y);
        };
        // 双指缩放比例计算
        var zoom = getDistance({
            x: events.pageX,
            y: events.pageY
        }, {
            x: events2.pageX,
            y: events2.pageY
        }) /
        getDistance({
            x: store.pageX,
            y: store.pageY
        }, {
            x: store.pageX2,
            y: store.pageY2
        });
        // 应用在元素上的缩放比例
        var newScale = store.originScale * zoom;
        // 最大缩放比例限制
        if (newScale > 3) {
            newScale = 3;
        }
        // 记住使用的缩放值
        store.scale = newScale;
        // 图像应用缩放效果
        eleImg.style.transform = 'scale('+ newScale +')';
    }
});

document.addEventListener('touchend', function () {
    store.moveable = false;

    delete store.pageX2;
    delete store.pageY2;
});
document.addEventListener('touchcancel', function () {
    store.moveable = false;

    delete store.pageX2;
    delete store.pageY2;
});

大家可以访问这个地址(如果手机访问本文):https://www.zhangxinxu.com/study/202006/resize.html

或者扫下面的码进行体验(如果是PC浏览器访问):

二维码

双指缩放效果就可以体验了,最大比例做了限制,最小比例没有做限制。

五、结语以及其他

demo页面的touchmove没有设置passive:false也没有报错,是因为html标签设置了如下CSS:

html { touch-action: none; }

如果有兴趣了解背后原理,可以访问这篇文章:touch-action简介与treated as passive错误解决

本文是自己实际工作实践中的一点手机中双指缩放图片的经验分享,考虑到自己以后遇到类似需求可能还会用到,所以记录下,希望可以帮到有类似需求的小伙伴。

以上~感谢阅读,欢迎share~

(本篇完)

分享到:


发表评论(目前17 条评论)

  1. hailing说道:

    单指拖动可以实现吗?没有思路

  2. aaa说道:

    基于双指中间缩放是不是好一点

  3. 新手说道:

    非常好的代码,相当好用

  4. 科菲说道:

    为什么图片放大不会因为高频计算比例而抖动呢,同样的原理应用于视频会抖动

  5. 说道:

    nice

  6. 菜鸟说道:

    如果将图片的transform-origin设置为左上角,双指缩放时将双指中心作为图片缩放中心,图片的translate偏移量应该如何计算呢?能否提供一个思路呢?

  7. 王二娃子说道:

    可以做个旋转 缩放 拖动一起的吗

  8. 好评说道:

    网上的方法大都不行,这个推荐哦,以后遇到问题先来这里找找,省的浪费时间百度找到一堆辣鸡。

  9. 厉害说道:

    这个厉害了,网上找了一堆,都无法实现,这个一下就实现了,虽然我做的是文字放大,但同样使用。牛逼啊大神

  10. xcf说道:

    可以分享一下双指旋转的吗?以前自己实现了,但是效果不太好

  11. 随声说道:

    请问限制在指定宽高中,他的缩放大小如何判断

  12. bug叫我来巡山说道:

    终于更新了,深度好文

  13. 武汉市长江大桥说道:

    有的浏览器比如uc safari 移动端写user-scalable=no 不生效,但是在根标签上使用@touchmove.prevent 可能可以生效,那个这个不是不能用touchmove事件 了

  14. 代码如诗如画说道:

    终于更新了,深度好文

  15. 仿生狮子说道:

    Nice

  16. LeonZou说道:

    我今天正好在研究这个~
    touchmove的函数还可以改进一下:只在event.touches.length==2时调用event.preventDefault(),这样就不会影响正常滚动了。