vue 标签球滚动_vue3d球状旋转标签云

    <div id='app' >
        <svg :width='width' :height='height' @mousemove='listener($event)'>
            <a :href="tag.href" v-for='tag in tags'>
                <text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>{{tag.text}}</text>
            </a>
        </svg>
    </div>
1
2
3
4
5
6
7

      <script>
        var app = new Vue({
            el: '#app',
            data: {
                width:700,
                height:700,
                tagsNum:20,
                RADIUS:200,
                speedX:Math.PI/360,
                speedY:Math.PI/360,
                tags: []
            },
            computed:{
                CX(){
                    return this.width/2;
                },
                CY(){
                    return this.height/2;
                }
            },
            created(){//初始化标签位置
                let tags=[];
                for(let i = 0; i < this.tagsNum; i++){
                    let tag = {};
                    let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;
                    let a = Math.acos(k);
                    let b = a * Math.sqrt(this.tagsNum * Math.PI);
                    tag.text = i + 'tag';
                    tag.x = this.CX +  this.RADIUS * Math.sin(a) * Math.cos(b);
                    tag.y = this.CY +  this.RADIUS * Math.sin(a) * Math.sin(b); 
                    tag.z = this.RADIUS * Math.cos(a);
                    tag.href = 'https://imgss.github.io';
                    tags.push(tag);
                }
                this.tags = tags;
            },
            mounted(){//使球开始旋转
                setInterval(() => {
                    this.rotateX(this.speedX);
                    this.rotateY(this.speedY);
                }, 17)
            },
            methods: {
                rotateX(angleX){
                    var cos = Math.cos(angleX);
                    var sin = Math.sin(angleX);
                    for(let tag of this.tags){
                        var y1 = (tag.y- this.CY) * cos - tag.z * sin  + this.CY;
                        var z1 = tag.z * cos + (tag.y- this.CY) * sin;
                        tag.y = y1;
                        tag.z = z1;
                    } 
                },
                rotateY(angleY){
                    var cos = Math.cos(angleY);
                    var sin = Math.sin(angleY);
                    for(let tag of this.tags){
                        var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
                        var z1 = tag.z * cos + (tag.x-this.CX) * sin;
                        tag.x = x1;
                        tag.z = z1;
                    } 
                },
                listener(event){//响应鼠标移动
                    var x = event.clientX - this.CX;
                    var y = event.clientY - this.CY;
                    this.speedX = x*0.0001>0 ? Math.min(this.RADIUS*0.00002, x*0.0001) : Math.max(-this.RADIUS*0.00002, x*0.0001);
                    this.speedY = y*0.0001>0 ? Math.min(this.RADIUS*0.00002, y*0.0001) : Math.max(-this.RADIUS*0.00002, y*0.0001); 
                }
              }
          })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

借鉴于

https://blog.csdn.net/weixin_30347009/article/details/96275265?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6.pc_relevant_default&utm_relevant_index=8

感谢weixin_30347009