首页 > 其他分享 >随机文字旋转

随机文字旋转

时间:2023-11-23 17:55:51浏览次数:31  
标签:文字 const value 旋转 tag 随机 ref sin Math

<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

相关文章

  • c++小程序/随机产生100以内的一个自然数,给出7次机会猜测数的大小
    一、随机产生100以内的一个自然数,给出7次机会猜测数的大小要求:1、 如果猜对了,提示:“真聪明,您猜对了!”,并退出程序2、 如果猜得数比随机数大,给出提示“你猜的数太大了”3、 如果猜得数比随机数小,提示“您猜的数太小了”,如果超出七次没有猜对,提示“很遗憾,您没有猜对”,并退出程序......
  • 【Unity】伪随机算法之PRD
    概念在游戏制作中通常会有暴击等概率性事件,有两种方法实现,一种就是正常使用随机算法实现,真随机受人品影响,对游戏体验极不友好,所以就提出了伪随机概念,常见的就是PRD算法。P(N)=C*NP为最终概率C为概率增量N为次数随着攻击次数增加概率增加,当暴击时将N重置为1,没有......
  • 市场监督管理局配备AEE K1执法记录仪,让检查随机不随意
    为了更好的贯彻市政府行政执法的“双随机、一公开”,提高执行活动的透明度和司法公信力,维护当事人及执法人员的合法权益,安徽某市场监管局为基层所、执法中队的一线执法人员共配发了70台AEEDSJ-K1执法记录仪。为确保“双随机、一公开”监管在检查环节合规合法、公正文明,抽查做到全程......
  • C#使用随机数生成元素不重复的数组
    通过for与while的嵌套做了一个排除相同数字的审查机制,如果生成了数组中已有的数字就重新生成一个数字,继续循环排查,直到生成的数字是数组中不存在的数字数组长度不能超过随机数范围否则会死循环usingSystem;namespacenotRepeat{classProgram{staticvo......
  • js常见操作,获取随机数、定时器
    一、js获取随机数的方法1、Math.random()方法,该方法返回一个大于等于0且小于1的伪随机浮点数。如果需要获取特定范围内的随机数,可以使用数字运算来调整结果。//获取0到1之间的随机数varrandomNum=Math.random();//获取0到10之间的随机整数varrandomInt=Math.floor(Math.ra......
  • (链表)20-旋转链表
    1/**2*Definitionforsingly-linkedlist.3*publicclassListNode{4*intval;5*ListNodenext;6*ListNode(){}7*ListNode(intval){this.val=val;}8*ListNode(intval,ListNodenext){this.val=val;......
  • 猜0-100的随机数字
    importjava.util.Random;importjava.util.Scanner;publicclassHelloWorld{publicstaticvoidmain(String[]args){//题目生成0-100的随机数字。Randomrandom=newRandom();inti=random.n......
  • 结论:绕固定坐标轴旋转与绕自身坐标轴旋转一致性
    总结一下就是,如果是坐标系或者向量绕着固定的坐标轴旋转,相当于每转一次产生一个旋转矩阵,然后按旋转顺序将这些旋转矩阵左乘起来.如果是坐标系或者向量绕着自身的坐标轴旋转,相当于每转一次产生一个旋转矩阵,然后按旋转顺序将这些矩阵右乘起来.要注意后者的每一步旋转产生的旋转......
  • (链表)18-随机链表的复制
    1/*2classNode{3intval;4Nodenext;5Noderandom;67publicNode(intval){8this.val=val;9this.next=null;10this.random=null;11}12}13*/1415classSolution{16public......
  • 代码随想录算法训练营第八天 | ● 344.反转字符串 ● 541. 反转字符串II ● 卡码网:54
    今日学习内容●344.反转字符串varreverseString=function(s){//returns.reverse();for(leti=0,j=s.length-1;i<Math.floor(s.length/2);i++,j--){[s[i],s[j]]=[s[j],s[i]]}returns};●541.反转字符串IIvarre......