Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to use js to achieve finger zoom picture function" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use js to achieve finger zoom picture function" article.

Demand:

Zoom the picture with your fingers. In fact, before realizing this requirement, I didn't know that there was a native api in Wechat official account and WeChat Mini Programs, and this api was also used in Wechat moments. Wx.previewImage, that's it. Preview the picture. Except that you can't preview the pictures of the local computer in the development environment, the pictures of your real phone and the pictures on the http server can be previewed, and the zooming function is smooth.

Add the source code first, 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) {/ / single finger zooming starts Also do not do any processing if (e.touches.length = = 1) return console.log ('two hands trigger start') / / pay attention to the start of the touchstartCallback real code / / at the beginning I do not have this callback function, there will be zoomed out when there is an instant magnification process of bug / / initialize the distance when two fingers are placed on it. 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 / / single finger zoom We don't do anything if (e.touches.length = = 1) return console.log (' hands refer to motion') let xMove = e.touches [1] .clientX-e.touches [0] .clientX Let yMove = e.touches [1] .clientY-e.touches [0] .clientY; / / New ditance let distance = Math.sqrt (xMove * xMove + yMove * yMove); let distanceDiff = distance-touch.distance Let newScale = touch.scale + 0.005 * distanceDiff / / to prevent scaling too large, scale needs to limit The same minimum is if (newScale > = 2) {newScale = 2} if (newScale's old this.setData ({'touch.distance': distance,' touch.scale': newScale, 'touch.scaleWidth': scaleWidth,' touch.scaleHeight': scaleHeight, 'touch.diff': distanceDiff})} Bindload: function (e) {/ / bindload this api is the component's api-like onload attribute this.setData ({'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:

The above is about "how to use js to achieve finger zoom picture function" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.