溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)利用vue如何實(shí)現(xiàn)一個(gè)云標(biāo)簽效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
標(biāo)簽初始化
這里實(shí)現(xiàn)的核心主要是參考了前面的那篇解析3D標(biāo)簽云的文章，作者給出了源碼，講解也比較通俗易懂。大體來(lái)說(shuō)，整個(gè)代碼分三步：
貼上代碼:
<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.href = 'https://imgss.github.io';//給標(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.href = 'https://imgss.github.io';
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
總結(jié)
vue的數(shù)據(jù)綁定可以減少我們對(duì)dom的操作，而將關(guān)注點(diǎn)放在邏輯上面，vue構(gòu)造函數(shù)提供的幾個(gè)選項(xiàng)可以幫助我們更好的組織代碼
看完上述內(nèi)容，你們對(duì)利用vue如何實(shí)現(xiàn)一個(gè)云標(biāo)簽效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼