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

问题描述

我对 Easel 和 HTML5 本身非常陌生.我正在尝试使用 EaselJS 在画布上绘制一条线.X 坐标固定为 100，Y 坐标从数组列表中获取.我编写的代码如下所示.有人可以告诉我哪里出错了吗?

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.

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

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屋！