/*
* 球形文字旋转标签模块
*
*/
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;
- GDI+简单现实文字旋转
原文 http://www.cnblogs.com/kaixiangbb/p/3301272.html 题记 入职新公司已快有两月了,试用期已快结束,项目却迟迟还未正式启动.安排给我的多是些琐事,一直 ...
- Canvas 3D球形文字云动画特效
Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...
- 帝国cms调用最新文章 利用文字调用标签phomenews
最近建站时,朋友要求在头部用帝国cms调用最新文章,当时想了用灵动标签调用,但需要设置一个具体的栏目id,这样就不是调用全站的最新文章了,后面查看了一下标签说明,想到了文字调用标签phomenews. ...
- C# 设置Word文本框中的文字旋转方向
在Word中可插入文本框,默认情况下插入的文本框中的文字方向为横向排列,对于一些特殊文档的设计要求,需要改变文字方向,如本次测试中的文档排版为考生试卷类型,考生信息栏的内容为下图中的这种, 本文将以C ...
- Java 设置Word文本框中的文字旋转方向
Word文档中可添加文本框,并设置文本框为横向文本排列或是纵向文本排列,或者设置文本框中的文字旋转方向等.通过Java程序代码,也可以实现以上文本框的操作.下面以Java代码示例展示具体的实现步骤.另 ...
- 31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待
在上章和上上上章: 28.QT-QPainter介绍 30.QT-渐变之QLinearGradient. QConicalGradient.QRadialGradient 学习了QPainter基础绘 ...
- Cocos2d-x lua 游戏中的文字和标签
游戏场景中的文字分为静态文字和动态文字,在图片中的文字为静态文字,不能通过程序访问,而且无法动态修改内容,但是表现力丰富.动态文字一般需要通过程序访问,需要动态修改内容可以通过标签(Label or ...
- 纯CSS3浮雕质感的立体文字旋转动画
还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...
- meta标签、常用的文字类标签及其区别
常用的文字类基本标签 段落:p标题文字 :h1~h6超链接:a,必须属性href,后跟跳转地址图片:img,必须属性src,后跟图片地址字体斜体:em.i 文字加粗:b.strong文字下划线:u文字 ...
随机推荐
- 小容量的byteBuffer 读取大文本
利用死循环和判断是否 读到0个字节,便能判断是否读取完成,但它存在如下问题,如果输入是中文的话,可能没有读取完中文的全部3个字节,导致乱码.如果数据足够随机,这样的情况肯定会出现的 @Test pub ...
- 面试-java反射
问题:简述Java中的反射使用 答: 1.作用: 可以通过配置文件来动态配置和加载类,以实现软件工程理论里所提及的类与类,模块与模块之间的解耦.反射最经典的应用是spring框架. 2. 定义 反射简 ...
- java窗体
听完老师所讲的窗体,然后自己就去尝试写代码,结果是窗体出现了,但是就是不能关闭,求解!! package Swing.src.swring; import java.awt.Color;import ...
- Android组件系列----Intent详解(转载笔记)
[正文] Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用 ...
- Appium 框架工作流程及原理
目前Appium框架可以时支持android 和 ios 两个操作系统的App自动化测试,咱们分别对以下两款操作系统的工作流程进行说明. 一.appium-Android工作流 在Android端,a ...
- ajaxToolkit 异步加载报 错误500的解决方法
设置IIS程序池的托管模式为经典
- Elasticsearch .net client NEST 空字符/null值查询
null值查询 当某个字段值为null时,其实在es里该条数据是没有这个字段的.查询时检测包含不包含该字段就行. /// <summary> /// null 值查询 /// 当数据为Nu ...
- [爬虫进阶]使用Jsoup取代你的一切网络请求方法(java,post,get,代理IP)
[爬虫进阶]使用Jsoup取代你的一切网络请求方法(java,post,get,代理IP) 原文链接:https://www.cnblogs.com/blog5277/p/9334560.html 原 ...
- hadoop配置项笔记 - yarn
hadoop版本:3.1.1 yarn-site.xml yarn.log-aggregation-enable 作用:是否开启任务日志收集 默认值:false 我的设置:true yarn.log- ...
- 记录一下最近的解决的坑爹bug
最近解决的bug长得都很别致啊,记录一下 一 :天气插件引用报403 项目里有一个天气插件引用一直报403 后来确定原因是headers里缺少referer源,无法访问资源的服务器,再后来又发现项目引 ...