在使用EaselJS一个HTML5画布画线(Drawing a Line in a html5 ca

2019-08-22 21:56发布

我很新的画架和HTML5本身。 我想提请使用使用EaselJS在画布上线。 另外,X轴坐标有限公司是fixedd 100和Y坐标有限公司从数组列表了。 我写的代码如下所示。 能否请人让我知道我要去的地方错了吗?

function myFunction(attachPoint)
{
//Code for canvas creation is written here.[Not shown];
//created a stage.
stage = new createjs.Stage(canvas.domElement());
//3. create some shapes.MagnitudeLessThanTwo is the array where we get the YAxis Coordinates from
alert("The lenght before function is"+MagnitudeLessThanTwo.length);
myShape = new drawLineGraph(MagnitudeLessThanTwo);
//4. finally add that shape to the stage
stage.addChild(myShape);
//5. set up the ticker
if (!createjs.Ticker.hasEventListener("tick")) { 
createjs.Ticker.addEventListener("tick", ourTickFunction);
  };
};

function drawLineGraph(dataList)
{
this.index=0;//To keep the track of the index of the array from which we get the Y Axis.
var graphics = new createjs.Graphics();
graphics.setStrokeStyle(1);
graphics.beginStroke("white");
graphics.moveTo(50,(dataList[this.index].magnitude)*100); 
graphics.lineTo(50,(dataList[(this.index)++].magnitude)*100);
createjs.Shape.call(this,graphics);
this.tick = function() {
graphics.moveTo(100,(dataList[this.index].magnitude)*100); 
graphics.lineTo(100,(dataList[(this.index)++].magnitude)*100);
stage.addChild(graphics);
  };
};
drawLineGraph.prototype = new createjs.Shape(); //set prototype
drawLineGraph.prototype.constructor = drawLineGraph; //fix constructor pointer


I am getting the following Error.
"Object [object Object] has no method 'isVisible'"- This is inside the EaselJS Library.

Answer 1:

这里有几个问题。 您所看到的错误是因为你要添加的图形舞台上,而不是外形。

另一个问题是图形是如何在蜱修改:


this.tick = function() {
    graphics.moveTo(100,(dataList[this.index].magnitude)*100); 
    graphics.lineTo(100,(dataList[(this.index)++].magnitude)*100);
    stage.addChild(graphics);
};

你只需要你的形状添加到一个阶段时,它会在每次每个阶段更新时重绘图形。 你剔调用增加新的图形指令每一帧,所以它会叠加所有这些调用起来,并最终成为真正的慢。

确保你清楚你绘制新东西出来之前,除非你想要创建一个叠加效应(如果你是,也许是考虑缓存/ updateCache使其高性能)图形。 检查出的“curveTo”,并在GitHub的仓库中使用“updateCache”的例子。

一旦你已经添加的形状的舞台,而不是图形,随意张贴一些跟进问题,我可以尝试,并进一步帮助。

干杯:)



文章来源: Drawing a Line in a html5 canvas using EaselJS