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. 放大

我们首先来看放大的情况，为了便于大家理解，我们假设其中一个触摸点不动（触摸点O不动），另一个触摸点动（A动）。如下图，touchPoint2为触摸点O，touchPoint1为触摸点A，则distance为向量OA。

假设触摸点A由A移动到B，触摸点O不动。则delta1=向量AB，delta2等于零向量。delta=delta1=向量AB。

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

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

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

2. 缩小

缩小时，假设其中一个触摸点O不动，另一个触摸点由A点移动到B’点。如下图所示。此时向量delta=向量AB’。其delta.x为负数，distance.x+delta.x的值为线段OF的长度。所以，如果图片原来对角线是OA，缩放后，对角线会变成OB’。正确！

至于，偏垂直的向量情况，也就可以照葫芦画瓢了，所以上述代码就很好搞定了 。

五、 打包测试

1. 打包成微信小游戏

打包完成后，点击上图的【打开】找到导包好的项目路径，然后打开微信开发者工具，导入如下：

2. 微信开发者工具+手机测试

点击预览，生成二维码，打开手机微信，扫一扫，测试，双指触摸，张开放大图片，收拢缩小图片，测试效果如下：

所以，想使用“九阴白骨爪”切水果的朋友，应该知道如何写你的代码了。点击链接加入群聊【unity/cocos交流二群】