Wechat developed by the company Small program , pm wants to achieve the following requirements:
Zoom the picture with your fingers. In fact, before realizing this demand, we didn't know that WeChat official account and WeChat api had a native special effect on it, and WeChat's friend circle also used this api. wx.previewImage, that's it. Preview the picture. In addition to the pictures of the local computer that cannot preview the development environment, the pictures of your phone's real machine and the pictures on the http server can be previewed, and the zoom function is very smooth. Let's talk about how to implement this function with js.
The ideas in the article refer to this article: Link description
Start with the source code, and then analyze it step by step:
Page({
data: {
touch: {
distance: 0,
scale: 1,
baseWidth: null,
baseHeight: null,
scaleWidth: null,
scaleHeight: null
}
},
touchstartCallback: function(e) {
// if(e.touches.length == 1) return console.log('trigger start of two fingers')
// Pay attention to the beginning of the real code of touchstartCallback / / at the beginning, I didn't have this callback function. There will be a bug that zooms out and gets magnified in a moment / / when two fingers are put on, the distance will be initialized. let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.setData({
'touch.distance': distance,
})
},
touchmoveCallback: function(e) {
let touch = this.data.touch
// if(e.touches.length == 1) return console.log('two finger movement ')
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
// New condition let distance = math.sqrt (xmove * xmove + ymove * ymove);
let distanceDiff = distance - touch.distance;
let newScale = touch.scale + 0.005 * distanceDiff
// In order to prevent scaling too large, scale needs to be limited. Similarly, the minimum value is if (newscale > = 2){
newScale = 2
}
if(newScale <= 0.6) {
newScale = 0.6
}
let scaleWidth = newScale * touch.baseWidth
let scaleHeight = newScale * touch.baseHeight
// Assign new = > old this.setData({
'touch.distance': distance,
'touch.scale': newScale,
'touch.scaleWidth': scaleWidth,
'touch.scaleHeight': scaleHeight,
'touch.diff': distanceDiff
})
},
bindload: function(e) {
// The bindload api is the api of the < Image > component, similar to the onload attribute of < img >{
'touch.baseWidth': e.detail.width,
'touch.baseHeight': e.detail.height,
'touch.scaleWidth': e.detail.width,
'touch.scaleHeight': e.detail.height
})
}
})
The wxml file corresponds to the following, so there is no explanation:
<view class="container">
<view bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
<image src="../../resources/pic/cat.jpg" style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" bindload="bindload"></image>
</view>
</view>
Links: The implementation of finger zooming in wechat applets - Practical Course - applets community - wechat applets - wechat applets development community - applets Development Forum - wechat applets Alliance
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.