Vue+3D云字符

Vue+3D云字符

问题：PO说系统首页加个3D云字符，我寻思这也没搞过呀；于是就去大哥的博客学习了一下。当然我也是进行了一扭扭的优化，总结的也很简单粗暴，翠花上代码：

html:

<div class="evalu-chan">
     <div class="evalu-chan-titl">
         <i></i><span>3D字符云</span>
     </div>
     <div class="evalu-line">
          <svg :width='width' :height='height' @mousemove='listener($event)'>
              <a :href="tag.href" v-for='(tag,index) in tagList' :key="index">  
                  <text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill- 
                        opacity='((400+tag.z)/600)' style="fill:#e78c9e;">{{tag.text}}  
                        //这里的style="fill:#e78c9e;"是改变文字颜色的哦
                  </text>
              </a>
          </svg>
     </div>
</div>

data:

      //3D字符云
      width:321*(window.innerWidth / 1440),
      height:250*(window.innerWidth / 1440),
      tagsNum:10,
      RADIUS:170,
      speedX:Math.PI/360,
      speedY:Math.PI/360,
      tagList: [],

computed:

computed:{
    CX(){
        return this.width/2;
    },
    CY(){
        return this.height/2;
    }
  },

mounted: 

//球转起来了
const timer = setInterval(() =>{                    
      this.rotateX(this.speedX);
      this.rotateY(this.speedY);
      this.rotateX1(this.speedX);
      this.rotateY1(this.speedY);
      }, 100);

methods:

//3D字符云
    rotateX(angleX){
        var cos = Math.cos(angleX);
        var sin = Math.sin(angleX);
        for(let tag of this.tagList){
            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.tagList){
        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;
      } 
    },

//这个方法在html代码被调用了，你康康
    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); 
    },

//这是个方法
    getGood() {
      const _this = this
      axios.get('/ceshi',{params: {code: 1}})
        .then(function(response) {
          if(response.data.data.length>=10){
            _this.tagList = response.data.data.slice(0,10)
          }else{
            _this.tagList = response.data.data
          }
          let tags=[];
          for(let i = 0; i < _this.tagList.length; 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 = _this.tagList[i].appraisa_text;
              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.tagList = tags;
          if (_this.tagList.length === 0) {
            _this.dataTip1 = '暂无数据'
          } else {
            _this.dataTip1 = ''
          }
        })
    },

视频在此，由于是测试数据，暂时不太好看；当数据丰富的时候超好；

 如有侵权，联系我删除。大佬高台贵手 转载自：https://www.cnblogs.com/imgss/p/tagcloud.html