使用Flex繪製一張餅圖餅圖 - 測試代碼和截圖附加

Question

在Flex 4.7 Web應用程序中，我試圖用紅色和綠色繪製一個簡單的餅圖。

所以我得出一個_red圓，然後正上方我得出一個_green圈：

而且我希望能在後面的設置角度 - 以降低它的「一片餡餅「，但找不到任何方法或屬性spark.primitives.Ellipse

有沒有人請在這裏有一個好的建議？

我的完整和簡單的測試代碼如下：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       applicationComplete="init()"> 

    <fx:Script> 
     <![CDATA[ 
      private function init():void { 
       // XXX how to set _green angle? 
      } 
     ]]> 
    </fx:Script> 

    <s:Ellipse id="_red" height="60" width="60" x="110" y="90"> 
     <s:fill> 
      <s:SolidColor color="#CC0000" /> 
     </s:fill> 
    </s:Ellipse> 

    <s:Ellipse id="_green" height="60" width="60" x="110" y="90"> 
     <s:fill> 
      <s:SolidColor color="#66CC66" /> 
     </s:fill> 
    </s:Ellipse> 

</s:Application> 

因爲實在是太重量級的，我不希望使用mx.charts.PieChart，因爲圖表將在項目渲染顯示爲：Calculate a quotient in one table and store it in another table

此外，我已經搜索了網絡和繪製楔子多次調用curveTo的所有代碼示例，但我不知道是否可以使用一個簡單的掩碼來部分覆蓋_green圈？

Answer 1

一種方法是使用nl.funkymonkey.drawing.DrawingShapes繪製楔到<s:SpriteVisualElement>或使用補充作爲掩模：

最終結束瞭如：

例MXML實現：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <fx:Script> 
     <![CDATA[ 
      public function drawWedge(target:Graphics, x:Number, y:Number, radius:Number, arc:Number, startAngle:Number=0, yRadius:Number=0):void 
      { 
       if (yRadius == 0) 
        yRadius = radius; 

       target.moveTo(x, y); 

       var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number; 

       if (Math.abs(arc) > 360) 
        arc = 360; 

       segs = Math.ceil(Math.abs(arc)/45); 
       segAngle = arc/segs; 
       theta = -(segAngle/180) * Math.PI; 
       angle = -(startAngle/180) * Math.PI; 
       if (segs > 0) 
       { 
        ax = x + Math.cos(startAngle/180 * Math.PI) * radius; 
        ay = y + Math.sin(-startAngle/180 * Math.PI) * yRadius; 
        target.lineTo(ax, ay); 
        for (var i:int = 0; i < segs; ++i) 
        { 
         angle += theta; 
         angleMid = angle - (theta/2); 
         bx = x + Math.cos(angle) * radius; 
         by = y + Math.sin(angle) * yRadius; 
         cx = x + Math.cos(angleMid) * (radius/Math.cos(theta/2)); 
         cy = y + Math.sin(angleMid) * (yRadius/Math.cos(theta/2)); 
         target.curveTo(cx, cy, bx, by); 
        } 
        target.lineTo(x, y); 
       } 
      } 

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
      { 
       super.updateDisplayList(unscaledWidth, unscaledHeight); 

       var g:Graphics = _green.graphics; 
       g.clear(); 
       g.beginFill(0x66CC66); 
       drawWedge(g, 30, 30, 30, 245); 
       g.endFill(); 
      } 
     ]]> 
    </fx:Script> 

    <s:Ellipse id="_red" 
       height="60" 
       width="60" 
       x="110" 
       y="90"> 
     <s:fill> 
      <mx:SolidColor color="0xCC0000" /> 
     </s:fill> 
    </s:Ellipse> 

    <s:SpriteVisualElement id="_green" 
          height="60" 
          width="60" 
          x="110" 
          y="90" /> 

</s:Application> 

即使精簡是簡單地通過執行低級別的圖形操作所有的繪圖，而不是使用火花橢圓原語。