移动端的复杂手势

写前面

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

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

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

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

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

 

 

效果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 了！