从五角星到雷达图：用CocosCreator Graphics组件封装一个可复用的自定义图表库

从五角星到雷达图：用CocosCreator Graphics组件封装可复用的自定义图表库

在游戏UI和数据可视化领域，自定义图表的需求无处不在——从角色属性面板的六边形能力图，到商城系统的星级评价展示，再到运营数据的折线趋势分析。传统做法往往导致代码重复：每次遇到新图表类型就重写绘图逻辑，不同项目间难以复用，性能优化更是无从谈起。本文将带你基于CocosCreator的Graphics组件，构建一套工程化、可配置的图表解决方案。

1. 图表库架构设计

1.1 基础绘图能力抽象

Graphics组件提供了moveTo、lineTo等底层API，但直接使用会导致业务代码与绘图逻辑耦合。我们首先抽象基础绘图单元：

abstract class ChartPrimitive { protected graphics: Graphics; protected config: PrimitiveConfig; constructor(graphics: Graphics, config: PrimitiveConfig) { this.graphics = graphics; this.config = config; } abstract draw(): void; } interface PrimitiveConfig { strokeColor?: Color; fillColor?: Color; lineWidth?: number; }

1.2 复合图表结构设计

复杂图表由多个基础图形组合而成，采用组合模式管理层级关系：

class ChartComposition { private children: (ChartPrimitive | ChartComposition)[] = []; add(child: ChartPrimitive | ChartComposition): void { this.children.push(child); } draw(): void { this.children.forEach(child => child.draw()); } }

1.3 性能优化策略

• 实例复用：维护Graphics对象池
• 批量绘制：合并相同样式的绘图指令
• 脏检查机制：数据变更时局部重绘

2. 核心图表实现

2.1 参数化五角星生成

通过极坐标公式实现N角星通用绘制算法：

class StarPrimitive extends ChartPrimitive { private center: Vec2; private outerRadius: number; private innerRadius: number; private points: number; draw(): void { const angleStep = (Math.PI * 2) / this.points; for (let i = 0; i <= this.points * 2; i++) { const radius = i % 2 === 0 ? this.outerRadius : this.innerRadius; const angle = angleStep * i - Math.PI / 2; const x = this.center.x + radius * Math.cos(angle); const y = this.center.y + radius * Math.sin(angle); if (i === 0) this.graphics.moveTo(x, y); else this.graphics.lineTo(x, y); } this.graphics.close(); } }

参数配置示例：

2.2 动态雷达图构建

雷达图的核心是数据归一化处理和极坐标转换：

class RadarChart extends ChartComposition { private dimensions: string[]; private values: number[]; private maxValue: number; build(): void { // 绘制网格线 this.add(new PolygonGridPrimitive(...)); // 绘制数据多边形 const points = this.dimensions.map((_, i) => { const ratio = this.values[i] / this.maxValue; const angle = (Math.PI * 2 * i) / this.dimensions.length; return new Vec2( ratio * Math.cos(angle), ratio * Math.sin(angle) ); }); this.add(new PolygonPrimitive(points)); } }

3. 工程化实践

3.1 配置驱动设计

采用JSON Schema定义图表配置规范：

{ "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": { "chartType": { "enum": ["radar", "star", "line"] }, "data": { "type": "array" }, "style": { "type": "object", "properties": { "colors": { "type": "array", "items": { "type": "string" } } } } } }

3.2 与数据系统集成

通过观察者模式实现数据自动更新：

class DataBinding { private observers: ChartPrimitive[] = []; subscribe(chart: ChartPrimitive): void { this.observers.push(chart); } update(data: any): void { this.observers.forEach(observer => { observer.updateData(data); if (observer.shouldRedraw()) { observer.redraw(); } }); } }

4. 性能调优实战

4.1 绘图指令批处理

将相同样式的绘图命令合并执行：

class BatchRenderer { private batches: Map<string, GraphicsCommand[]> = new Map(); addCommand(styleHash: string, cmd: GraphicsCommand): void { if (!this.batches.has(styleHash)) { this.batches.set(styleHash, []); } this.batches.get(styleHash).push(cmd); } flush(): void { this.batches.forEach(commands => { const first = commands[0]; first.graphics.lineWidth = first.lineWidth; first.graphics.strokeColor = first.strokeColor; commands.forEach(cmd => { cmd.execute(); }); }); } }

4.2 动态LOD控制

根据设备性能自动调整细节等级：

function getLODLevel(): number { const fps = director.getFrameRate(); if (fps > 50) return 3; // 高细节 if (fps > 30) return 2; // 中等细节 return 1; // 基础细节 } class AdaptiveChart { private lodStrategies = { 1: this.drawSimplified, 2: this.drawNormal, 3: this.drawDetailed }; draw(): void { const level = getLODLevel(); this.lodStrategies[level].call(this); } }

5. 扩展应用场景

5.1 技能冷却效果

利用圆弧绘制实现环形进度条：

class CooldownIndicator extends ChartPrimitive { private progress: number; // 0-1 draw(): void { const startAngle = -Math.PI / 2; const endAngle = startAngle + Math.PI * 2 * this.progress; this.graphics.arc(0, 0, 50, startAngle, endAngle, false); this.graphics.stroke(); } }

5.2 属性对比视图

组合多种图表类型实现复杂展示：

class CharacterStatsView { private radarChart: RadarChart; private starRating: StarChart; build(): void { // 左侧五维雷达图 this.radarChart = new RadarChart(...); // 右侧星级评价 this.starRating = new StarChart(...); // 底部属性对比条 new AttributeBars(...); } }

在大型项目中，这套架构已成功支持20+种图表类型的统一管理。关键收获是：将绘图坐标计算与UI布局分离，通过配置化实现视觉设计师与程序员的协作解耦。对于性能敏感场景，建议结合StaticBatch组件进一步优化渲染效率。