vue實現標籤雲效果

閒扯兩句

最近想給本身的博客上加上一個3D標籤雲的效果，用來表示本身博客文章的分組，網上找到了canvas實現的，還有a元素實現的解析3D標籤雲，我想讓標籤能夠選擇和點擊，又不想在標籤數量較多時操做a標籤致使性能問題，因而svg就成了一個不錯的選擇。

標籤初始化

這裏實現的核心主要是參考了前面的那篇解析3D標籤雲的文章，做者給出了源碼，講解也比較通俗易懂。大致來講，整個代碼分三步：

• 根據標籤的數量，算出每一個標籤在球面上分佈的x,y,z座標
• 根據標籤的座標，將標籤繪製出來，x,y座標經過標籤的位置來表示，z座標經過標籤字體的大小和透明度來表示
• 經過函數根據球的旋轉角速度不斷計算標籤新的x,y座標，製造出旋轉效果
• 經過mousemove事件，根據鼠標座標值，改變球旋轉的角速度，作出交互效果

貼上代碼:

<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>

在模板中，借用指令v-for來渲染標籤，每一個標籤上綁定了x,y,font-size(用來表現z軸),fill-opacity(都是與z座標有關的表達式，用來表現z軸),及text;

data: { width:700,//svg寬度 height:700,//svg高度 tagsNum:20,//標籤數量 RADIUS:200,//球的半徑 speedX:Math.PI/360,//球一幀繞x軸旋轉的角度 speedY:Math.PI/360,//球-幀繞y軸旋轉的角度 tags: [] } computed:{ CX(){//球心x座標 return this.width/2; }, CY(){//球心y座標 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);//根據標籤角度求出標籤的x,y,z座標 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;//讓vue替咱們完成視圖更新 },

到了這裏，咱們就算了算座標，vue完成了視圖更新的工做，這時基本上就能夠獲得一副靜態的圖像了：

下面就是經過改變每個tag的x,y的值來使球旋轉起來；實現方法是rotateX,rotateY函數：

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

這兩個函數就是根據標籤原來的座標和球旋轉的角度算出新的座標，最後在mounted鉤子下面，寫一個animate函數，不斷調用這兩個函數，實現旋轉動畫

mounted(){//使球開始旋轉 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(){//初始化標籤位置 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>

完整demo · vue · no vue

總結

vue的數據綁定能夠減小咱們對dom的操做，而將關注點放在邏輯上面，vue構造函數提供的幾個選項能夠幫助咱們更好的組織代碼