Flex / AS组件

Question

您好我想制作一个组件来绘制这样的图形：

但是，图表下的区域应填充红色。我有2种不同类型的值，我在x值上使用我想要使用时间和y我想要使用金钱值两个整数但我应该如何开始？我的开始时的想法是用矢量绘制精灵但是不起作用，因为他从左上角的常规零点开始，我无法填充图表下的完整区域。

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向量应包含来自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)

    }
}
}