欧美操穴,丝瓜视频黄下载,国产无套乱子伦精彩

? ? ? ?在南昌小程序開發(fā)過程中如果需要用到坐標(biāo)示意圖的話，我們會(huì)發(fā)現(xiàn)在幾寸的手機(jī)屏幕上是很難完整顯示出來的，并且很難看清細(xì)節(jié)。因此，如果要在小程序中展示帶有細(xì)節(jié)信息的圖片，就需要為其加上縮放功能。而用雙指張合手勢進(jìn)行縮放，是大部分智能手機(jī)用戶都已經(jīng)習(xí)慣了的縮放方法。今天小編就為大家簡單介紹一下有關(guān)手勢縮放功能的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助！

? ? ? ?touchmove 事件所包含的事件對(duì)象中有一個(gè) touches 屬性，此屬性為當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組。觸摸點(diǎn)的信息包括 identifier、pageX / pageY、clientX / clientY。通過 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ǔ)存下來，下一次 touchmove 被觸發(fā)的時(shí)候，再計(jì)算一次 distance。distanceDiff（newDistance - oldDistance）即為兩次 touchmove 觸發(fā)的間隔間兩個(gè)手指相對(duì)距離的變化值。此值為正數(shù)時(shí)，表示兩指間距離在變大，即需要放大圖片，反之則為需要縮小圖片。

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

? ? ? ?公式如下：
? ? ? ?newScale = oldScale + 0.005 * distanceDiff

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

? ? ? ?通過上面的步驟，圖片上加上touchmove事件后，每次touchmove被觸發(fā)后，我們都可以計(jì)算出新的圖片需要被放大的倍數(shù) scale。即每次 touchmove 被觸發(fā)后，都可以得到一組圖片被放大后的高寬值：scaleWidth（scale * baseWidth）、scaleHeight（scale * baseHeight）。

? ? ? ?通過下面的方式就可以實(shí)現(xiàn)動(dòng)態(tài)的更改圖片的高寬
? ? ? ?image class="image" style="width:{{ scaleWidth }}px; height:{{ scaleHeight }}px"，注：記得帶上<>。

? ? ? ?實(shí)現(xiàn)圖片縮放后，還需要一個(gè)容器存放圖片，可以用view組件包裹image，并設(shè)置overflow:scroll，這樣就可以做到自由縮放和瀏覽圖片。

? ? ? ?關(guān)于圖片手勢縮放的實(shí)現(xiàn)方法就先介紹到這里，如果還有哪些不明白的地方，可隨時(shí)來電咨詢，百恒網(wǎng)絡(luò)專業(yè)為您解答！

歡迎您的光顧，我們將竭誠為您服務(wù)×

歡迎您的光顧，我們將竭誠為您服務(wù)×