ActionScript 3绘制条形图从下到上补间

Question

我正在Flash Actionscript 3中绘制一个条形图补间。从xml获取输入。这里的图表很好。但是图表是从顶部绘制的。我的要求是从X轴（从下到上）绘制（补间）。我尝试使用TweenEvent.MOTION_CHANGE函数，它只绘制图表的最后一个元素。

以下是代码

package 
{
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.utils.Timer;

    public class Graph extends Sprite
    {

    private var graphContainer:Sprite = new Sprite();
    private var xmlFile:XML;
    private var urlLoader:URLLoader = new URLLoader();
    private var totalBars:int;
    private var tween:Tween;
    private var tf:TextFormat = new TextFormat();

    public function Graph():void
    {
        tf.color = 0x666666;
        tf.size = 12;
        tf.font = "Helvetica";
    createGraphContainer();
    loadXML();
    createBars();
    }

    private function createGraphContainer():void
    {
        graphContainer.graphics.lineStyle(1, 0xff00ff);
        graphContainer.graphics.moveTo(30, 30);
        graphContainer.graphics.lineTo(30, 170);
        graphContainer.graphics.lineTo(420, 170);
        addChild(graphContainer);           
    }
private function loadXML(file:String = "graph.xml"):void
    {
        urlLoader.load(new URLRequest(file));
        urlLoader.addEventListener(Event.COMPLETE, parseXML);
    }

    private function parseXML(e:Event):void
    {
        xmlFile = new XML(e.target.data);       
            totalBars = 2;
    createBars();           
    }

    private function createBars():void
    {
        for (var i:int = 0; i < totalBars; i++)
        {
        var label_txt = new int;                
        label_txt = 10+(i*15);
        var bar:Sprite = new Sprite();
            bar.graphics.beginFill(xmlFile.children()[i].@color);
        bar.graphics.drawRect(0, 0, xmlFile.@width, label_txt);
        bar.graphics.endFill();
            bar.x = 40 + (xmlFile.@width * i) + (10*i);
        bar.y = 170 - bar.height;

        var startingYandHeight:Number = bar.y + bar.height;
        var val:TextField = new TextField();
            val.defaultTextFormat = tf;
        val.autoSize = TextFieldAutoSize.RIGHT;
        val.text = label_txt ;
        val.x = 55 + (xmlFile.@width * i) + (10*i);
        val.y = 155 - bar.height;
        var myTween:Tween = new Tween(bar,"height",Strong.easeOut,0,bar.height ,5,true);                                    
        myTween.addEventListener( TweenEvent.MOTION_CHANGE, onChange);
        function onChange( e:TweenEvent ):void{
            bar.y = startingYandHeight - bar.height;
        }
        addChild(bar);
        addChild(val);

        }


        }


    }
}

---

XML代码

<?xml version="1.0"?>
    <graphs width="50"> 
        <graph name="Yellow" value="20" color="0xFDC13E"/>
        <graph name="Blue" value="40" color="0x25B7E2"/>
        <graph name="Green" value="60" color="0xB8CF36"/>
        <graph name="Red" value="100" color="0xE7473F"/>
        <graph name="Black" value="80" color="0x000000"/>
        <graph name="Brown" value="120" color="0xffffff"/>      
    </graphs>

请帮我绘制从下到上补间的图表。

Answer 1

首先，您应该了解闪光灯中的坐标系。

我建议相应地改变你的数学。这并不难，但最终你将有足够的解决方案，并且不会有任何麻烦，例如，当你添加文本等其他元素时。

Answer 2

将其包装到一个容器中，然后提供该容器scaleY=-1。

public var graph:Graph; // initialize elsewhere
...
this.addChild(graph);
this.scaleY = -1;