我对 Easel 和 HTML5 本身非常陌生。我正在尝试使用 EaselJS 在 Canvas 上画一条线。 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.
最佳答案
这里有一些问题。您看到的错误是因为您将图形添加到舞台,而不是形状。
另一个问题是如何在tick中修改Graphic:
this.tick = function() {
graphics.moveTo(100,(dataList[this.index].magnitude)*100);
graphics.lineTo(100,(dataList[(this.index)++].magnitude)*100);
stage.addChild(graphics);
};
您只需将您的形状添加到舞台一次,每次舞台更新时,它都会重新绘制您的图形。您的刻度调用会在每一帧添加新的图形指令,因此它将堆叠所有这些调用,并最终变得非常慢。
确保在向图形绘制新内容之前清除图形,除非您试图创建附加效果(如果是的话,也许可以考虑缓存/更新缓存以使其高性能)。查看 GitHub 存储库中的“curveTo”和“updateCache”示例以了解用法。
将形状而不是图形添加到舞台后,请随时发布一些后续问题,我可以尝试进一步提供帮助。
干杯:)
关于javascript - 使用 EaselJS 在 html5 Canvas 中绘制一条线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15996060/