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

更新日期: 2020-05-13阅读: 2.1k标签: 移动端

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

结果是模拟不了。

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

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

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


二、触摸屏与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

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


五、结语以及其他

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

html { touch-action: none; }

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

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

本文地址: https://www.zhangxinxu.com/wordpress/?p=9461


链接: https://fly63.com/article/detial/9301

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因

在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN-NaN ,例如getTime()在ios上拿不到时间戳显示NaN

再聊移动端页面的适配

因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

移动端开发注意问题

这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

移动web开发之视口viewport_浅谈移动端中的视口

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)

手淘H5移动端适配方案flexible源码分析

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!