3D旋转词云

最新推荐文章于 2024-04-19 23:16:02 发布

丁北屿

最新推荐文章于 2024-04-19 23:16:02 发布

阅读量1.5k

点赞数

分类专栏： vs code 前端文章标签： html html5 vue.js css css3

本文链接：https://blog.csdn.net/qq_44844370/article/details/124173273

版权

本文介绍如何在Vue项目中创建一个3D旋转的词云展示，利用HTML5、CSS3和Vue.js的特性，详细探讨实现过程和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3D旋转词云（vue）

<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",
  //数据，宽，高，半径，半径一般位宽高的一半。

最低0.47元/天解锁文章