阅读 2839

你需要的移动端多点触控双指缩放

作为前端切图仔,经常会和移动端打交道,对于移动端来说,存在多个接触点同时操作的情况,和双手缩放的问题,于是思考了一下,学习移动端开发手势的的知识,实现双指缩放。

前言

我们开发的PC页面,只能通过鼠标去点击,移动端页面,存在着多点触控的问题,我们经常会在移动端页面用手势去操作页面,放大和缩小的问题。大部分的移动设备(手机/ipad)都支持多点触控,开发者针对不同的手势可以实现不同的功能,所以今天主题就是针对多点触控和双指缩放展开。

常见的案例场景

  • ios和android手机的多点触控

ios和android支持多点触摸和手势操作,浏览器为多点触摸提供一个包含touches数组的事件,包含所有多点触摸对象,多点触摸对象触发

  • 渐进增强思想

手势操作方便了用户,给用户带来了极大的便利,但是手势不能总是使用,总是操作手势并不是我们想要的渐进增强思想。有些浏览器并不是支持多点触控,需选择适合普通点击结合触摸事件交互的页面,手势只是增强这一交互。

  • 触摸事件

既然是要渐进增强,那就必须从基础点击和触摸事件说起,点击事件就不再多说,关于触摸事件,之前也有一篇文章介绍过移动开发之轻触与单击事件,关于触摸四种基础事件和事件对象,这里要对触摸事件的处理进行说明。

浏览器兼容

通常我们在触摸和手势事件处理函数内会添加CSS3动画处理,这个时候需要进行浏览器兼容处理。

var TRANSITION = 'transition';
var TRANSITION_END = 'transitionend';
var TRANSFORM = 'transform';
var TRANSFORM_PROPERTY = 'transform';
var TRANSITION_PROPERTY = 'transition';

if (typeof document.body.style.webkitTransform !== undefined) {
    TRANSFORM = 'webkitTransform';
    TRANSITION = 'webkitTransition';
    TRANSITION_END = 'webkitTransitionEnd';
    TRANSFORM_PROPERTY = '-webkit-transform';
    TRANSITION_PROPERTY = '-webkit-transition';
}
复制代码

双指缩放

在移动端手势事件中,双指缩放的需求还是很常见的,本文中强调,现在大多数移动设备都支持原生的双指缩放,但是这样可能影响页面布局,而且为了更多可控性,很多时候还是会选择自行实现缩放手势功能。

  • 缩放中心

在原生缩放动画,缩放中心通常是图像中心,可以拿起移动设备尝试一番,而在现实需求中,我们通常希望缩放以手势屏幕的两个接触点中心为中心,即缩放中心为接触点中心。

  • 变换原点

在CSS3动画中,如,transform动画旋转,缩放等动画,有一个transform-origin属性:

The transform-origin property lets you modify the origin for transformations of an element. transform-origin属性使得我们可以修改一个元素变换动画的原点。

当我们使用CSS3变换动画进行缩放时,由于变换动画的变换原点和缩放中心(即接触点中心)相互独立,为了不影响缩放中心相对于元素的位置,元素变换缩放时,也应该对缩放中心坐标进行缩放移动,即除了变换缩放元素,还应该对该元素进行额外坐标偏移。

  • 位移偏量

我们希望缩放以接触点中心为中心,元素向四周缩放,假设变换原点为元素左上角,即transform-origin: 0 0;,此时元素变换缩放位移均为正值,仅向右下方向缩放,所以缩放中心(其实也就是该元素)应对应向相反方向(左上方向)偏移,值为缩放坐标值 * (1 - 缩放比例)。

如上图,原始元素A盒,以接触点M,N两点的中心点L(x, y)为缩放中心点,向四周缩放,其位置应该如图中C盒,由于L(x, y)点的位置是不可控的(用户行为),我们设置元素变换原点transform-origin: 0 0;,此时其缩放后位置如B盒,然而我们依然希望达到缩放后形成C盒的位移效果,则我们需要将元素向左上方向位移,假设缩放比例为k, 则元素位移值计算过程如下:

1.计算元素A的位移,其实等效于缩放点的位移,也就是计算坐标系缩放后进行的位移; 2.L(x, y)点,在缩放前坐标系中坐标为(x, y),则缩放k倍后,其在缩放后坐标系中坐标为(kx, ky); 3.计算两点位移距离: 水平位移: x – kx; 垂直位移:y – ky; 4.得到元素在水平和垂直方向需要偏移的距离。

缩放的实现

  • 缩放与滚动

我们自行实现的缩放事件需要使用touchmove事件,而touchmove事件会触发设备的滚动事件,所以要么阻止滚动,要么不让屏幕出现滚动条。

  • 阻止滚动
document.addEventListener('touchmove', function(event){
    event.preventDefault();
})
复制代码
  • 阻止滚动条
html, body {
    height: 100%;
}
复制代码
  • 计算缩放中心

缩放动画以接触点为中心,当我们使用双指手势实现缩放时,这个接触点中心就是两个接触点的中心点:


function getOrigin(first, second) {
    return {
        x: (first.x + second.x) / 2,
        y: (first.y + second.y) / 2
    };
}
getOrigin({
    x: event.touches[0].pageX, 
    y: event.touches[0].pageY
}, {
    x: event.touches[1].pageX, 
    y: event.touches[1].pageY
});
复制代码
  • 计算缩放比例

缩放比例如何确定呢,起始触摸两指间距离除以缩放时两指间距离,即缩放比例:

function getDistance(start, stop) {
    return Math.sqrt(Math.pow((stop.x - start.x), 2) + Math.pow((stop.y - start.y), 2));
}

function getScale(start, stop) {
    return getDistance(start[0], start[1]) / getDistance(stop[0], stop[1]);
}
复制代码
  • 处理触摸事件

要实现缩放功能除了计算相关缩放中心和缩放比例,另外还需要处理触摸事件:

var distance = {};
var origin;
var scale = 1;
function handleTouch(e) {
    switch(e.type) {
        case 'touchstart':
            if (e.touches.length > 1) {
                distance.start = getDistance({
                    x: e.touches[0].screenX, 
                    y: e.touches[0].screenY  
                }, {
                    x: e.touches[1].screenX, 
                    y: e.touches[1].screenY
                });
            }
            break;
        case 'touchmove':
            if (e.touches.length === 2) {
                origin = getOrigin({
                    x: event.touches[0].pageX, 
                    y: event.touches[0].pageY
                }, {
                    x: event.touches[1].pageX, 
                    y: event.touches[1].pageY
                });
                distance.stop = getDistance({
                    x: e.touches[0].screenX, 
                    y: e.touches[0].screenY  
                }, {
                    x: e.touches[1].screenX, 
                    y: e.touches[1].screenY
                });
                scale = distance.stop / distance.start;
                setScaleAnimation(scale, true);
            }
            break;
        case 'touchend':
            scale = 1;
            setScaleAnimation(scale);
            break;
        case 'touchcancel':
            scale = 1;
            setScaleAnimation(scale);
            break;
        default:;
    }
}
复制代码
  • 使用变换

接下来就是使用CSS3动画缩放图片了,代码如下:

function setScaleAnimation(scale, animation) {
    var transition_animation = '';
    var x, y;
    if (animation) {
        transition_animation = 'none';
    } else {
        transition_animation = TRANSFORM_PROPERTY + ' 0.3s ease-out';
    }
    element.style[TRANSITION] = transition_animation;
    // 计算位移偏量
    x = origin.x + (-origin.x) * scale;// 缩放中心偏移量
    y = origin.y + (-origin.y) * scale;

    // 缩放和位移
    element.style[TRANSFORM] = 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + x + ', ' + y +  ')';
}
复制代码
文章分类
前端
文章标签