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를 추가하기가 어려워서는 안됩니다 ... 항목을 확장하면됩니다 ... 어쩌면 그 항목을 통해 색상을 구성 할 수있게하는 것이 나쁘지 않을 것입니다 ...