Cocos Creator游戏开发中实现多指触控缩放代码及原理解析

一、 UI设计

如上图，我们设计一个简单的界面来进行测试。新建OnMultiTouchCtrl.js ，挂载到OnMultiTouchCtrl节点上。

二、 OnMultiTouchCtrl.js实现如下  推荐一个学习交流群：1072209430

首先在方法中，给Canvas节点添加触摸移动的监听事件，在其回调方法中打印event得到结果如下：

由此，我们可以猜测_touches得到的就是多点触摸的信息。故可以通过event.getTouches()方法获取多点触控的信息。

三、 OnMultiTouchCtrl.js代码如下

四、 缩放算法原理解析

我们首先考虑触摸的两点构成的向量偏水平的情况，也就是代码中Math.abs(distance.x) > Math.abs(distance.y)的情况。这种情况能够理解，偏垂直的情况就是一样的操作原理。

1. 放大

如上图所示，由于假设的是偏水平向量，所以满足第一个分支。缩放的值scale就等于对象原来的缩放值乘以一个比例系数。这个比例系数就是线段OE的长比线段OD的长。也就是(distance.x + delta.x)/distance.x。

如果图片原来的对角线是OA，则缩放后图片的对角线就是OB。完美！

接下来缩小就是一样的道理了。

2. 缩小