java代码实现雷达图_雷达图的一种实现！ Cocos Creator ！

支持定义任意多个属性值，简单好用！文章底部获取完整代码！

如何使用

新建一个节点

为节点添加graphics组件

添加用户脚本radar

调整对应参数

实现原理

需求可以转化成如何画一个有特点的多边形。

先观察一下，雷达图的每个属性有什么特点。

可以看到每个属性值，都是在固定虚线上移动。

而且每条线的夹角都是一样的。这个夹角就是 360度除以总共属性数量。

const radians_per = Math.PI * 2 / this.side_count;

所以我们可以按照属性次序确定与x轴的夹角。如果我们把第一个属性值放在y轴，那么初始角度为 90。

// 初始边放在y轴，多90度

const radians = side_i * radians_per + Math.PI / 2;

虚线的长度可以由总长度和需要的百分比求出。

const side_length = this.side_max_length * percent;

接着根据极坐标到直角坐标系的转换，就能求出该属性的坐标。

// 坐标计算 x = r * cos y = r * sin

const posX = side_length * Math.cos(radians);

const posY = side_length * Math.sin(radians);

最后将所有的点连起来，完成雷达图的绘制。完整的绘制代码如下。

this.graphics.clear();

// 每个夹角

const radians_per = Math.PI * 2 / this.side_count;

for (let side_i = 0; side_i < this.side_count; side_i++) {

const percent = (this.side_percent[side_i] || 0) / 100;

// 每个边的长度

const side_length = this.side_max_length * percent;

// 初始边放在y轴，多90度

const radians = side_i * radians_per + Math.PI / 2;

// 坐标计算 x = r * cos y = r * sin

const posX = side_length * Math.cos(radians);

const posY = side_length * Math.sin(radians);

if (side_i === 0) {

this.graphics.moveTo(posX, posY);

} else {

this.graphics.lineTo(posX, posY);

}

this.graphics.close();

this.graphics.stroke();

this.graphics.fill();

以上为白玉无冰使用 Cocos Creator v2.2.2 开发"雷达图"的技术分享。更多精彩欢迎关注wx公中号【白玉无冰】！如果这篇对你有点帮助，欢迎分享给身边的朋友。

java代码实现雷达图_雷达图的一种实现！ Cocos Creator ！相关推荐

五子棋游戏Java代码简单实现（含活动图和类图设计）
五子棋游戏Java代码简单实现(含活动图和类图设计) 文章目录五子棋游戏Java代码简单实现(含活动图和类图设计) 活动图设计类图设计代码实现总结 OOA和OOD设计代码设计可改进部分活 ...
基于OpenGL的雷达P显的系统设计与仿真 PPI_雷达仿真_雷达模拟器_雷达目标_雷达ppi_PPI显示器_源码
基于OpenGL 开发的雷达P显可以设置各种参数源码下载链接 PPI_雷达仿真_雷达模拟器_雷达目标_雷达ppi_PPI显示器_源码-C++文档类资源-CSDN下载
java计算雷达扫描范围_雷达扫描 - linyinmobayu - 博客园
1.设计思想雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...
java类关系图_类图和对象图
类图的概念一.概述类图(Class Diagram)是描述类.接口.协作以及它们之间关系的图,用来显示系统中各个类的静态结构.类图是定义其他图的基础,在类图基础上,可以使用状态图.协作图.组件图和 ...
java盒图_箱形图/盒图（转）
http://zh.wikipedia.org/wiki/%E7%AE%B1%E5%BD%A2%E5%9C%96 http://www.blogjava.net/norvid/articles/317 ...
cocos黑暗斩_动态合图你真的用好了吗？| Cocos Creator
支持动态合图的渲染组件: Sprite. Label( BITMAP 模式). 注意事项: 在场景加载前,动态合图系统会进行重置, SpriteFrame贴图的引用和 uv 都会恢复到初始值. 查看方 ...
java代码的执行机制_关于java代码的执行机制
转载于:https://blog.csdn.net/houfeng777123/article/details/74316748 1.Java代码执行流程 ·第一步:*.java-->*.cla ...
html 甘特图_甘特图怎么画？甘特图基础教程，小白快速入门简单易懂
甘特图是什么?可能你是第一次听到,甘特图是通过活动顺序和时间间隔表示某一特定项目其顺序与时间的关系.不同于时间表,或日程规划表,甘特图可以使使用者更直观的知道在某一时间的工作内容和进度. 甘特图常见用 ...
java代码统计收藏量_干货收藏 | 35个Java 代码性能优化总结（上）
原标题:干货收藏 | 35个Java 代码性能优化总结(上) 前言代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这 ...
java代码防止sql注入_动态Java代码注入
java代码防止sql注入在本文中,我们将研究如何将Java代码动态加载到正在运行的jvm中. 该代码可能是全新的,或者我们可能想更改程序中某些现有代码的功能. (在开始之前,您可能想知道为什么到底 ...

java代码实现雷达图_雷达图的一种实现！ Cocos Creator ！

java代码实现雷达图_雷达图的一种实现！ Cocos Creator ！相关推荐

最新文章

热门文章