使用StageXL绘制饼图？

Question

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

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

Answer 1

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

import 'dart:math' as Math;
import 'package:stagexl/stagexl.dart';

void main() {
    // setup the Stage and RenderLoop
    var canvas = html.querySelector('#stage');
    var stage = new Stage(canvas);
    var renderLoop = new RenderLoop();
    renderLoop.addStage(stage);

    List<Entry> entries = new List<Entry>();
    for(int i=1;i<=5;i++){
        entries.add(new Entry(i, "fgfgfgfgf ${i}"));
    }
    PieChart c = new PieChart(200, 200, 100, entries);
    stage.addChild(c);
}

class Entry {
    num val;
    String name;
    Entry(this.val, this.name);
}

class PieChart extends DisplayObjectContainer{
    num centerX;
    num centerY;
    num radius;
    List<int> _colors = [Color.Red, Color.Blue, Color.Green, Color.Yellow, Color.Cyan];
    int _c_index = 0;
    int get nextColor => _colors[_c_index=(++_c_index%_colors.length)]; 
    List<Entry> entries;
    PieChart(this.centerX, this.centerY, this.radius, this.entries){
        num sum = 0;
        for(Entry e in entries){
            sum+=e.val;
        }
        num angle = 0;
        for(Entry e in entries){
            addChild(new LabledPiePiece(this, angle, angle+=(e.val/sum)*360, nextColor, e));
        }
    }


}

class LabledPiePiece extends DisplayObjectContainer{
    LabledPiePiece(PieChart pie, num startAngleDeg, num endAngleDeg, int color, Entry e){
        num hDeg = (startAngleDeg+endAngleDeg)/2;
        addChild(new PiePieceHalf(pie, startAngleDeg, hDeg, color));
        addChild(new PiePieceHalf(pie, hDeg, endAngleDeg, color));
        TextField t = new TextField(e.name);
        t.defaultTextFormat = new TextFormat('Arial', 16, Color.Black, align:TextFormatAlign.CENTER);
        t.y = pie.centerY+(pie.radius+t.textHeight)*Math.sin(hDeg/180*Math.PI);
        t.x = pie.centerX+(pie.radius+t.textHeight)*Math.cos(hDeg/180*Math.PI);
        t.rotation = 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);
    }
}

/**
 * draws a pie piece with max 180deg;
 */
class PiePieceHalf extends Shape{
    PieChart pie;
    num get centerX => pie.centerX;
    num get centerY => pie.centerY;
    num get radius => pie.radius;
    num startAngleRad;
    num endAngleRad;
    int color;

    PiePieceHalf(this.pie, num startAngleDeg, num endAngleDeg, this.color){
        this.startAngleRad = startAngleDeg/180*Math.PI;
        this.endAngleRad = endAngleDeg/180*Math.PI;
        draw();
    }

    void draw() {
        num controlAngle = (startAngleRad+endAngleRad)/2;
        num controlDist = radius/(Math.cos(startAngleRad-controlAngle));
        num controlX = centerX+Math.cos(controlAngle)*controlDist;
        num controlY = centerY+Math.sin(controlAngle)*controlDist;
        graphics.beginPath();
        graphics.moveTo(centerX, centerY);
        graphics.lineTo(centerX+Math.cos(startAngleRad)*radius, centerY+Math.sin(startAngleRad)*radius);
        graphics.arcTo(controlX, controlY, centerX+Math.cos(endAngleRad)*radius, centerY+Math.sin(endAngleRad)*radius, radius);
        graphics.lineTo(centerX, centerY);
        graphics.closePath();
        graphics.strokeColor(color);
        graphics.fillColor(color);
    }

}

这段代码并不完美，但它可以正常工作。除非你只加一块馅饼..。但是处理这个案子应该不是很困难...此外，添加EmptyPiePieces也不应该太难……你只需要扩展条目...也许让颜色也可以通过入口配置也不是太糟糕…