<template>
<div>
<div class="block_title" style="margin-bottom: 12px;"><span class="title">预警关键词</span></div>
<svg style="margin: auto" :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)">
{{ tag.text.name }}
</text>
</a>
</svg>
</div>
</template>
<script setup lang="ts">
import { reactive, computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const width = ref(380); //svg宽度
const height = ref(200); //svg高度
const tagsNum = ref(0); //标签数量
const RADIUS = ref(60); //球的半径
const speedX = ref(Math.PI / 360 / 1.5); //球一帧绕x轴旋转的角度
const speedY = ref(Math.PI / 360 / 1.5); //球-帧绕y轴旋转的角度
const tags:any = ref([]);
const data = ref([{ name: "测试" }, { name: "测试测试" }, { name: "1324" }, { name: "5555" }]);
const timer:any = ref(null);
const CX = computed(function () {
//球心x坐标
return width.value / 2 - 40;
});
const CY = computed(function () {
//球心y坐标
return height.value / 2;
});
// 初始化数据
function initData() {
//初始化标签位置
let tagsa = [];
tagsNum.value = data.value.length;
for (let i = 0; i < data.value.length; i++) {
let tag:any = {};
let k = -1 + (2 * (i + 1) - 1) / tagsNum.value;
let a = Math.acos(k);
let b = a * Math.sqrt(tagsNum.value * Math.PI); //计算标签相对于球心的角度
tag.text = data.value[i];
tag.x = CX.value + RADIUS.value * Math.sin(a) * Math.cos(b); //根据标签角度求出标签的x,y,z坐标
tag.y = CY.value + RADIUS.value * Math.sin(a) * Math.sin(b);
tag.z = RADIUS.value * Math.cos(a);
tag.id = i; // 给标签添加id
tagsa.push(tag);
}
tags.value = tagsa; //让vue替我们完成视图更新
}
// 纵向旋转
const rotateX = (angleX:any) => {
var cos = Math.cos(angleX);
var sin = Math.sin(angleX);
for (let tag of tags.value) {
var y1 = (tag.y - CY.value) * cos - tag.z * sin + CY.value;
var z1 = tag.z * cos + (tag.y - CY.value) * sin;
tag.y = y1;
tag.z = z1;
}
};
// 横向旋转
const rotateY = (angleY:any) => {
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
for (let tag of tags.value) {
var x1 = (tag.x - CX.value) * cos - tag.z * sin + CX.value;
var z1 = tag.z * cos + (tag.x - CX.value) * sin;
tag.x = x1;
tag.z = z1;
}
};
// 运动函数
const runTags = () => {
let timera = setInterval(() => {
rotateX(speedX.value);
rotateY(speedY.value);
}, 17);
timer.value = timera;
};
// 监听移入事件
const listenerMove = (e:any) => {
if (e.target.id) {
clearInterval(timer.value);
}
};
// 监听移出事件
const listenerOut = (e:any) => {
if (e.target.id) {
runTags();
}
};
// 点击事件
onMounted(() => {
initData();
runTags();
});
</script>
<style scoped>
.fontA {
fill: #02B997;
font-weight: bold;
}
.fontA:hover {
fill: plum;
cursor: pointer;
}
</style>
标签:文字,const,value,旋转,tag,随机,ref,sin,Math
From: https://www.cnblogs.com/JaneLifeBlog/p/17852154.html