移动端的复杂手势

写前面

（我存在的目的怎么不起作用啊~）

上个星期又接到我们运维美女的需求其中大部分都是非常简单的！

不过其中有个东西我到是蛮感兴趣的就是类似下面这个

要想实现上面这个就要使用多点触摸了处理多点触摸手势并不简单但也不是非常困难

但是要能真正的使用需要很多的知识结合起来！

效果gif

demo君点我

你可以用手机体验下或者你的电脑屏幕可以触摸我就是用电脑录制的（这个屏幕终于有用武之地了= =）

这个东西含有3个手势哪几个呢？

1 拖放手势

这个是相对简单的单点和和多点（这里是双指）都是可以实现拖放的拖放原理我就不说了很基础

值得注意的是对于双指的拖放我们得知道位于两指之间那点位置利用那点来计算如图

这个点有很多计算方法

我这里是首先找到左下那点另外个就是右上了

然后左下那点加上他们的差值就ok了具体代码就是

let minx = min(p1.x,p2.x);
let miny = min(p1.y,p2.y)

let cx = minx + ( max(p1.x,p2.x)-minx  )*.5;
let cy = max(p1.y,p2.y) - (max(p1.y,p2.y)-miny)*.5;

2、缩放手势

通常做缩放缩放的那个对象都是围绕他的中心去缩放的如图

还有一种情况就是缩放点并不是对象的中心点而是围绕我们上面计算的那两指之间那点去做的缩放如图

第一种情况

当我们首次move时候我们得初始一个距离之后都得根据那个值确定出一个缩放因子

之后cancel或者end的时候我们要记录最后次的缩放因子(再次move是要叠加的) 还得把初始的距离重置

而且我们要给个最大和最小阈值超过界限的话得回弹回来大致就这思路

scale : {
      execute(pos){
  
        const {point1,point2} = pos;

        const len = (new Vec(
          point1.x - point2.x
          ,point1.y - point2.y
        )).length();

        if(!this.blen) this.blen = len;

        const s = (len/this.blen)*this.bs;

        this.sss = s;

        this.custom && this.custom(point1,point2,s);
       
        gesture.trigger('scale' , {scale:s});
      }
      ,resolve(){
        this.bs = this.sss;
        this.blen = 0;

        this.bs = max(prop.min_scale , min(this.bs ,prop.max_scale));

        gesture.trigger('scale' , {scale:this.bs});

      }
      ,bs : 1 ,sss : 1
      ,blen : 0
    }

第二种情况

我们得计算出矩阵中e和f的值

this.custom && this.custom(point1,point2,s);

callback坐标和缩放因子额外计算

ges.custom('scale' , (point1,point2,s)=>{
    // Mat.e = point1.x*(1-s);
    // Mat.f = point1.y*(1-s);
});

3、旋转手势

直接看图吧我们只要解决这些向量的关系就ok了

比如图上橘黄色向量就是是初始的手势向量其他颜色是之后向量位置大小

伴随着手势的旋转你得知道目前向量相对于初始的橘黄色向量角度？法线朝内？朝外？

叉积完美的解决的所有问题虽然用点乘也可以搞定旋转不过有多余计算

不懂啥是叉积的可以问下她度娘比我解释的清楚多了！

好了ok！

也给出github地址

*另外可以给我几个Star 了！