Vue移动端旋转Demo
如果对你有帮助，请点评。效果-请在移动端模式查看
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 #wrap {border: 1px solid aliceblue; width: 100%; height: 150px;} 10 #app {position: relative;width: 100px;height: 100px;border: 1px solid;} 11 .radios{position: absolute;right: -8px;bottom: -8px; width: 15px;height: 15px;border-radius: 50%;background-color: black} 12 </style> 13 </head> 14 <body> 15 <div id="wrap"> 16 <div id="app" ref="app"> 17 <span class="radios" @touchstart="rotateStart" @touchmove="rotateMove" @touchend="rotateEnd"></span> 18 </div> 19 </div> 20 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> 21 <script> 22 let rotate = 0; 23 const vm = new Vue({ 24 el: '#app', 25 mounted() { 26 }, 27 methods: { 28 rotateStart(e) { 29 e.preventDefault(); 30 const {clientX, clientY} = e.touches[0]; 31 const {centerX, centerY} = this.getCenterPoint(this.$refs.app); 32 x1 = clientX; 33 y1 = clientY; 34 anglePre = this.getAngle(centerX, centerY, clientX, clientY); 35 }, 36 rotateMove(e) { 37 e.preventDefault(); 38 const {clientY, clientX} = e.touches[0]; 39 const {centerX, centerY} = this.getCenterPoint(this.$refs.app); 40 angleNext = this.getAngle(centerX, centerY, clientX, clientY); 41 rotate += angleNext - anglePre; 42 43 this.$refs.app.style.transform = `rotate(${rotate}deg)`; 44 anglePre = angleNext; 45 }, 46 rotateEnd() {}, 47 getAngle(px, py, mx, my) { 48 let x = px - mx; 49 let y = py - my; 50 var c = 360 * Math.atan2(y, x) / (2 * Math.PI) 51 c = c <= -90 ? (360 + c) : c 52 return c + 90 53 }, 54 getCenterPoint(obj) { 55 const centerPointerLeft = obj.offsetLeft + obj.offsetWidth / 2; 56 const centerPointerTop = obj.offsetTop + obj.offsetHeight / 2; 57 return { centerX: centerPointerLeft, centerY: centerPointerTop }; 58 }, 59 getStyle(obj,name){ 60 if (obj.currentStyle) { 61 return obj.currentStyle[name]; 62 }else{ 63 return getComputedStyle(obj,false)[name]; 64 } 65 } 66 } 67 }) 68 </script> 69 </body> 70 </html>
参考资料：
https://blog.csdn.net/qq_37942845/article/details/86654671
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
