Question

当我们创建多个精灵时，在hitArea多边形中任何悬停时会调用鼠标悬停功能。无论如何，是否适用于另一个对象。

通过对数组进行排序来控制精灵的可见性。后者被添加到stage.children中的精灵中，它会越高。这是一个例子，其中一个矩形叠加在另一个上。同时，当我们把东西放在底部精灵的左上角时，在对象函数的顶部，鼠标悬停将工作调用，虽然它在另一个之下。

如何解决这个问题？ hitarea不合适，因为设施将不断拖延。

预先感谢您的回复！

var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth,         window.innerHeight, null);

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );

var texture = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xFFFF00);
r1.drawRect(0, 0, 400, 400)
r1.endFill()
texture.render(r1);

var texture2 = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xDDDD00);
r1.drawRect(0, 0, 300, 300)
r1.endFill()
texture2.render(r1);

createBunny(100, 100, texture)
createBunny(120, 120, texture2)

function createBunny(x, y, texture) {

    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    bunny.scale.x = bunny.scale.y = 0.5;

    bunny.mouseover = function(data) {
        console.log('mouse over!')
    }

    bunny.mousedown = bunny.touchstart = function(data) {
        this.data = data;
        this.alpha = 0.9;
        this.dragging = true;
        this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
        this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;      
    };

    bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data) {
        this.alpha = 1
        this.dragging = false;
        this.data = null;
    };

    bunny.mousemove = bunny.touchmove = function(data) {
        if(this.dragging) {
            var newPosition = this.data.getLocalPosition(this.parent);
            this.position.x = newPosition.x - this.sx;
            this.position.y = newPosition.y - this.sy;
        }
    }

    bunny.position.x = x;
    bunny.position.y = y;

    stage.addChild(bunny);
}

function animate() {
    requestAnimFrame( animate );
    renderer.render(stage);
}

http://jsfiddle.net/sD8Tt/48/

Answer 1

我知道这是旧帖子，但是对于那些来到这个页面的人来说，可以通过扩展PIXI的Sprite类来解决这个问题，请看下面的代码。

PIXI.Sprite.prototype.bringToFront = function() {
    if (this.parent) {
        var parent = this.parent;
        parent.removeChild(this);
        parent.addChild(this);
    }
}

并在像这样的mousedown事件中调用上面的方法

this.bringToFront();

工作JSFiddle http://jsfiddle.net/6rk58cqa/

PIXI JS优先级调用鼠标悬停事件

1 个答案: