vue實現(xiàn)標簽云效果的方法詳解
更新時間：2019年08月28日 11:34:14 作者：最騷的就是你
這篇文章主要介紹了vue實現(xiàn)標簽云效果的方法,結(jié)合實例形式詳細分析了vue標簽云的實現(xiàn)技巧與相關(guān)操作注意事項,需要的朋友可以參考下
本文實例講述了vue實現(xiàn)標簽云效果的方法。分享給大家供大家參考，具體如下：
閑扯兩句
最近想給自己的博客上加上一個3D標簽云的效果，用來表示自己博客文章的分組，網(wǎng)上找到了canvas實現(xiàn)的，還有a元素實現(xiàn)的解析3D標簽云，我想讓標簽可以選擇和點擊，又不想在標簽數(shù)量較多時操作a標簽導致性能問題，于是svg就成了一個不錯的選擇。
標簽初始化
這里實現(xiàn)的核心主要是參考了前面的那篇解析3D標簽云的文章，作者給出了源碼，講解也比較通俗易懂。大體來說，整個代碼分三步：
- 根據(jù)標簽的數(shù)量，算出每個標簽在球面上分布的x,y,z坐標
- 根據(jù)標簽的坐標，將標簽繪制出來，x,y坐標通過標簽的位置來表示，z坐標通過標簽字體的大小和透明度來表示
- 通過函數(shù)根據(jù)球的旋轉(zhuǎn)角速度不斷計算標簽新的x,y坐標，制造出旋轉(zhuǎn)效果
- 通過mousemove事件，根據(jù)鼠標坐標值，改變球旋轉(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來渲染標簽，每個標簽上綁定了x,y,font-size(用來表現(xiàn)z軸),fill-opacity(都是與z坐標有關(guān)的表達式，用來表現(xiàn)z軸),及text;
data: {
width:700,//svg寬度
height:700,//svg高度
tagsNum:20,//標簽數(shù)量
RADIUS:200,//球的半徑
speedX:Math.PI/360,//球一幀繞x軸旋轉(zhuǎn)的角度
speedY:Math.PI/360,//球-幀繞y軸旋轉(zhuǎn)的角度
tags: []
}
computed:{
CX(){//球心x坐標
return this.width/2;
},
CY(){//球心y坐標
return this.height/2;
}
},
做好了上面的基礎(chǔ)，下面我們來初始化標簽數(shù)據(jù)：
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);//根據(jù)標簽角度求出標簽的x,y,z坐標
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;//讓vue替我們完成視圖更新
},
到了這里，我們就算了算坐標，vue完成了視圖更新的工作，這時基本上就可以得到一副靜態(tài)的圖像了：
下面就是通過改變每一個tag的x,y的值來使球旋轉(zhuǎn)起來；實現(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;
}
},
這兩個函數(shù)就是根據(jù)標簽原來的坐標和球旋轉(zhuǎn)的角度算出新的坐標，最后在mounted鉤子下面，寫一個animate函數(shù)，不斷調(diào)用這兩個函數(shù)，實現(xiàn)旋轉(zhuǎn)動畫
mounted(){//使球開始旋轉(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(){//初始化標簽位置
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(){//使球開始旋轉(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){//響應鼠標移動
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>
總結(jié)
vue的數(shù)據(jù)綁定可以減少我們對dom的操作，而將關(guān)注點放在邏輯上面，vue構(gòu)造函數(shù)提供的幾個選項可以幫助我們更好的組織代碼
希望本文所述對大家vue.js程序設計有所幫助。
相關(guān)文章
這篇文章主要介紹了vue的圖片需要用require的方式進行引入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
vue項目實現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
VUE.js實現(xiàn)動態(tài)設置輸入框disabled屬性
今天小編就為大家分享一篇VUE.js實現(xiàn)動態(tài)設置輸入框disabled屬性，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue項目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細介紹，感興趣的朋友一起看看吧2022-08-08
今天小編就為大家分享一篇vue 使用鼠標滾動加載數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁的示例代碼
本文主要介紹了Vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue中使用cookies和crypto-js實現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實現(xiàn)密碼的加密與記住密碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。2018-10-10
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項目中使用 webpack 打包后升級，用戶反饋使用瀏覽器（chrome 45）訪問白屏。經(jīng)過排查發(fā)現(xiàn)：由于 chrome 45 無法兼容 ES6 語法導致的，接下來給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02