Question

我正在尝试在框架中添加固定文本。我可以像这样添加一个a-text标签：

<a-camera wasd-controls-enabled="true" position="0 1 0" look-controls>
  <a-text position="0 0 -1" value="Test" color="#fff"></a-text>
</a-camera>

但是这种方法不会将文本固定在屏幕的一侧，因此当我更改屏幕尺寸时文本会溢出。这甚至可能吗？

Answer 1

通常最佳做法是将文本添加到场景而不是相机。这使用户可以选择向任一方向查看，以便他们可以看到所有内容。

https://aframe.io/docs/0.8.0/components/camera.html#fixing-entities-to-the-camera

如果您仍然决定将文本锚定到相机，那么简单的解决方案就是确保文本距离足够远，以便能够在最小的时间内看到所有文本舒适屏幕尺寸（垂直手机方向等）。

更复杂的解决方案是在<a-text>事件上更改text原语（或使用window.resize组件包含实体）的大小，并相应地调整文本容器。这可以通过创建自定义组件来完成。

这是一个基本的例子：

AFRAME.registerComponent('resize-text', {

  init: function() {

    var self = this;

    window.addEventListener('resize', function(e) {

      var height = window.innerHeight;
      var width = window.innerWidth;

      // console.log('resized!', height, width);

      self.el.setAttribute('width', ( width / 100 ));

    });

  }

});

以下是该代码的实施演示： https://codepen.io/dansinni/pen/pVJmQg

调整窗口大小或拖动中心分隔线，您将看到文本大小发生变化。

希望这有帮助。

修复了A-Frame中的文本位置

1 个答案: