使用EaselJS在html5画布中绘制线条

Question

我对画架和HTML5本身非常新颖。我正试图在使用EaselJS的画布上绘制一条线。 X坐标纵坐标固定为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，使其高性能），请确保你清除你的图形，然后再绘制新的东西。查看GitHub存储库中的“curveTo”和“updateCache”示例以供使用。

将形状添加到舞台而不是图形后，随意发布一些后续问题，我可以尝试和进一步提供帮助。

干杯:)