如何使用 Aframe 组件返回之前的值？答案

【问题标题】：How to return to previous value with Aframe component?如何使用 Aframe 组件返回之前的值？
【发布时间】：2021-08-19 14:09:31
【问题描述】：

我为 Aframe 编写了一个组件，用于在光标悬停时更改图像的 src 和 scale。然后，当它退出时，我想恢复默认值。

所以，我存储了默认 src 和默认比例值，然后用 setAttribute 更新它当光标离开时，它会返回到默认的src，而不是默认的比例。

如何正确地做到这一点？

这是我的组件：

AFRAME.registerComponent('change-hotspots-on-hover', {
    schema: {
        src: {default: '#hotspots'},
        scale: {type: 'vec3', default: {x: 1, y: 1, z: 1}},
    },

    init: function () {
        var data = this.data;
        var el = this.el;
        var defaultSrc = el.getAttribute('src');
        var defaultScale = el.getAttribute('scale');

        console.log("Init");

        el.addEventListener('mouseenter', function (){
            console.log("Enter");

            el.setAttribute('src', data.src);
            setTimeout(() => { 
                el.setAttribute('scale', data.scale);
            }, 1);
        });

        el.addEventListener('mouseleave', function (){
            console.log("Exit");

            el.setAttribute('src', defaultSrc);
            el.setAttribute('scale', defaultScale);
        });
    }
});

还有我的图片：

<a-image position="-10 4 -10" scale="1 1 1" material="" src="#hotspot" 
change-hotspots-on-hover="src: #hotspot_hover; scale: 7 3 2;"></a-image>

【问题讨论】：

哪个鼠标事件不能正常工作？ “mouseleave”还是“mouseenter”？
两者都能正常工作：src 和 scale 随 mouseenter 变化，Src 随 mouseleave 而变化但不缩放。问题似乎来自在 mouseenter 之后被覆盖的 var defaultScale。我试图 consol.log 它，之后就不一样了。
请对此进行测试：使用“const”或“let”代替带有“var”的变量声明
不工作。没有任何变化：/

标签： javascript aframe

【解决方案1】：

您可以通过登录您的mouseover 监听器来检查：

console.log(defaultScale) // here are the default scale values
el.setAttribute('scale', data.scale);
console.log(defaultScale) // here are the data.scale values

您可以解决它，例如，将默认比例字符串化，从而将其变成一个简单的“1 1 1”（提供其默认值）：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script>
    AFRAME.registerComponent('change-hotspots-on-hover', {
      schema: {
        src: {default: '#source'},
        scale: {type: 'vec3', default: "1 1 1"},
      },
      init: function() {
        var data = this.data;
        var el = this.el;
          var defaultSrc = el.getAttribute('src');
          var defaultScale = AFRAME.utils.coordinates.stringify(el.getAttribute('scale'));
          el.addEventListener('mouseenter', e => {
            el.setAttribute('src', data.src);
            setTimeout(() => {
              el.setAttribute('scale', data.scale);
            }, 1);
          });

          el.addEventListener('mouseleave', e => {
            el.setAttribute('src', defaultSrc);
            el.setAttribute('scale', defaultScale);
          });
      }
    });
  </script>
  <a-scene cursor="rayOrigin: mouse">
    <a-assets>
      <img id="image" src="https://i.imgur.com/wjobVTN.jpeg">
    </a-assets>
    <a-box position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9" change-hotspots-on-hover="src: #image; scale: 2 2 2"></a-box>
  </a-scene>

【讨论】：