在小程序中，image 組件的 mode 有 12 種，其中只有三種是縮放模式。而在這三種之中，只有 aspectFit 模式可以等比例縮放圖片，并顯示完整的圖片。此模式是保證圖片長(zhǎng)邊完整地顯示出來(lái)，而手機(jī)屏幕寬度都較小，以 iphone 6 為例，僅有 375 px。因此在小程序中瀏覽橫向的圖片或尺寸較大的圖片時(shí)，圖片細(xì)節(jié)就難以查看清楚(如下圖)。

因此能動(dòng)態(tài)的通過(guò)手勢(shì)縮放圖片，就很有必要。大眾比較熟悉的手勢(shì)是類(lèi)似 app 中的雙指縮放，我們的目標(biāo)也是在小程序中實(shí)現(xiàn)此效果。

愛(ài)范兒工程師在仔細(xì)研究微信小程序的所有事件后發(fā)現(xiàn)，可以通過(guò) touchmove 事件來(lái)實(shí)現(xiàn)雙指縮放圖片。此技術(shù)的核心思想是根據(jù)兩只手指相對(duì)距離的變化來(lái)對(duì)圖片進(jìn)行放大或縮小。因此只要能知道兩只手指相對(duì)距離的變化，并能做到對(duì)圖片的動(dòng)態(tài)縮放，就能實(shí)現(xiàn)我們想要的功能。

在手指接觸到屏幕并開(kāi)始移動(dòng)后，對(duì)應(yīng)的組件上就會(huì)以約為 16ms(屏幕渲染頻率) 一次的速度不斷觸發(fā) touchmove

事件，最后手指離開(kāi)屏幕后，則會(huì)觸發(fā) touchend

事件。

touchmove

事件所包含的事件對(duì)象中有一個(gè) touches

屬性，此屬性為當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組。觸摸點(diǎn)的信息包括identifier

(觸摸點(diǎn)的標(biāo)志符)、pageX / pageY

(距離文檔左上角的距離)、clientX / clientY

(距離屏幕可顯示區(qū)域左上角距離)。通過(guò) clientX / clientY

可確定手指在屏幕上的位置。

xMove = e.touches[1].clientX - e.touches[0].clientX;yMove = e.touches[1].clientY - e.touches[0].clientY;distance = Math.sqrt(xMove * xMove + yMove * yMove);

distance

即為兩只手指之間的距離。將此距離儲(chǔ)存下來(lái)，下一次 touchmove

被觸發(fā)的時(shí)候，再計(jì)算一次 distance

。distanceDiff(newDistance - oldDistance)

即為兩次 touchmove 觸發(fā)的間隔間兩個(gè)手指相對(duì)距離的變化值。此值為正數(shù)時(shí)，表示兩指間距離在變大，即需要放大圖片，反之則為需要縮小圖片。

下面則需要確定一個(gè)規(guī)則，將 distance

的變化值與圖片放大或縮小的變化率關(guān)聯(lián)起來(lái)。我們將圖片正常顯示時(shí)的尺寸定為基準(zhǔn)值，即 baseWidth 和 baseHeight，圖片需要放大的倍數(shù)為 scale，scale 的初始值和最小值為 1，最大值可根據(jù)需要來(lái)設(shè)置。

愛(ài)范兒工程師經(jīng)過(guò)多次試驗(yàn)，確定了一個(gè)公式：

newScale = oldScale + 0.005 * distanceDiff

此公式中的 0.005 為圖片的縮放比例。在實(shí)測(cè)中，使用 0.005 這個(gè)值可獲得比較良好的縮放體驗(yàn)。

通過(guò)上面的步驟，圖片上綁定 touchmove

事件后，每次 touchmove

被觸發(fā)后，我們都可以計(jì)算出新的圖片需要被放大的倍數(shù) scale。即每次 touchmove

被觸發(fā)后，都可以得到一組圖片被放大后的高寬值：scaleWidth(scale * baseWidth)、scaleHeight(scale * baseHeight)

。

通過(guò)下面的方式就可以實(shí)現(xiàn)動(dòng)態(tài)的更改圖片的高寬

實(shí)現(xiàn)了圖片的縮放之后，還需要一個(gè)容器存放圖片，用 view

組件包裹 image

，并設(shè)置 overflow:scroll

，即可以做到自由的縮放和瀏覽圖片。但是微信小程序中有一個(gè)更合適的組件：scroll-view

，設(shè)置 scroll-x

和 scroll-y

為 true

，在放大圖片后，滑動(dòng)瀏覽圖片時(shí)擁有比較良好的瀏覽體驗(yàn)。

但是，目前版本(0.10.102800)中的 scroll-view

組件還存在一個(gè)渲染上的 bug，偶爾會(huì)出現(xiàn)界面閃動(dòng)的現(xiàn)象。而在雙指縮放存在于scroll-view

中的圖片，極易觸發(fā)此 bug。此問(wèn)題，暫時(shí)只能等待微信進(jìn)行修復(fù)，或者放棄 scroll-view

，即放棄更好的滑動(dòng)瀏覽效果，而使用 view 組件。

Hello小程序?qū)⑴c您共同成長(zhǎng)。微信號(hào)：130870319 QQ群：40726600

總結(jié)

以上是生活随笔為你收集整理的在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。