前言

游戏项目中经常用到多边形雷达图，来表示人物的属性分布：

像这种：

（注：以上图片均来源自网络，不做任何商业用途）

那今天跟随游戏项目，用 laya 画一个通用的属性雷达图。

准备知识

首先，任何雷达图都离不开圆，像下面这种，我们首先要明确一个概念：雷达图是建立在圆的内切图当中。

（注：以上图片均来源自网络，不做任何商业用途）

如何画多边形

以正五边形雷达图为例，其他任意正多边形也一样，画图的原点在圆心（0,0），以r为半径作圆，作为正五边形的外接圆，则正五边形每条边所对应的圆心角均为 rad = 2*Math.PI/5。再根据正余弦可以求得每个定点所对应的坐标，这样一个正五边形就可以画出来了。

有了以上思想，我们来写代码：

画多边形：

        let rad = 2 * Math.PI/step;// 五变形的圆心角  // 从外到内画是个五边形      for(let s = 10; s > 0; s--){let sp = new Laya.Sprite();this.addChild(sp);// 绘制多边形let path:number[] = [];for (let i = 0; i < 5; i++) {let tmpRad = rad * i;var x = Math.sin(tmpRad) * r * (s/ceng);var y = Math.cos(tmpRad) * r * (s/ceng);path.push(x, y);}// laya 提供的画多边形方法sp.graphics.drawPoly(0, 0, path, fillColor, lineColor, lineWidth);}

画圆心点到多边形顶点的线段

         // 绘制中心点到顶点的线段for(var i = 0; i < 5; i++){let sp = new Laya.Sprite();this.addChild(sp);let tmpRad = rad * i;let x = Math.sin(tmpRad) * r;let y = Math.cos(tmpRad) * r;sp.graphics.drawLine(0, 0, x, y, cvColor, cvWidth);}

绘制数据点组成的多边形

        // 绘制数据点组成的多边形let data = [0.5, 0.63, 0.42, 0.81, 0.76]; // 数据分布let sp = new Laya.Sprite();sp.alpha = 0.5;this.addChild(sp);let path:number[] = [];for (let i = 0; i < step; i++) {let tmpRad = rad * i;var x = Math.sin(tmpRad) * r * data[i];var y = Math.cos(tmpRad) * r * data[i];path.push(x, y);}sp.graphics.drawPoly(0, 0, path, dfcolor, dlcolor, dlwidth);

效果图如下：

封装代码

新建一个雷达图类：RadarMap 继承于 Laya.Sprite，用于外部整体调用。

export default class RadarMap extends Laya.Sprite
{constructor(){super();}/*** 绘制多边形雷达图* @param r 半径大小* @param data  数据分布* @param ceng  多边形内圈数* @param dfcolor 数据构成的多边形填充颜色* @param dlcolor 数据构成的多边形边线颜色* @param dlwidth 数据构成的多边形边线宽度* @param fillColor 外圈多边形填充颜色* @param lineColor 外圈多边形边线颜色* @param edgeWidth 外圈多边形边线宽度* @param cvColor 中心点到顶点的线段颜色* @param cvWidth 中心点到顶点的线段宽度*/drawMap(r:number, data:number[], ceng:number = 1, dfcolor:string = "#c78c00", dlcolor:string = null, dlwidth:number = 1, fillColor:string = null, lineColor:string = "#f1f9ff", edgeWidth:number = 1, cvColor:string = "#e0e0e0", cvWidth:number = 1):void {this.destroyChildren();let step = data.length; // 边数let rad = 2 * Math.PI/step;// 多边形的圆心角this.width = r * 2; // 宽this.height = r * 2; // 高for(let s = ceng; s > 0; s--){let sp = new Laya.Sprite();this.addChild(sp);// 绘制多边形let path:number[] = [];for (let i = 0; i < step; i++) {let tmpRad = rad * i;var x = Math.sin(tmpRad) * r * (s/ceng);var y = Math.cos(tmpRad) * r * (s/ceng);path.push(x, y);}sp.graphics.drawPoly(0, 0, path, fillColor, lineColor, edgeWidth);}// 绘制中心点到顶点的线段for(var i = 0; i < step; i++){let sp = new Laya.Sprite();this.addChild(sp);let tmpRad = rad * i;let x = Math.sin(tmpRad) * r;let y = Math.cos(tmpRad) * r;sp.graphics.drawLine(0, 0, x, y, cvColor, cvWidth);}// 绘制数据点组成的多边形let sp = new Laya.Sprite();sp.alpha = 0.5;this.addChild(sp);let path:number[] = [];for (let i = 0; i < step; i++) {let tmpRad = rad * i;var x = Math.sin(tmpRad) * r * data[i];var y = Math.cos(tmpRad) * r * data[i];path.push(x, y);}sp.graphics.drawPoly(0, 0, path, dfcolor, dlcolor, dlwidth);}}

外部调用

 let rm = new RadarMap(); // 雷达图let r = 150; // 半径let data = [0.5, 0.63, 0.42, 0.81, 0.76, 0.8]; // 数据分布rm.drawMap(r, data, 5);

效果如下：

LayaBox游戏项目实录四：游戏中多边形属性雷达图相关推荐

浅谈RPG游戏中的属性系统设定
先来张我最喜欢的Nero和Dante的帅照!!! 最近的E3展也是让广大游戏爱好者们打开眼界,小编最喜欢的鬼泣系列也将于明年春季迎来鬼泣4的正统续作鬼泣5,再加上最近小编也在自己开发着RPG游戏,所以 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
理解游戏中使用的贴图资源
贴图资源是游戏中最常用的一种资源,做为游戏引擎的开发者,我们不仅要了解如何使用这些贴图,还要考虑运行性能,内存,磁盘空间,网络流量等一些产品化的东西. 通常我们需要考虑以下几个因素: 贴图读取的时间 ...
Unity动态构建Mesh来绘制任意多边形（雷达图效果）
由于很多同学没有做出来,特此补传一个Demo工程 (版本Unity2019.1.8f1) CSDN下载:https://download.csdn.net/download/linxinfa/1195 ...
Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
上个时代的3A游戏，使用的是什么光照技术？| GAMES104实录 - 现代游戏引擎：从入门到实践
本期为GAMES104<现代游戏引擎:从入门到实践>视频公开课文字实录第16期.本课程由GAMES(图形学与混合现实研讨会)发起,游戏引擎技术专家王希携手游戏引擎一线开发者共同研发. 课程 ...
c语言精灵宝可梦对战游戏,精灵宝可梦：把游戏中的对战高玩，放到动画的世界里会是什么位置...
<精灵宝可梦>系列,又名宠物小精灵.神奇宝贝.这可不仅仅是一代人的童年回忆,更是一部无论是游戏还是动漫都真正畅销全世界的作品.特别是游戏系列更是如此,纵观全世界,如果说能有一个游戏让大家有 ...
Android自定义View 多边形能力分析控件，雷达图（蛛网）动态实现
自定义View实现雷达图还是挺简单的,它能让使用让使用者能一目了然的了解各项指标的变动情形以及好坏趋势.使用得最多的便是Path路径,很适合初学者用来练习. 效果图如下: 下面是实体类的属性: pub ...
Unity中的法线贴图、漫反射及高光
我们都知道,一个三维场景的画面的好坏,百分之四十取决于模型,百分之六十取决于贴图,可见贴图在画面中所占的重要性.在这里我将列举一些贴图,并且初步阐述其概念,理解原理的基础上制作贴图,也就顺手多了. 我 ...

LayaBox游戏项目实录四：游戏中多边形属性雷达图

前言