vue项目中用svg实现多彩滚动标签云

时间：2020-07-30 21:50:25 阅读：80 评论：0 收藏：0 [点我收藏+]

标签：load 滚动定义参考基础上 svg listen method create

原博文vue实现标签云效果。

https://www.cnblogs.com/libin-1/p/7077459.html

在这个博文的基础上，增加了svg文字随机变色，类似如下所示。

具体如何实现滚动标签云，请参考上方的链接，这里只补充彩色字体部分。

技术图片

主要靠代码中的:fill="colors[index]"随机确定词条颜色。

<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)‘ :fill="colors[index]">{{tag.text}}</text>
            </a>
        </svg>
</div>

在data中定义color数组。

data: {
      width:700,//svg宽度
      height:700,//svg高度
      tagsNum:20,//标签数量
      RADIUS:200,//球的半径
      speedX:Math.PI/360,//球一帧绕x轴旋转的角度
      speedY:Math.PI/360,//球-帧绕y轴旋转的角度
      tags: [],
      colors: [] //存储颜色
  }

在方法中定义随机取色功能。

methods: {

//滚动词条随机变色

changeColors(){

for(var i = 0;i<30;i++){

var r = Math.floor(Math.random() * 256);

var g = Math.floor(Math.random() * 256);

var b = Math.floor(Math.random() * 256);

this.colors[i] = "rgb(" + r + ‘,‘ + g + ‘,‘ + b + ")";

}

在created中调用changeColors方法

created() {
        this.changeColors();
    },

全部代码如下

var app = new Vue({

el: ‘#app‘,

data: {

width:700,

height:700,

tagsNum:20,

RADIUS:200,

speedX:Math.PI/360,

speedY:Math.PI/360,

tags: [],

colors: [] //存储颜色

computed:{

CX(){

return this.width/2;

CY(){

return this.height/2;

}

created(){

this.changeColors();

//初始化标签位置

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

changeColors(){ //随机变色

for(var i = 0;i < 30;i++){

var r = Math.floor(Math.random() * 256);

var g = Math.floor(Math.random() * 256);

var b = Math.floor(Math.random() * 256);

this.colors[i] = "rgb(" + r + ‘,‘ + g + ‘,‘ + b + ")";

}

})

</script>

vue项目中用svg实现多彩滚动标签云

标签：load 滚动定义参考基础上 svg listen method create

原文地址：https://www.cnblogs.com/cindy79/p/13406251.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行