Javascript/Easeljs 添加动态文本

Question

我在 Adob​​e Animate 中使用 HTML5 Canvas。 我正在尝试编写一个功能，允许我在舞台上的任何地方放置一条文本消息。

请看下面我的代码。

function newtext(TextToDisplay, xposition, yposition, textcolor, textfont) 
{var textvar = new createjs.Text();
textvar.x = xposition;
textvar.y = yposition;
textvar.color = textcolor;
textvar.font = textfont;
textvar.text = TextToDisplay;
this.addChild(textvar);}
newtext("Hi there!",200,200,"#ff7799","50px Arial");

我不确定我做错了什么。我找不到包含 EaselJS 包的查看器，因此在此处显示错误消息没有多大意义。此外，“编译器错误”在 Adob​​e Animate HTML5 Canvas 中作为一个窗口选项显示为灰色，因此我在测试代码时看不到错误。 如果有人可以推荐合适的查看器，那也会有所帮助。

我只是想添加我用来提取代码的内容，而这段代码在函数之外工作。

var fl_TF = new createjs.Text();
var fl_TextToDisplay = "Lorem ipsum dolor sit amet.";
fl_TF.x = 200;
fl_TF.y = 100;
fl_TF.color = "#ff7700";
fl_TF.font = "20px Arial";
fl_TF.text = fl_TextToDisplay;
this.addChild(fl_TF);

评论者建议函数中存在“this”可能是问题所在。这可能是问题的一部分，也可能是其他问题。

Answer 1

根据您的描述，addChild 似乎失败了，因为 newText() 方法在没有范围的情况下被调用。

您应该收到显示您“addChild 不是函数”的控制台日志。

您不能简单地删除this。不过，您有两个简单的选择:

1) 经常用来解决这个问题的 hacky 是“this/that”模式:

var that = this;
function newText(your args) {
  // your other code
  that.addChild(fl_TF); // <-- Uses "that" which references the original scope
}

2) 您也可以只在正确的范围内调用该方法:

newText.call(this, "Hi There", 200, 200, "#ff0000", "50px Arial");

希望对您有所帮助!