JavaScript/EaselJS 添加动态文本

Question

我正在使用Adobe Animate中的HTML5画布。 我尝试编写一个函数，使我能够在舞台的任何位置放置文本消息。

请见下面的代码。

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包的浏览器，所以在这里显示错误消息没有太多意义。此外，在Adobe 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”可能是问题所在。它可能是问题的一部分，也可能有其他错误。

- Richard Musgrave

---

一个已删除的答案提出了 this 是错误的（在此示例中将是全局的）。另一种可能的解决方案是在添加文本后更新阶段。 - Lanny

谢谢，Lanny。不幸的是，删除“this”并在添加文本后添加stage.update()并没有解决问题。虽然这些都是好建议。 - Richard Musgrave

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

我希望这可以帮到你！

- Lanny

---

太棒了！非常感谢！选项2完美解决了问题！ - Richard Musgrave

我想强调的是，这也适用于具有数值变量的情况。 var C=5; newtext.call(this, C, 200, 200, "#ff0000", "50px Arial"); 将在所需位置打印出数字 5。 - Richard Musgrave