首页 > 其他 > 详细

react球形文字旋转标签

时间:2019-02-12 15:57:10      阅读:45      评论:0      收藏:0      [点我收藏+]

标签:ner   from   const   arr   ext   ont   Y轴   reat   The   

/*
* 球形文字旋转标签模块
*
*/
import React, {Component, PropTypes} from "react";
import ReactDOM from "react-dom";
class TagCloud extends Component {
constructor(props) {
super(props);
let rotateAngleXbase = 50;
let rotateAngleYbase = 50;
this.state = {
optionData: ["房价放假","通缉犯",‘反季节‘,‘卡夫卡‘,‘可课哦‘,‘解放军‘
,"通缉犯",‘反季节‘,‘卡夫卡‘,‘可课哦‘,‘解放军‘,"通缉犯",‘反季节‘,‘卡夫卡‘,‘可课哦‘,‘解放军‘
], //this.props.TagCloudData,
timer: null,
setting: {
radius: 500,
maxFont: 100,
color: true, //设置标签颜色,设置为true为随机颜色,也可以设置其他色值
// rotateAngleXbase: 150,//默认旋转速度基数,数越小速度越快
// rotateAngleYbase: 150,
hover: true,//是否开启悬浮联动
},
rotateAngleX:Math.PI / rotateAngleXbase, //默认旋转速度基数,数越小速度越快
rotateAngleY:Math.PI / rotateAngleYbase, //默认旋转速度基数,数越小速度越快
}
}

 

//绕y轴旋转的函数
rotateY(tag){
const {rotateAngleY} = this.state;
let cos = Math.cos(rotateAngleY);
let sin = Math.sin(rotateAngleY);
let x1 = tag.z * sin + tag.x * cos;
let z1 = tag.z * cos - tag.x * sin;
tag.x = x1;
tag.z = z1;
}

 

//绕x轴旋转的函数
rotateX(tag){
const {rotateAngleX} = this.state;
let cos = Math.cos(rotateAngleX);
let sin = Math.sin(rotateAngleX);
let y1 = tag.y * cos - tag.z * sin;
let z1 = tag.y * sin + tag.z * cos;
tag.y = y1;
tag.z = z1;
}

 

//设置每个标签的坐标位置和字体大小以及透明度
setPosition(tag, r, maxFont){
let tagContainer = document.getElementById(‘tag‘);
tag.ele.style.transform = `translate( ${(tag.x + tagContainer.offsetWidth / 2 - tag.ele.offsetWidth / 2)/320}rem,
${(tag.y + tagContainer.offsetHeight / 2 - tag.ele.offsetHeight / 2)/320}rem)`;
tag.ele.style.opacity = tag.z / r / 2 + 0.7;
tag.ele.style.fontSize = (tag.z / r / 2 + 0.5) * maxFont + "px";
// console.log(tag.ele.style.fontSize,"tag.ele.style.fontSize")
}
innit(){
const setting = this.state.setting;
let tagContainer = document.getElementById(‘tag‘);
let tags = [];
let optionData = this.state.optionData;
if(Array.isArray(optionData) && optionData.length>0){
for (let i = 0; i<optionData.length; i++) {
let tag = document.createElement("a");
tag.innerText = optionData[i];
tag.setAttribute("class", "tag");
tag.style.cssText += "position: absolute; left: 0; top: 0; text-decoration: none; font-weight: bolder;";
tagContainer.appendChild(tag);
tags.push(tag);
};
// tagContainer.appendChild(tagGroup);
//让标签元素相对标签云元素绝对定位
tagContainer.style.position = "relative";
}
let allTag = [];//标签数组
for (let i = 0, length = tags.length; i < length; i++) {
if (setting.color === true) {
tags[i].style.color = "#2493FC";
} else {
tags[i].style.color = setting.color;
}
// 获取球面上均匀的点的经纬度
let angleX = Math.acos((2 * (i + 1) - 1) / length - 1);
let angleY = angleX * Math.sqrt(length * Math.PI);
//根据经纬度获取点的坐标,球中心的点坐标是 
let x = setting.radius * Math.sin(angleX) * Math.cos(angleY);
let y = setting.radius * Math.sin(angleX) * Math.sin(angleY);
let z = setting.radius * Math.cos(angleX);
// console.log(x,y,z,"我哦")
//每个标签对象都有四对值
let tag = {
x: x,
y: y,
z: z,
ele: tags[i]
};
allTag.push(tag);
}
// console.log(allTag,"我哦")
//开始转动的函数;
this.timer = setInterval(() => {
for (let i = 0; i < tags.length; i++) {
this.rotateX(allTag[i]);
this.rotateY(allTag[i]);
this.setPosition(allTag[i], setting.radius, setting.maxFont);
}
}, 100);
 
}
componentDidMount(){
this.innit();
}

 

componentWillUnmount() {
this.timer && clearInterval(this.timer);
}
render() {
return (
<div id="tag" style={{margin:`${800/320}rem auto`}}></div>
)
}
}

 

module.exports = TagCloud;

react球形文字旋转标签

标签:ner   from   const   arr   ext   ont   Y轴   reat   The   

原文:https://www.cnblogs.com/BlogRegisterAspx/p/10365461.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号