如何动态更改 <a-text> 的文本值？

debugcn 发表于 Dev

疯人院

我想在A-Frame 中制作一个动态数字时钟。我正在使用文本元素，但无法通过在 JS 中设置属性来更改其文本。我仍然可以更改其他属性，例如颜色。

html：

...
<a-text id="clock" clock-text value="00:00" position="2.45 0 0.01" color="#FFFFFF" align="right"></a-text>
...

js：

...
AFRAME.registerComponent('clock-text', {
  init: function() {
    var el = this.el;
    el.setAttribute('value', '20:30');
    el.setAttribute('color', 'black');
  },
  update: function() {
    el.setAttribute('value', '20:30');
  }
});

您可以在我正在使用的 jsfiddle 中获取完整代码。

许

所以我认为这是一个竞争条件问题，因为实际上有两个更新正在进行a-text，当它初始化时和接收新值时（导致update调用一个组件）。

当updateFont从其.textinit组件调用时，文本组件确实会发出一个名为“textfontset”的事件。

使用该事件，您可以在该事件发出后启动时钟

AFRAME.registerComponent('clock-text', {
  init: function() {
    var el = this.el;
    this.ready = false;
      el.addEventListener('textfontset', function() {
      this.ready = true;
    }.bind(this));
  },
  tick: function() {
    var el = this.el;
    if (!this.ready) {
      return;
    }
    el.setAttribute('value', '20:30');
  }
});

https://jsfiddle.net/xcofjjm9/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。