react球形文字旋转标签

/*

* 球形文字旋转标签模块

*

*/

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;