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

posted @ 2020-08-14 10:16  -e  阅读(387)  评论(0)    收藏  举报