<template>
  <div>
    <svg style="background-color: black" :width="width" :height="height">
      <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`">
        <text
          :id="tag.id"
          :x="tag.x"
          :y="tag.y"
          :font-size="20 * (600 / (600 - tag.z))"
          :fill-opacity="(400 + tag.z) / 600"
          @mousemove="listenerMove($event)"
          @mouseout="listenerOut($event)"
          @click="clickToPage"
        >
          {{ tag.text }}
        </text>
      </a>
    </svg>
  </div>
</template>

<script>
export default {
  name: "word-cloud",
  //數(shù)據(jù)绵载，寬丈牢，高庭呜，半徑澎羞，半徑一般位寬高的一半。
  // props: ["data", "width", "height", "RADIUS"],
  data() {
    return {
      width: 600, //svg寬度
      height: 600, //svg高度
      tagsNum: 0, //標(biāo)簽數(shù)量
      RADIUS: 300, //球的半徑
      speedX: Math.PI / 360 / 1.5, //球一幀繞x軸旋轉(zhuǎn)的角度
      speedY: Math.PI / 360 / 1.5, //球-幀繞y軸旋轉(zhuǎn)的角度
      tags: [],
      data: [
        "金晨",
        "昆凌",
        "李冰冰",
        "劉詩詩",
        "劉雯",
        "劉亦菲",
        "林心如",
        "林志玲",
        "李湘",
        "李亞男",
        "李若彤",
        "李沁",
        "李嘉欣",
        "林依晨",
        "劉嘉玲",
        "閏妮",
        "李宇春",
        "李晟",
        "羅震環(huán)",
        "劉雨欣",
        "李波兒",
        "黎姿",
        "張敏",
        "梁小冰",
        "黎美嫻",
        "李彩樺",
        "林允兒",
        "米雪",
        "李菲兒",
        "婁藝瀟",
        "李金銘",
        "李萌萌",
      ],
      timer: null,
    };
  },
  computed: {
    CX() {
      //球心x坐標(biāo)
      return this.width / 2;
    },
    CY() {
      //球心y坐標(biāo)
      return this.height / 2;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    // 初始化數(shù)據(jù)
    initData() {
      //初始化標(biāo)簽位置
      let tags = [];
      this.tagsNum = this.data.length;
      for (let i = 0; i < this.data.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); //計(jì)算標(biāo)簽相對(duì)于球心的角度
        tag.text = this.data[i];
        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.id = i; // 給標(biāo)簽添加id
        tags.push(tag);
        // console.log(tag);
      }
      this.tags = tags; //讓vue替我們完成視圖更新
    },
    // 縱向旋轉(zhuǎn)
    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;
      }
    },
    // 橫向旋轉(zhuǎn)
    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;
      }
    },
    // 運(yùn)動(dòng)函數(shù)
    runTags() {
      if (typeof this.timer === "number") {
        clearInterval(this.timer);
        this.timer = null;
      }
      let timer = setInterval(() => {
        this.rotateX(this.speedX);
        this.rotateY(this.speedY);
      }, 17);
      this.timer = timer;
    },
    // 監(jiān)聽移入事件
    listenerMove(e) {
      if (e.target.id) {
        clearInterval(this.timer);
      }
    },
    // 監(jiān)聽移出事件
    listenerOut(e) {
      if (e.target.id) {
        this.runTags();
      }
    },
    // 點(diǎn)擊事件
    clickToPage() {},
  },
  mounted() {
    this.runTags();
  },
};
</script>


<style scoped>
.fontA {
  fill: #60cae9;
  font-weight: bold;
}
.fontA:hover {
  fill: #ffffff;
  cursor: pointer;
}
</style>