Flex / AS組件

Question

嗨，我想制作一個組件來繪制這樣的圖：

但是，圖表下方的區域應填充紅色。 我在x值上使用2種不同類型的值，我想使用時間，在yi上使用貨幣值，這兩種都是int，但是我應該如何開始呢？ 我最初的想法是用Vector繪制Sprites，但那沒有用，因為他從左上角的常規零點開始，而我無法填滿圖表下方的整個區域。

package
{
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.geom.Point;


    [SWF(backgroundColor="0xFFFFFF" , width="500" , height="500")]
    public class Highprofil extends Sprite
    {
        public function Highprofil() 
        {
            var drawSprite:Sprite = new Sprite();
        var localPoint:Point = drawSprite.localToGlobal(new Point(0,999));
        var money:Array = new Array(1,2,10,20,10,2,1);
        var time:Array = new Array(12,58,52,41,66,98,3);
        var geo:Shape=new Shape();
        var testdata:Vector.<Number>=new Vector.<Number>;
        for(var i:int=0;i<money.length;i++){
        testdata.push(money[i]);
        testdata.push(time[i]);
            }

        var commands:Vector.<int> = new Vector.<int>();
        for(var j:int=0;j<money.length;j++){
            commands.push(j);

        }



        drawSprite.graphics.beginFill(0xFFFF0000); // Color Red

        drawSprite.graphics.drawPath(commands, testdata); // Draw the path
        drawSprite.graphics.endFill();

        addChild(drawSprite);
        }
    }
}

這將是一個Uicomponent，不知道它是否更容易在flex組件中實現，但實際上它甚至看起來都不像圖形。

Answer 1

您那里的代碼缺少Graphics.drawPath（）的文檔中明確指出的某些要點，並且存在一些縮進問題；）。

最重要的部分是， commands Vector應該包含GraphicsPathCommand中的值，在您的情況2 ， LINE_TO可以在坐標之間繪制線。

然后，要獲得所需的圖形，您需要對X值（和相應的Y值）進行排序。 我在代碼中手動訂購了這些值，並組成了自己的Y值進行測試。

然后，在循環中，首先將Y值然后將X值添加到testdata ，但它必須與[x, y, x, y, x, y,...]相反。

只有這樣做，我才能看到一張向下的大圖。 因此，我繼續對代碼進行了一些調整（請參見注釋），並提出了以下建議：
http://wonderfl.net/c/6BrY
（您可以在其中進行分叉操作並立即查看結果）

供直接/以后參考，這里僅是代碼：

package {
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.GraphicsPathCommand;

public class FlashTest extends Sprite {

    public function FlashTest() {
        var drawSprite:Sprite = new Sprite();

        //the values for the X axis need to be sorted!
        var time:Array  = new Array( 3, 12, 41, 52, 58, 66, 98); 
        var money:Array = new Array( 4,  3,  9, 20, 10,  8, 15);

        var testdata:Vector.<Number>=new Vector.<Number>();
        var commands:Vector.<int> = new Vector.<int>();

        var currentY:Number, maxY:Number = 0;
        //some "scaling" for the values, otherwise those are pixels
        const scaleX:int = 3, scaleY:int = 10;

        for(var i:int=0;i<money.length;i++){
            //first X values!
            testdata.push(time[i]*scaleX);

            //then Y values
            currentY = money[i]*scaleY;
            testdata.push(-currentY);//adding negative values so the graph goes upwards
            if(currentY > maxY){
                maxY = currentY;//keep track of highest point in graph
            }

            commands.push(GraphicsPathCommand.LINE_TO);
        }

        //get the graph back to zero maxX/0 so it gets filled correctly (independent of last X value)
        testdata.push(time[time.length-1]*scaleX, 0);
        commands.push(GraphicsPathCommand.LINE_TO);

        drawSprite.graphics.beginFill(0xFFFF0000); 
        drawSprite.graphics.drawPath(commands, testdata);
        drawSprite.graphics.endFill();

        addChild(drawSprite);
        drawSprite.y = maxY + 10;//moving the sprite down so the graph is completely visible (+10 pixel padding)
        drawSprite.x = 10;//(+10 pixel padding)

    }
}
}