Question

我对Easel和HTML5本身很新。我正在尝试使用EaselJS在画布上绘制一条线。 X-Co纵坐标固定为100，Y-Co纵坐标从数组列表中获得。我写的代码如下。请问有人让我知道我哪里出错了？

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

您只需将Shape添加到舞台一次，每次更新舞台时，它都会重绘您的图形。你的勾选调用是每帧添加新的图形指令，因此它会堆叠所有这些调用，最终会非常慢。

确保在向其绘制新内容之前清除图形，除非您尝试创建附加效果（如果是，可以查看缓存/ updateCache以使其具有高性能）。查看GitHub存储库中的“curveTo”和“updateCache”示例以供使用。

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

干杯：）

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

1 个答案: