您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue怎么實(shí)現(xiàn)標(biāo)簽云效果,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
最近想給自己的博客上加上一個(gè)3D標(biāo)簽云的效果,用來表示自己博客文章的分組,網(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)致性能問題,于是svg就成了一個(gè)不錯(cuò)的選擇。
這里實(shí)現(xiàn)的核心主要是參考了前面的那篇解析3D標(biāo)簽云的文章,作者給出了源碼,講解也比較通俗易懂。大體來說,整個(gè)代碼分三步:
根據(jù)標(biāo)簽的數(shù)量,算出每個(gè)標(biāo)簽在球面上分布的x,y,z坐標(biāo)
根據(jù)標(biāo)簽的坐標(biāo),將標(biāo)簽繪制出來,x,y坐標(biāo)通過標(biāo)簽的位置來表示,z坐標(biāo)通過標(biāo)簽字體的大小和透明度來表示
通過函數(shù)根據(jù)球的旋轉(zhuǎn)角速度不斷計(jì)算標(biāo)簽新的x,y坐標(biāo),制造出旋轉(zhuǎn)效果
通過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
來渲染標(biāo)簽,每個(gè)標(biāo)簽上綁定了x,y,font-size(用來表現(xiàn)z軸),fill-opacity(都是與z坐標(biāo)有關(guān)的表達(dá)式,用來表現(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ǔ),下面我們來初始化標(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)的圖像了:
下面就是通過改變每一個(gè)tag的x,y的值來使球旋轉(zhuǎn)起來;實(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)簽原來的坐標(biāo)和球旋轉(zhuǎn)的角度算出新的坐標(biāo),最后在mounted鉤子下面,寫一個(gè)animate函數(shù),不斷調(diào)用這兩個(gè)函數(shù),實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
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(){//初始化標(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(){//使球開始旋轉(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
關(guān)于“vue怎么實(shí)現(xiàn)標(biāo)簽云效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。