转自：http://www.fly63.com/article/detial/9301

 

一、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();

<span class="hljs-comment">// 第一个触摸点的坐标</span>
store.pageX = events.pageX;
store.pageY = events.pageY;

store.moveable = <span class="hljs-literal">true</span>;

<span class="hljs-keyword">if</span> (events2) {
    store.pageX2 = events2.pageX;
    store.pageY2 = events2.pageY;
}

store.originScale = store.scale || <span class="hljs-number">1</span>;

});

document.addEventListener(‘touchmove’, function (event) {

if (!store.moveable) {

return;

}
event.preventDefault();

<a href="http://www.fly63.com/" target="_blank" rel="noopener"><span class="hljs-keyword">var</span></a> touches = event.touches;
<a href="http://www.fly63.com/" target="_blank" rel="noopener"><span class="hljs-keyword">var</span></a> events = touches[<span class="hljs-number">0</span>];
<a href="http://www.fly63.com/" target="_blank" rel="noopener"><span class="hljs-keyword">var</span></a> events2 = touches[<span class="hljs-number">1</span>];
<span class="hljs-comment">// 双指移动</span>
<span class="hljs-keyword">if</span> (events2) {
    <span class="hljs-comment">// 第2个指头坐标在touchmove时候获取</span>
    <span class="hljs-keyword">if</span> (!store.pageX2) {
        store.pageX2 = events2.pageX;
    }
    <span class="hljs-keyword">if</span> (!store.pageY2) {
        store.pageY2 = events2.pageY;
    }

    <span class="hljs-comment">// 获取坐标之间的举例</span>
    <a href="http://www.fly63.com/" target="_blank" rel="noopener"><span class="hljs-keyword">var</span></a> getDistance = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">start, stop</span>) </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.hypot(stop.x - start.x, stop.y - start.y);
    };
    <span class="hljs-comment">// 双指缩放比例计算</span>
    <span class="hljs-keyword">var</span> zoom = getDistance({
        <span class="hljs-attr">x</span>: events.pageX,
        <span class="hljs-attr">y</span>: events.pageY
    }, {
        <span class="hljs-attr">x</span>: events2.pageX,
        <span class="hljs-attr">y</span>: events2.pageY
    }) /
    getDistance({
        <span class="hljs-attr">x</span>: store.pageX,
        <span class="hljs-attr">y</span>: store.pageY
    }, {
        <span class="hljs-attr">x</span>: store.pageX2,
        <span class="hljs-attr">y</span>: store.pageY2
    });
    <span class="hljs-comment">// 应用在元素上的缩放比例</span>
    <span class="hljs-keyword">var</span> newScale = store.originScale * zoom;
    <span class="hljs-comment">// 最大缩放比例限制</span>
    <span class="hljs-keyword">if</span> (newScale &gt; <span class="hljs-number">3</span>) {
        newScale = <span class="hljs-number">3</span>;
    }
    <span class="hljs-comment">// 记住使用的缩放值</span>
    store.scale = newScale;
    <span class="hljs-comment">// 图像应用缩放效果</span>
    eleImg.style.transform = <span class="hljs-string">'scale('</span>+ newScale +<span class="hljs-string">')'</span>;
}

});
document.addEventListener(‘touchend’, function () {

store.moveable = false;
<span class="hljs-keyword">delete</span> store.pageX2;
<span class="hljs-keyword">delete</span> store.pageY2;

});

document.addEventListener(‘touchcancel’, function () {

store.moveable = false;
<span class="hljs-keyword">delete</span> store.pageX2;
<span class="hljs-keyword">delete</span> store.pageY2;

});