使用Phaser绘制等大切片饼图出现异常，求原因与解决方法

为什么Phaser里的饼图不符合预期？ #

你的代码存在两个核心问题：

1. 重复创建Graphics对象导致重叠绘制
   你在循环的每一次迭代中都调用game.add.graphics()新建一个Graphics实例，这些实例默认都定位在场景的(0,0)位置。更关键的是，所有饼片都使用了同一个红色（0xFF0000），三个完全相同的饼片会完全重叠在一起，看起来就像是只有一个饼片——这和Canvas/Pixi的效果不同，后两者是在同一个绘图上下文/容器里绘制不同颜色的饼片，不会出现重叠问题。

2. 路径闭合的细节差异
   虽然你调用了moveTo(0,0)和arc()，但Phaser的Graphics在处理填充路径时，需要确保路径完全闭合。不过这个问题在你把所有饼片画在同一个Graphics实例里时会自动解决。

修正后的代码 #

把Graphics的创建移到循环外面，给每个饼片设置不同颜色，同时优化绘制逻辑：

function degToRad(degrees) { 
    return (degrees * Math.PI)/180; 
} 

var total = 3; 
var width = 300; 
var radius = Math.floor(width / 2); 
var deg = 360 / total; 

// 只创建一个Graphics实例，并将其定位到画布中心（方便绘制饼图）
var graphics = game.add.graphics(radius, radius); 

// 为每个饼片定义不同的颜色
var colors = [0xFF0000, 0x00FF00, 0x0000FF];

for (var i = 0; i < total; i++) { 
    var start = degToRad(i * deg); 
    var end = degToRad((i + 1) * deg); 

    graphics.beginFill(colors[i]); 
    graphics.lineStyle(2, 0x000000); 
    graphics.moveTo(0, 0); // 相对于Graphics的本地坐标（此时原点就是画布中心）
    graphics.arc(0, 0, radius, start, end, false); 
    graphics.closePath(); // 显式闭合路径，确保填充区域正确
    graphics.endFill(); 
}

关键调整点说明 #

• 单一Graphics实例：所有饼片都绘制在同一个Graphics对象中，避免重叠问题。
• 定位到画布中心：创建Graphics时传入(radius, radius)，让它的本地坐标原点对应画布中心，绘制饼图时逻辑更直观。
• 区分饼片颜色：用颜色数组给每个饼片分配不同颜色，便于查看绘制效果。
• 显式闭合路径：调用closePath()确保路径从弧的终点连接回起点(0,0)，保证填充区域的完整性。

修改后，Phaser里的饼图就会和Canvas、Pixi的效果一致，显示三个大小完全相同的饼片了。

内容的提问来源于stack exchange，提问作者Mauro Aguilar