AS3:线图很糟糕

时间:2012-09-21 06:56:21

标签: actionscript-3 flash actionscript graph vector

我写了一些代码有点问题。基本上它所做的是采用不断变化的3个值,并以累积折线图的形式随时间绘制它们。它几乎可以工作,除了我在整个舞台上画出这条奇怪的线条,并且我无法弄清楚问题是什么。完整代码如下,您可以将其粘贴到闪存中来运行。

import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.utils.Timer;

var y1:Array = new Array();
var y2:Array = new Array();
var y3:Array = new Array();
var avg:Array = new Array();

var y1Shape:Shape = new Shape();
var y2Shape:Shape = new Shape();
var y3Shape:Shape = new Shape();
var avgShape:Shape = new Shape();

var container:Sprite = new Sprite();

var scale:uint = 1;

var redrawGraph:int = setInterval(reDraw,500);

var y1Int:int = 0;
var y2Int:int = 0;
var y3Int:int = 0;

container.addChild(y1Shape);
container.addChild(y2Shape);
container.addChild(y3Shape);
container.addChild(avgShape);
this.addChild(container);

function reDraw():void
{
    y1Shape.graphics.clear();
    y2Shape.graphics.clear();
    y3Shape.graphics.clear();
    avgShape.graphics.clear();

    y1Shape.graphics.lineStyle(1, 0x0066FF, 1);
    y1Shape.graphics.beginFill(0x0066FF, 0.5);
    y2Shape.graphics.lineStyle(1, 0x009900, 1);
    y2Shape.graphics.beginFill(0x009900, 0.5);
    y3Shape.graphics.lineStyle(1, 0x990000, 1);
    y3Shape.graphics.beginFill(0x990000, 0.5);
    avgShape.graphics.lineStyle(1, 0x000000, 1);

    y1Int = rand();
    y2Int = rand();
    y3Int = rand();

    trace(y1Int, y2Int, y3Int);

    y1.unshift(y1Int);
    y2.unshift(y2Int);
    y3.unshift(y3Int);
    popOut(y1);
    popOut(y2);
    popOut(y3);

    var i:uint,sum:uint,aLength:uint,len:uint = y1.length,max:int = 0,height_:int = 400;
    scale = 10;
    for (i=0; i<len; i++)
    {
        max = Math.max(y1[i] + y2[i] + y3[i],max);
    }

    for (i=0; i<len; i++)
    {
        sum +=  y1[i] + y2[i] + y3[i];
    }

    avg.unshift(Math.round(sum/len));

    /*--------------------------------MATCHED GRAPH------------------------------------------*/
    var y1_commands:Vector.<int> = new Vector.<int>();
    var y1_coord:Vector.<Number>= new Vector.<Number>();
    var y1_coord_rev:Vector.<Number> = new Vector.<Number>();
    y1_commands.push(1);
    y1_coord.push(400,height_);

    for (i=0; i<len; i++)
    {
        y1_commands.push(2);
        y1_coord.push((400-i*scale),height_-(Math.round((y1[i]/max)*height_)));
        y1_coord_rev.unshift((400-i*scale),height_-(Math.round((y1[i]/max)*height_)));
    }
    for (i=len; i>0; i--)
    {
        y1_commands.push(2);
        y1_coord.push(400 - i*scale,height_);
    }
    y1_commands.push(2);
    y1_coord.push(400,height_);

    /*--------------------------------MATCHED GRAPH------------------------------------------*/

    /*----------------------------------BUSY GRAPH-------------------------------------------*/
    var y2_commands:Vector.<int> = new Vector.<int>();
    var y2_coord:Vector.<Number>= new Vector.<Number>();
    var y2_coord_rev:Vector.<Number> = new Vector.<Number>();
    y2_commands.push(1);
    y2_coord.push(400,height_-(Math.round((y1[i]/max)*height_)));

    for (i=0; i<len; i++)
    {
        y2_commands.push(2);
        y2_coord.push((400-i*scale),height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
        y2_coord_rev.unshift((400-i*scale),height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
    }
    for (i=len; i>0; i--)
    {
        y2_commands.push(2);
        y2_coord.push(400 - i*scale, height_-(Math.round((y1[i]/max)*height_)));
    }
    y2_commands.push(2);
    y2_coord.push(400,height_-(Math.round((y1[i]/max)*height_)));

    /*----------------------------------BUSY GRAPH-------------------------------------------*/

    /*----------------------------------VAC GRAPH-------------------------------------------*/
    var y3_commands:Vector.<int> = new Vector.<int>();
    var y3_coord:Vector.<Number>= new Vector.<Number>();
    var y3_coord_rev:Vector.<Number> = new Vector.<Number>();
    y3_commands.push(1);
    y3_coord.push(400,height_-(Math.round(((y1[i]+y2[i])/max)*height_)));

    for (i=0; i<len; i++)
    {
        y3_commands.push(2);
        y3_coord.push((400-i*scale),height_-(Math.round(((y1[i]+y2[i]+y3[i])/max)*height_)));
        y3_coord_rev.unshift((400-i*scale),height_-(Math.round(((y1[i]+y2[i]+y3[i])/max)*height_)));
    }
    for (i=len; i>0; i--)
    {
        y3_commands.push(2);
        y3_coord.push(400 - i*scale, height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
    }
    y2_commands.push(2);
    y2_coord.push(400,height_-(Math.round(((y1[i]+y2[i])/max)*height_)));

    /*----------------------------------BUSY GRAPH-------------------------------------------*/
    //y3Shape.graphics.drawPath(y3_commands, y3_coord);
    y2Shape.graphics.drawPath(y2_commands, y2_coord);
    y1Shape.graphics.drawPath(y1_commands, y1_coord);

}

function popOut(a:Array):void
{
    if (a.length >=Math.ceil(400/scale))
    {
        a.pop();
    }
}

function rand():int
{
    return Math.floor(Math.random() * (1 + 5 - 0) + 0);
}

y3Shape被注释掉,直到y2Shape的问题得到解决(两者都被绘制只会使问题更难解决)。

任何想法可能会出现什么?

由于

2 个答案:

答案 0 :(得分:1)

如果你在.drawPath附近插入你的矢量,你会看到类似的东西:

trace(y2_commands); // 1,2,2,2,2
trace(y2_coord); // 400,171,400,57,390,NaN,400,171,400,57

因此,NaN(非数字)表示您在坐标计算中有错误。

PS。第一次计算BUSY GRAPH时y1[i]未定义

答案 1 :(得分:0)

你似乎在使用beginFill(),当你绘制一个没有循环的路径时,Flash需要你的路径来循环以填充它。因此,它通过在起点添加一条线并填充它来隐式循环它。为了接收不重叠的路径,在路径上添加两个点,它们位于X轴的0点正下方,一个位于图形的最后一个点的正下方,另一个点位于图形上的FIRST点的正下方。

实际上,你已经安装了它们,但由于某种原因你没有放置2个点,但是很多em,并且该线的高度位置显然是错误的。您的代码声明:

for (i=len; i>0; i--)
{
    y2_commands.push(2);
    y2_coord.push(400 - i*scale, height_-(Math.round((y1[i]/max)*height_)));
}

你应该:

for (i=len; i>0; i--)
{
    y2_commands.push(2);
    y2_coord.push(400 - i*scale, height_);
}

甚至更好:

y2_commands.push(2);
y2_commands.push(2);
y2_coord.push(400 - len*scale, height_);
y2_coord.push(400, height_);