Question

我想在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');
  }
});

您可以在the jsfiddle I'm using中获取完整的代码。

Answer 1

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

文本组件会发出一个名为'textfontset' when updateFont gets called from its init的事件。

使用该事件，您可以在发出该事件后开始计时

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/

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

HTML：

JS：

1 个答案: