How to realize the drag, zoom and rotate gestures of Mini Program
This article mainly introduces "how to realize the drag, zoom and rotate gestures of Mini Program". In daily operation, I believe many people have doubts about how to realize the gestures of drag, zoom and rotation of Mini Program. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about how to realize the gestures of drag, zoom and rotation of Mini Program. Next, please follow the editor to study!
Wxml section:
{{msg}}
Wxss section:
Page {width: 100%; height: 100%; background: # ffffff;}. Touch-container {width: 100%; height: 100%; padding-top: 0.1px;}. Msg {width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 30rpx; color: # 6666;} .img {position: absolute; width: 690rpx; height: 300rpx; transform-origin: center center;}
Js section:
Var canOnePointMove = falsevar onePoint = {x: 0, y: 0} var twoPoint = {x1: 0, y1: 0, x2: 0, y2: 0} Page ({data: {msg:', src: 'http://img01.taopic.com/150508/318763-15050PU9398.jpg', width: 0, height: 0, left: 375, top: 600, scale: 1, rotate: 0} / / close pull-up loading onReachBottom: function () {return}, bindload: function (e) {var that = this var width = e.detail.width var height = e.detail.height if (width > 750) {height = 750 * height / width width = 750} if (height > 1200) {width = 1200 * width / height height = 1200} that.setData ({width: width, height: height})} Touchstart: function (e) {var that = this if (e.touches.length)
< 2) { canOnePointMove = true onePoint.x = e.touches[0].pageX * 2 onePoint.y = e.touches[0].pageY * 2 }else { twoPoint.x1 = e.touches[0].pageX * 2 twoPoint.y1 = e.touches[0].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 } }, touchmove: function(e){ var that = this if (e.touches.length < 2 && canOnePointMove) { var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y that.setData({ msg: '单点移动', left: that.data.left + onePointDiffX, top: that.data.top + onePointDiffY }) onePoint.x = e.touches[0].pageX * 2 onePoint.y = e.touches[0].pageY * 2 }else if (e.touches.length >1) {var preTwoPoint = JSON.parse (JSON.stringify (twoPoint)) twoPoint.x1 = e.touches [0] .pageX * 2 twoPoint.y1 = e.touches [0] .pageY * 2 twoPoint.x2 = e.touches [1] .pageX * 2 twoPoint.y2 = e.touches [1] .pa geY * 2 / / calculation Angle Rotation (priority) var perAngle = Math.atan ((preTwoPoint.y1-preTwoPoint.y2) / (preTwoPoint.x1-preTwoPoint.x2)) * 180/Math.PI var curAngle = Math.atan ((twoPoint.y1-twoPoint.y2) / (twoPoint.x1-twoPoint.x2)) * 180/Math.PI if (Math.abs (perAngle-curAngle) > 1) {that.setData ({msg: 'rotation' Rotate: that.data.rotate + (curAngle-perAngle)})} else {/ / calculate the distance Zoom var preDistance = Math.sqrt (Math.pow ((preTwoPoint.x1-preTwoPoint.x2), 2) + Math.pow ((preTwoPoint.y1-preTwoPoint.y2), 2)) var curDistance = Math.sqrt (Math.pow ((twoPoint.x1-twoPoint.x2), 2) + Math.pow ((twoPoint.y1-twoPoint.y2), 2)) that.setData ({msg: 'zoom' Scale: that.data.scale + (curDistance-preDistance) * 0.005}), touchend: function (e) {var that = this canOnePointMove = false}})
Json section:
"navigationBarTitleText": "recognize gestures", "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "# FFF", "disableScroll": true, this ends the study on "how to implement the drag, zoom and rotate gestures of Mini Program". I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
