代码之家 › 专栏 › 技术社区 › James McGrath

AS3:折线图出现故障

vector graph actionscript flash actionscript-3

James McGrath · 技术社区 · 13 年前

我写的一些代码有点问题。基本上,它所做的是取3个不断变化的值,并将它们以累积折线图的形式随时间绘制出来。它几乎可以工作,只是我在整个舞台上画了一条奇怪的线,而且我不知道问题是什么。完整的代码在下面,你可以通过将它粘贴到flash中来运行它。

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 回复 | 直到 13 年前

Roman Trofimov 13 年前

如果在附近插入跟踪矢量 .drawPath ,您会看到类似的内容:

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

所以,NaN(不是数字)的意思是,在坐标计算中有错误。

ps。 y1[i] 在BUSY GRAPH的第一次计算中未定义

Vesper 13 年前

你似乎在使用beginFill(),当你画一条没有循环的路径时,Flash要求你的路径循环,以便用一些东西填充它。因此,它通过在起点上添加一条线并填充它来隐式地循环它。为了接收一个不重叠的路径,请在X轴上0点正下方的路径上添加两个点,一个在图上最后一个点正下方,一个则在图上第一个点正上方。

事实上,你们已经安装了它们,但由于某种原因,你们放置的不是2个点,而是一大堆,而这条线的高度位置显然是错误的。您的代码说明:

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_);