Aframe.io：在< a-curvedimage>中添加边框在使用鼠标悬停时 [英] Aframe.io: Add border to <a-curvedimage> on mouseover using

问题描述

选择后如何在弯曲的图像上添加边框？

How would I add a border to a curved image when selected?

以下代码将更改图像的材质颜色，但是我希望添加一个

The following code will change the material color of the image however I'd prefer to add a border or glow instead.

AFRAME.registerComponent('selectable', {

    init: function () {
        var el = this.el;
        this.el.addEventListener('mouseenter', function (evt) {
            this.setAttribute('material', 'color', 'blue');

        });
        this.el.addEventListener('mouseleave', function (evt) {
            this.setAttribute('material', 'color', '');
        });

    }
});

这是 JSBIN 显示上面的内容

推荐答案

创建稍大的< a-curvedimage> ，但不要为它提供图像纹理 src ，只需提供纯色并也许切换不透明度/可见性。

Create a slightly bigger <a-curvedimage> behind yours, but don't give it an image texture src, just provide a solid color and perhaps toggle opacity/visibility.

AFRAME.registerComponent('selectable', {

    init: function () {
        var el = this.el;
        var backgroundEl = el.sceneEl.querySelector('#backgroundEl');
        this.el.addEventListener('mouseenter', function (evt) {
            backgroundEl.setAttribute('visible', true);

        });
        this.el.addEventListener('mouseleave', function (evt) {
            backgroundEl.setAttribute('visible', false)
        });

    }
});

这篇关于Aframe.io：在< a-curvedimage>中添加边框在使用鼠标悬停时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！