美文网首页Cocos2d-X与游戏开发
Cocos Creator游戏开发中实现多指触控缩放代码及原理解

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

作者: Thomas游戏圈 | 来源:发表于2020-07-08 09:30 被阅读0次

    一、 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交流二群】

    相关文章

      网友评论

        本文标题:Cocos Creator游戏开发中实现多指触控缩放代码及原理解

        本文链接:https://www.haomeiwen.com/subject/isjqcktx.html