一、 UI設(shè)計(jì)

如上圖，我們?cè)O(shè)計(jì)一個(gè)簡(jiǎn)單的界面來(lái)進(jìn)行測(cè)試。新建OnMultiTouchCtrl.js ，掛載到OnMultiTouchCtrl節(jié)點(diǎn)上。推薦一個(gè)學(xué)習(xí)交流群：1072209430

二、 OnMultiTouchCtrl.js實(shí)現(xiàn)如下

首先在方法中，給Canvas節(jié)點(diǎn)添加觸摸移動(dòng)的監(jiān)聽(tīng)事件，在其回調(diào)方法中打印event得到結(jié)果如下：

由此，我們可以猜測(cè)_touches得到的就是多點(diǎn)觸摸的信息。故可以通過(guò)event.getTouches()方法獲取多點(diǎn)觸控的信息。

三、 OnMultiTouchCtrl.js代碼如下

四、 縮放算法原理解析

我們首先考慮觸摸的兩點(diǎn)構(gòu)成的向量偏水平的情況，也就是代碼中Math.abs(distance.x) > Math.abs(distance.y)的情況。這種情況能夠理解，偏垂直的情況就是一樣的操作原理。

1. 放大

我們首先來(lái)看放大的情況，為了便于大家理解，我們假設(shè)其中一個(gè)觸摸點(diǎn)不動(dòng)（觸摸點(diǎn)O不動(dòng)），另一個(gè)觸摸點(diǎn)動(dòng)（A動(dòng)）。如下圖，touchPoint2為觸摸點(diǎn)O，touchPoint1為觸摸點(diǎn)A，則distance為向量OA。

假設(shè)觸摸點(diǎn)A由A移動(dòng)到B，觸摸點(diǎn)O不動(dòng)。則delta1=向量AB，delta2等于零向量。delta=delta1=向量AB。

如上圖所示，由于假設(shè)的是偏水平向量，所以滿足第一個(gè)分支。縮放的值scale就等于對(duì)象原來(lái)的縮放值乘以一個(gè)比例系數(shù)。這個(gè)比例系數(shù)就是線段OE的長(zhǎng)比線段OD的長(zhǎng)。也就是(distance.x + delta.x)/distance.x。

如果圖片原來(lái)的對(duì)角線是OA，則縮放后圖片的對(duì)角線就是OB。完美！

接下來(lái)縮小就是一樣的道理了。

2. 縮小

縮小時(shí)，假設(shè)其中一個(gè)觸摸點(diǎn)O不動(dòng)，另一個(gè)觸摸點(diǎn)由A點(diǎn)移動(dòng)到B’點(diǎn)。如下圖所示。此時(shí)向量delta=向量AB’。其delta.x為負(fù)數(shù)，distance.x+delta.x的值為線段OF的長(zhǎng)度。所以，如果圖片原來(lái)對(duì)角線是OA，縮放后，對(duì)角線會(huì)變成OB’。正確！

至于，偏垂直的向量情況，也就可以照葫蘆畫(huà)瓢了，所以上述代碼就很好搞定了 。

五、 打包測(cè)試

1. 打包成微信小游戲

打包完成后，點(diǎn)擊上圖的【打開(kāi)】找到導(dǎo)包好的項(xiàng)目路徑，然后打開(kāi)微信開(kāi)發(fā)者工具，導(dǎo)入如下：

2. 微信開(kāi)發(fā)者工具+手機(jī)測(cè)試

點(diǎn)擊預(yù)覽，生成二維碼，打開(kāi)手機(jī)微信，掃一掃，測(cè)試，雙指觸摸，張開(kāi)放大圖片，收攏縮小圖片，測(cè)試效果如下：

所以，想使用“九陰白骨爪”切水果的朋友，應(yīng)該知道如何寫(xiě)你的代碼了。