0

在 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，因为图表将显示在项目渲染器中：计算一个表中的商并将其存储在另一个表中

另外，我已经搜索了网络和所有绘制楔形的代码示例curveTo多次调用，但我想知道是否_green可以使用一个简单的掩码来部分覆盖圆圈？

4

1 回答 1

1

一种方法是将楔形绘制到 a<s:SpriteVisualElement>或使用填充作为蒙版nl.funkymonkey.drawing.DrawingShapes：

楔形-1 楔形 2 楔形 3 楔形 4 楔形 5

最终结局为：

馅饼

示例 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>

更精简的是通过低级图形操作来简单地执行所有绘图，而不是使用 Spark 椭圆原语。

于 2013-06-11T15:44:38.503 回答