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

一、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 的时候,实时计算出新的两个手指的坐标距离。

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

如下图所示:

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

实例演示

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

<img id="image" src="http://www.fly63.com/article/detial/9301/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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9301

以上是 移动端双指缩放图片JS事件的实践心得 的全部内容, 来源链接: utcz.com/a/56839.html

回到顶部