一、 UI设计
如上图,我们设计一个简单的界面来进行测试。新建OnMultiTouchCtrl.js ,挂载到OnMultiTouchCtrl节点上。点击链接加入群聊【unity/cocos交流二群】
二、 OnMultiTouchCtrl.js实现如下
首先在方法中,给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交流二群】
网友评论