<template>
<div
class="tagBall"
ref="tagBall"
@mouseover.self.stop="mouseOver"
@mouseleave.self.stop="mouseLeave"
>
<div v-for="(item, index) in list" :key="index" class="tag">{{ item.name }}<span>({{ item.value }})</span></div>
</div>
</template>
<script setup>
import {reactive,ref,onMounted } from 'vue'
const list=reactive([{
"name": "3",
// 'symbol':'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAAAnCAYAAADn590lAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABiBJREFUeJztGjuy3DaM1G52n3MaV6njJq5c+Q526xwglQ+QtM4dXLmKm7h+lU/z9u1PCCiSEgQBILXvzcSaEWa0/IEASIAgpMXWrbAI2P7fAqxQB6uiFgKrohYCq6IWAquiFgKrohYCq6IWAhNFffh034TSO9cAPlhuc4mdW4Buzk/Y3oUS+3bQun0o8dn71t1B05Wh7w7n3iFuVyL+HusvUr1vY7lLeHuIdLu6i7x3gRd45NV2/DZBDg9ug2ObXk7vPMqGhXMQlwLYaLGvxb4W+y7Yd8H6GevnVJ6wPGF5RNwj4j5i+4jtUB4Q/5DrkNqI94jrffANloBtHHfp6ejE+inNu6DcJ5T11PP37orruOIetdjf/vn+F7hJUd++fskT26ivvoT0hHqTyk16OuW5uLn7pIQX5KHtn0k7l7usuFTuEr1dejKPzC/zptCmJ8h4SfVQXvE544wz9sQSNxLLE2IesU6fQzc2bP4hlWHsIY0dUvuRjOXnlJ5j4n0mMlyTbFlG9/3zx6lGFLBcnzf6gNQ9aUvWQfstHM6P8tJoSnNaN5XJp98BHyZ0KT0q75TWeFwCi85NMFLU75/u/b9fv8yZrzH2DMcSFIxSUwifn+m3TAZOSxouGaTGL5MANmatke9LNYwUlf3ly7d/NAVCeZUUj24sqfdGXtpwNxr33SnIpwGMmZxnBn7qe5eThjVl0LZ9CoDJXAbJE1XBxPWhkqgSJCG4BWWmEmPsg6CsEp1MY1jIeLtqLJGfKImupBwud+EkisD3wZIz05RkVWGiKLzggJ0o7rtL7ogrjS+c4zlhTGrTeRp/L+BpdxzlY53EOZ5AlpnenBaeAVowQd2a5AZLAUJyeVBaYCkIoXjWmODaTFwLPBFJks/yDjLu+Fbjst0WnhcISFEfx/cDirrBloClzdZkFWlCtBZJ6cYaQBq3QMOzIstZ7m+kKHzZ9X/FgCKfJAs0a7MshLtA6f7g9Cm+Buqi/TyjkAzRjvxsOlp7NowUFZSUggkNeJhZqyRuuRRfP6U57pvy0AypFLRovDiu4CFGOCV3KNHn9zt93yuC9cJbEziUhKsZ4zAIPw3KuYJqed5yN1jK0sAygJrIVwUr6qNhOrc0iXGtddREdzxi01ys5p64kQEbyzS0OY7haEqvCXIkvrNOUwDrPUrz189xajK+c9MNlTaydGdaipwTCnvBFvm9WnJ5dBhSV76DJYOpgpq/OTQXoPlhaz5tc+VP58ZbKrpAXwxSuKVqRsNPIbs38itFr6QnBALAK3wvbztRH/6+99/+mXzrq3Vn1GpKLkAKLnjd9aHEdKv4CaNRn+UBLLemuXMONa8Kua4rY6b6x1Hfu/5bn7J5I77SSSu5Rg6ERvjMBLpRZFU0nfryvemTyvLXwFKY/NxQWj834EGu6dd7E2pcH7Aq99VzohnDVYLtZsYOctiY6BQ1y521Gcp8K/jI/TXu7HnvKOE9qsbX1zKtdS/SPIofztbGyUZjRXyWLBouv9PqXJscIFH5Z4EWnpf8MBWE9lGckhuyFiLNtXDo4rXwV5KRfiotKVa6DiwDpcZSkqUIkz8O039SpXcMSVDpPYELzfGkzddcoBWuW27P2lRpTZriNFenyVkKam6P+kiihRY+1wYNVtj+ZOsS5OEnMyvyWuBj3S2StyjdM5ahPem+1D7K6iHzmPGc+0ZzmZrS5iwshxg+RYYhwLi6sUIJve7Qgxv+0AQyxOOxWgN1Al7pdaAaJh9lKwXKoF3cmkVpoT4F5S7oPap+hwAijCND7raoKOK9GlLOyDczZb4oa09YmGN5mCoQw/NXv73JlPo8OawAxO1q8d299SE3zcdULBxrcOyYpPEQrfLqo+vp0qYgpGlFnJDX16Vi+ZQehmN3uMV73KE90gm5fl1+n4/5fn0OIda3PqWm4RyPKss5hw3E89R4iG9VIQ+Q5fWFXL5rKi8Qcvq8O+F4l97lh3y+R5x7dDDK53vwMW/vkPqCbEGekNIWcgs3EHMLGwim0nTm1LlBiK8QrYs5h0HONu1T++vrN+Hd9XZFpbsq56Kt8APAmtK8EFgVtRBYFbUQWBW1EFgVtRD4D0Ci5ENb33GMAAAAAElFTkSuQmCC',
"value": 10,
}, {
"name": "2",
"value": 61,
}, {
"name": "6",
"value": 43,
}, {
"name": "3",
"value": 45,
}, {
"name": "6",
"value": 24,
}, {
"name": "12",
"value": 22,
}, {
"name": "43",
"value": 18,
}, {
"name": "23",
"value": 14,
}, {
"name": "432",
"value": 11,
}, {
"name": "423",
"value": 9,
}, {
"name": "42",
"value": 9,
}, {
"name": "2",
"value": 61,
}, {
"name": "6",
"value": 43,
}, {
"name": "3",
"value": 45,
}, {
"name": "6",
"value": 24,
}, {
"name": "12",
"value": 22,
}, {
"name": "43",
"value": 18,
}, {
"name": "23",
"value": 14,
}, {
"name": "432",
"value": 11,
}, {
"name": "423",
"value": 9,
}, {
"name": "42",
"value": 9,
},
])
const tagEle=ref("")
const paper=ref("")
const RADIUS=ref(105)//大小
const fallLength=ref(500)
const tags=ref([])
const angleX=ref(Math.PI / 500)
const angleY=ref(Math.PI / 500)
const CX=ref("")
const CY=ref("")
const EX=ref("")
const EY=ref("")
const timing=ref(null)
const tagBall=ref()
onMounted(() => {
tagEle.value = tagBall.value.children;
paper.value = tagBall.value;
CX.value = paper.value.offsetWidth / 2;
CY.value = paper.value.offsetHeight / 2;
EX.value =
paper.value.offsetLeft +
document.body.scrollLeft +
document.documentElement.scrollLeft;
EY.value =
paper.value.offsetTop +
document.body.scrollTop +
document.documentElement.scrollTop;
innit();
animate();
});
const innit=()=> {
for (var i = 0; i < tagEle.value.length; i++) {
var a, b;
var k = (2 * (i + 1) - 1) / tagEle.value.length - 1;
var a = Math.acos(k);
var b = a * Math.sqrt(tagEle.value.length * Math.PI);
var x = RADIUS.value * Math.sin(a) * Math.cos(b);
var y = RADIUS.value * Math.sin(a) * Math.sin(b);
var z = RADIUS.value * Math.cos(a);
tagEle.value[i].style.color =
"rgb(" +
parseInt(Math.random() * 255) +
"," +
parseInt(Math.random() * 255) +
"," +
parseInt(Math.random() * 255) +
")";
tags.value.push({ ele: tagEle.value[i], x, y, z });
}
};
const tag=({ ele, x, y, z })=>{
var scale = fallLength.value / (fallLength.value- z);
var alpha = (z + RADIUS.value) / (2 * RADIUS.value);
ele.style.fontSize = 15 * scale + "px";
ele.style.opacity = alpha + 0.5;
ele.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
ele.style.zIndex = parseInt(scale * 100);
ele.style.left = x + CX.value - ele.offsetWidth / 2 + "px";
ele.style.top = y + CY.value - ele.offsetHeight / 2 + "px";
}
const animate=()=>{
timing.value= setInterval(() => {
rotateX();
rotateY();
tags.value.forEach((item) => {
tag(item);
});
}, 20);
}
const rotateX=()=>{
var cos = Math.cos(angleX.value);
var sin = Math.sin(angleX.value);
tags.value.forEach((item) => {
var y1 = item.y * cos - item.z * sin;
var z1 = item.z * cos + item.y * sin;
item.y = y1;
item.z = z1;
});
}
const rotateY=()=>{
var cos = Math.cos(angleY.value);
var sin = Math.sin(angleY.value);
tags.value.forEach((item) => {
var x1 = item.x * cos - item.z * sin;
var z1 = item.z * cos + item.x * sin;
item.x = x1;
item.z = z1;
});
}
const mouseOver=(event)=>{
var x = event.clientX - EX.value - CX.value;
var y = event.clientY - EY.value - CY.value;
// console.log(x, y);
angleY.value = x * 0.000001;
angleX.value = y * 0.000001;
if (!timing.value) animate();
}
const mouseLeave=(event)=>{
var x = event.clientX - EX.value - CX.value;
var y = event.clientY - EY.value - CY.value;
angleY.value = x * 0.00001;
angleX.value = y * 0.00001;
}
const cheMouseOver=()=>{
clearInterval(timing.value);
timing.value = null;
}
</script>
<style lang='scss' scoped>
.tagBall {
width: 100%;
height: 90%;
position: relative;
overflow: hidden;
margin-top: 12px;
}
.tag {
display: block;
position: absolute;
left: 0px;
top: 0px;
color: #000;
text-decoration: none;
font-size: 15px;
font-family: "微软雅黑";
font-weight: bold;
span{
font-size: 12px;
}
}
</style>
3D词云球体旋转
最新推荐文章于 2024-08-09 07:00:15 发布