一、 UI设计

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

二、 OnMultiTouchCtrl.js实现如下

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

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

三、 OnMultiTouchCtrl.js代码如下

cc.Class({

    extends: cc.Component,

    properties: {

        canvas: cc.Node,

        target: cc.Node

},

    onLoad: function () {

        var self = this, parent = this.node.parent;

        self.canvas.on(cc.Node.EventType.TOUCH_MOVE, function (event) {

            console.log("event:", event);

            console.log("event._touches:", event._touches);

            console.log("event.getTouches():", event.getTouches());

            var touches = event.getTouches();

            if (touches.length >= 2) {

                var touch1 = touches[0], touch2 = touches[1];

                var delta1 = touch1.getDelta(), delta2 = touch2.getDelta();

                var touchPoint1 = parent.convertToNodeSpaceAR(touch1.getLocation());

                var touchPoint2 = parent.convertToNodeSpaceAR(touch2.getLocation());

                //缩放

                var distance = touchPoint1.sub(touchPoint2);

                var delta = delta1.sub(delta2);

                var scale = 1;

                if (Math.abs(distance.x) > Math.abs(distance.y)) {

                    scale = (distance.x + delta.x) / distance.x * self.target.scale;

                }

                else {

                    scale = (distance.y + delta.y) / distance.y * self.target.scale;

                }

                self.target.scale = scale < 0.1 ? 0.1 : scale;

            }

        }, self.node);

    }

});

四、 缩放算法原理解析

我们首先考虑触摸的两点构成的向量偏水平的情况，也就是代码中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. 打包成微信小游戏

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

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

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

所以，想使用“九阴白骨爪”切水果的朋友，应该知道如何写你的代码了。