快捷導(dǎo)航

vue實(shí)現(xiàn)標(biāo)簽云效果的示例

更新時(shí)間：2020年11月09日 15:06:19 作者：nobody-junior

這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

閑扯兩句

最近想給自己的博客上加上一個(gè)3D標(biāo)簽云的效果，用來(lái)表示自己博客文章的分組，網(wǎng)上找到了canvas實(shí)現(xiàn)的，還有a元素實(shí)現(xiàn)的解析3D標(biāo)簽云，我想讓標(biāo)簽可以選擇和點(diǎn)擊，又不想在標(biāo)簽數(shù)量較多時(shí)操作a標(biāo)簽導(dǎo)致性能問(wèn)題，于是svg就成了一個(gè)不錯(cuò)的選擇。

標(biāo)簽初始化

這里實(shí)現(xiàn)的核心主要是參考了前面的那篇解析3D標(biāo)簽云的文章，作者給出了源碼，講解也比較通俗易懂。大體來(lái)說(shuō)，整個(gè)代碼分三步：

根據(jù)標(biāo)簽的數(shù)量，算出每個(gè)標(biāo)簽在球面上分布的x,y,z坐標(biāo)
根據(jù)標(biāo)簽的坐標(biāo)，將標(biāo)簽繪制出來(lái)，x,y坐標(biāo)通過(guò)標(biāo)簽的位置來(lái)表示，z坐標(biāo)通過(guò)標(biāo)簽字體的大小和透明度來(lái)表示
通過(guò)函數(shù)根據(jù)球的旋轉(zhuǎn)角速度不斷計(jì)算標(biāo)簽新的x,y坐標(biāo)，制造出旋轉(zhuǎn)效果
通過(guò)mousemove事件，根據(jù)鼠標(biāo)坐標(biāo)值，改變球旋轉(zhuǎn)的角速度，做出交互效果

貼上代碼:

  <div id='app' >
    <svg :width='width' :height='height' @mousemove='listener($event)'>
      <a :href="tag.href" rel="external nofollow" 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>

在模板中，借用指令v-for來(lái)渲染標(biāo)簽，每個(gè)標(biāo)簽上綁定了x,y,font-size(用來(lái)表現(xiàn)z軸),fill-opacity(都是與z坐標(biāo)有關(guān)的表達(dá)式，用來(lái)表現(xiàn)z軸),及text;

 data: {
   width:700,//svg寬度
   height:700,//svg高度
   tagsNum:20,//標(biāo)簽數(shù)量
   RADIUS:200,//球的半徑
   speedX:Math.PI/360,//球一幀繞x軸旋轉(zhuǎn)的角度
   speedY:Math.PI/360,//球-幀繞y軸旋轉(zhuǎn)的角度
   tags: []
 }
 computed:{
   CX(){//球心x坐標(biāo)
     return this.width/2;
   },
   CY(){//球心y坐標(biāo)
     return this.height/2;
   }
 },

做好了上面的基礎(chǔ)，下面我們來(lái)初始化標(biāo)簽數(shù)據(jù)：

 created(){//初始化標(biāo)簽位置
   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)//計(jì)算標(biāo)簽相對(duì)于球心的角度
     tag.text = i + 'tag';
     tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);//根據(jù)標(biāo)簽角度求出標(biāo)簽的x,y,z坐標(biāo)
     tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b); 
     tag.z = this.RADIUS * Math.cos(a);
     tag.;//給標(biāo)簽添加鏈接
     tags.push(tag);
   }
   this.tags = tags;//讓vue替我們完成視圖更新
 },

到了這里，我們就算了算坐標(biāo)，vue完成了視圖更新的工作，這時(shí)基本上就可以得到一副靜態(tài)的圖像了：

下面就是通過(guò)改變每一個(gè)tag的x,y的值來(lái)使球旋轉(zhuǎn)起來(lái)；實(shí)現(xiàn)方法是rotateX,rotateY函數(shù)：

  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;
    }
  },

這兩個(gè)函數(shù)就是根據(jù)標(biāo)簽原來(lái)的坐標(biāo)和球旋轉(zhuǎn)的角度算出新的坐標(biāo)，最后在mounted鉤子下面，寫(xiě)一個(gè)animate函數(shù)，不斷調(diào)用這兩個(gè)函數(shù)，實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)

  mounted(){//使球開(kāi)始旋轉(zhuǎn)
    setInterval(() => {
      this.rotateX(this.speedX);
      this.rotateY(this.speedY);
    }, 17)
  },

全部代碼如下:

   <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(){//初始化標(biāo)簽位置
        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.;
          tags.push(tag);
        }
        this.tags = tags;
      },
      mounted(){//使球開(kāi)始旋轉(zhuǎn)
        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){//響應(yīng)鼠標(biāo)移動(dòng)
          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>

完整demo

vue

no vue