Dart 使用StageXL的饼图？

有没有一种使用StageXL绘制饼图的简单方法

---

我想唯一的另一种选择（如果我希望空切片是透明的）是绘制一个矢量饼图并填充它。

我不知道是否有更简单的方法，但您可以使用ArcTo（）实现一种方法，如下所示：

导入'dart:math'作为数学；
导入“包：stagexl/stagexl.dart”；
void main（）{
//设置舞台和渲染窗口
var canvas=html.querySelector（“#stage”）；
var阶段=新阶段（画布）；
var renderLoop=new renderLoop（）；
renderLoop.addStage（stage）；
列表条目=新列表（）；
对于（inti=1；i_颜色[_c_索引=（++_c_索引%_colors.length）]；
列出条目；
PieChart（this.centerX、this.centerY、this.radius、this.entries）{
num sum=0；
对于（条目中的条目e）{
sum+=e.val；
}
数值角度=0；
对于（条目中的条目e）{
添加子项（新的标签拼接（此，角度，角度+=（e.val/sum）*360，下一个颜色，e））；
}
}
}
类labledpiepiecut扩展了DisplayObjectContainer{
带标签的饼图（饼图饼图，数字startAngleDeg，数字endAngleDeg，内部颜色，条目e）{
num hDeg=（startAngleDeg+endAngleDeg）/2；
addChild（新的PiePieceHalf（pie、startAngleDeg、hDeg、color））；
addChild（新的PiePieceHalf（pie、hDeg、endAngleDeg、color））；
TextField t=新的TextField（例如名称）；
t、 defaultTextFormat=新的TextFormat（'Arial'，16，Color.Black，align:TextFormatAlign.CENTER）；
t、 y=饼图中心+（饼图半径+t.textHeight）*数学sin（hDeg/180*数学π）；
t、 x=饼图中心x+（饼图半径+t.textHeight）*数学坐标（hDeg/180*数学坐标）；
t、 旋转=hDeg/180*Math.PI+Math.PI/2；
t、 y=t.y-t.width*Math.sin（t.rotation）/2；
t、 x=t.x-t.width*Math.cos（t.rotation）/2；
addChild（t）；
}
}
/**
*绘制最大180度的饼图；
*/
类扩展了形状{
饼图派；
num get centerX=>pie.centerX；
num get centerY=>pie.centerY；
num get radius=>pie.radius；
斯塔坦格勒号；
根角数；
内色；
PiePieceHalf（this.pie，num startAngleDeg，num endAngleDeg，this.color）{
this.startAngleRad=startAngleDeg/180*Math.PI；
this.endAngleRad=endAngleDeg/180*Math.PI；
draw（）；
}
作废提款（）{
num controlAngle=（startAngleRad+endAngleRad）/2；
num controlDist=半径/（数学cos（startAngleRad控制角））；
num controlX=centerX+数学cos（controlAngle）*controlDist；
num controlY=centerY+Math.sin（控制角度）*controlDist；
graphics.beginPath（）；
图形。移动到（centerX、centerY）；
graphics.lineTo（centerX+Math.cos（startAngleRad）*半径，centerY+Math.sin（startAngleRad）*半径）；
图形.arcTo（controlX，controlY，centerX+Math.cos（endangelrad）*半径，centerY+Math.sin（endangelrad）*半径，半径）；
图形。lineTo（centerX、centerY）；
graphics.closePath（）；
图形.笔划颜色（彩色）；
图形。填充颜色（颜色）；
}
}

这段代码并不完美，但它可以工作…除非您只添加一块饼…但处理这种情况应该不难。。。

---

另外，添加EmptypePieces也不难……您只需扩展条目……也许通过条目配置颜色也不会太糟糕……

我不知道是否有更简单的方法，但您可以使用ArcTo（）实现一种方法，如下所示：

导入'dart:math'作为数学；
导入“包：stagexl/stagexl.dart”；
void main（）{
//设置舞台和渲染窗口
var canvas=html.querySelector（“#stage”）；
var阶段=新阶段（画布）；
var renderLoop=new renderLoop（）；
renderLoop.addStage（stage）；
列表条目=新列表（）；
对于（inti=1；i_颜色[_c_索引=（++_c_索引%_colors.length）]；
列出条目；
PieChart（this.centerX、this.centerY、this.radius、this.entries）{
num sum=0；
对于（条目中的条目e）{
sum+=e.val；
}
数值角度=0；
对于（条目中的条目e）{
添加子项（新的标签拼接（此，角度，角度+=（e.val/sum）*360，下一个颜色，e））；
}
}
}
类labledpiepiecut扩展了DisplayObjectContainer{
带标签的饼图（饼图饼图，数字startAngleDeg，数字endAngleDeg，内部颜色，条目e）{
num hDeg=（startAngleDeg+endAngleDeg）/2；
addChild（新的PiePieceHalf（pie、startAngleDeg、hDeg、color））；
addChild（新的PiePieceHalf（pie、hDeg、endAngleDeg、color））；
TextField t=新的TextField（例如名称）；
t、 defaultTextFormat=新的TextFormat（'Arial'，16，Color.Black，align:TextFormatAlign.CENTER）；
t、 y=饼图中心+（饼图半径+t.textHeight）*数学sin（hDeg/180*数学π）；
t、 x=饼图中心x+（饼图半径+t.textHeight）*数学坐标（hDeg/180*数学坐标）；
t、 旋转=hDeg/180*Math.PI+Math.PI/2；
t、 y=t.y-t.width*Math.sin（t.rotation）/2；
t、 x=t.x-t.width*Math.cos（t.rotation）/2；
addChild（t）；
}
}
/**
*绘制最大180度的饼图；
*/
类扩展了形状{
饼图派；
num get centerX=>pie.centerX；
num get centerY=>pie.centerY；
num get radius=>pie.radius；
斯塔坦格勒号；
根角数；
内色；
PiePieceHalf（this.pie，num startAngleDeg，num endAngleDeg，this.color）{
this.startAngleRad=startAngleDeg/180*Math.PI；
this.endAngleRad=endAngleDeg/180*Math.PI；
draw（）；
}
作废提款（）{
num controlAngle=（startAngleRad+endAngleRad）/2；
num controlDist=半径/（数学cos（startAngleRad控制角））；
num controlX=centerX+数学cos（controlAngle）*controlDist；
num controlY=centerY+Math.sin（控制角度）*controlDist；
graphics.beginPath（）；
图形。移动到（centerX、centerY）；
graphics.lineTo（centerX+Math.cos（startAngleRad）*半径，centerY+Math.sin（startAngleRad）*半径）；
图形。arcTo（控制