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

Posted 2023-02-18

【中文标题】ActionScript 3 从下到上绘制条形图补间

【英文标题】：ActionScript 3 draw bargraph tweening from bottom to top

【发布时间】：2014-05-25 08:44:12

【问题描述】：

我正在 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 > 
        <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>

请帮我画出从下到上补间的图形。

【参考方案1】：

首先你应该了解flash中的坐标系。

我会建议相应地更改您的数学。这并不难，但最终您将有足够的解决方案，并且不会有任何头疼的问题，例如添加文本等其他元素时。

【参考方案2】：

把它包装到一个容器中，然后给那个容器scaleY=-1，应该可以。

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