有没有办法在使用<a-image>标签时保留图像比例？

Question

使用标签时有没有办法保留图像比例？

文档提到对维度进行硬编码，但在请求任意图像时会出现问题

https://aframe.io/docs/0.6.0/primitives/a-image.html

Answer 1

据我所知，a-image只是a-plane，在素材中有图片来源。

这意味着图像将在飞机上拉伸，你只能乱用

• <a-image>高度和宽度，即 a-plane 的高度和宽度，以米为单位，
• <img>高度和宽度，用于指定px中的图像尺寸，但图像仍然会在平面上拉伸。

您可以尝试在组件中自动执行此操作，根据输入a-plane宽度和高度设置<img>宽度和高度，具有px-meter比率：

AFRAME.registerComponent('imageSetter',{
  schema:{
     img:{type:'selector'}
  },
  init:function(){
      let lowResRatio = 0.01;
      this.el.setAttribute('height',this.data.img.height*lowResRatio);
      this.el.setAttribute('width',this.data.img.width*lowResRatio);
  }
});

在我的小提琴中查看：https://jsfiddle.net/gftruj/5d9j9nqm/2/。

否则，您需要提前准备图像。

的更新

您可以修改组件以获取图像尺寸，获取高度/宽度比，并相应地设置宽度和高度：

AFRAME.registerComponent('foo',{
  schema:{
    img:{type:'selector',default:''},
    height:{}
  },
  init:function(){
    let data = this.data;
    let ratio = 1/100;
    this.el.setAttribute('width',data.img.width*ratio);
    this.el.setAttribute('height',data.height);
    this.el.addEventListener('materialtextureloaded', (e)=>{
    var w = e.detail.texture.image.videoWidth ||   e.detail.texture.image.width;
    var h = e.detail.texture.image.videoHeight || e.detail.texture.image.height;
    let ratio = w/h;
    this.el.setAttribute('width',data.height*ratio);
    });
  }
})

现场小提琴：https://jsfiddle.net/5d9j9nqm/4/
现在它将自己固定到给定的高度。