Question

在Flex 4.7 Web应用程序中，我试图绘制一个红色和绿色的简单饼图。

所以我绘制了一个_red圆圈，然后在它上方我绘制了一个_green圆圈：

enter image description here

我希望在后者上设置一个角度 - 将其缩小为“切片”，但在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

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

最终以：

结束

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椭圆原语。

使用Flex绘制一块饼图 - 测试代码和附加截图

1 个答案: