使用EaselJS在html5画布中绘制一条线 [英] Drawing a Line in a html5 canvas using EaselJS

问题描述

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

I am very new to Easel and HTML5 itself. I am trying to draw a line using on a canvas using EaselJS. The X- Co ordinate is fixedd to 100 and the Y-Co ordinate is got from a array list. The code that i have written is given below. Could please someone let me know where i am going wrong?

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.

推荐答案

这里有一些问题。您看到的错误是因为您要将图形添加到舞台，而不是形状。

There are a few issues here. The error you are seeing is because you are adding the Graphics to the Stage, and not the Shape.

另一个问题是如何修改图形中的图形：

The other issue is how the Graphics are modified in the tick:

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

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

You only need to add your Shape to the stage one time, and it will redraw your graphics each time every time the Stage is updated. Your tick call is adding new Graphics instructions every frame, so it will stack all those calls up, and eventually be really slow.

确保在绘制之前清除图形新的东西，除非你试图创建一个加法效果（如果你是，也许考虑缓存/ updateCache使其具有高性能）。查看GitHub存储库中的curveTo和updateCache示例以供使用。

Make sure you clear your Graphics before you draw new things to it, unless you are trying to create an additive effect (and if you are, perhaps look into caching/updateCache to make it performant). Check out the "curveTo" and "updateCache" examples in the GitHub repository for usage.

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

Once you have added the Shape to the stage instead of the Graphics, feel free to post some follow up questions, and I can try and assist further.

干杯：）

这篇关于使用EaselJS在html5画布中绘制一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！