Flex/AS 组件

Question

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

但是，图表下方的区域应该用红色填充。我有 2 种不同类型的值，我在 x 值上使用，我想使用时间，在 y 上，我想使用货币值，这两个都是整数，但我应该如何开始？我一开始的想法是用 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);
        }
    }
}

这将是一个Ui组件不知道在flex组件中是否更容易实现，但实际上它看起来不像图形。

Answer 1

您的代码遗漏了 Graphics.drawPath() 文档中明确说明的一些要点，并且存在一些缩进问题 ;) .

最重要的部分是，commands 向量应包含来自 GraphicsPathCommand 的值，在您的情况下 2 用于 LINE_TO 在坐标之间画线。

然后要获得所需的图形，您需要对 X 值（以及相应的 Y 值）进行排序。我在代码中手动排序了这些值，并组成了我自己的 Y 值用于测试。

然后在您的循环中，您首先将 Y 值添加到 testdata，然后将 X 值添加到 testdata，但需要反过来 [x, y, x, y, x, y,...]。

只有这样做才能让我得到一个指向下方的很棒的图表。所以我继续稍微调整代码（见评论）并想出了这个：
http://wonderfl.net/c/6BrY
（在那里你可以 fork 并使用它立即看到结果）

对于direct/later参考这里只是代码：

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)

    }
}
}

Flex/AS 组件

Flex/AS Component

actionscript-3

apache-flex