Нарисуйте круговую диаграмму с помощью Flex - тестовый код и снимок экрана прилагаются

В веб-приложении Flex 4.7 я пытаюсь нарисовать простую круговую диаграмму в красном и зеленом цветах.

Итак, я нарисовал _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?


actionscript-3 apache-flex flex4.5 flex4.6 flex4.7
person Alexander Farber    schedule 11.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Один из подходов - нарисовать клинья на <s:SpriteVisualElement> или используйте заливку в качестве маски, используя _ 2_:

wedge-1wedge-2 wedge-3 wedge-4 wedge-5

В конечном итоге получается:

pie

Пример реализации 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.

person Jason Sturges    schedule 11.06.2013
comment
Разве здесь нельзя использовать маску вместо нескольких вызовов curveTo? - person Alexander Farber; 11.06.2013