PIXI JS 优先调用 mouseover 事件答案

【问题标题】：PIXI JS Priority call mouseover eventPIXI JS 优先调用 mouseover 事件
【发布时间】：2014-12-20 06:45:02
【问题描述】：

当我们创建多个精灵时，mouseover 函数会在 hitArea 多边形中任何悬停 时被调用。无论如何，是否应用于另一个对象。

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

如何解决这个问题？ 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/

【问题讨论】：

标签： javascript jquery html pixi.js

【解决方案1】：

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

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/

【讨论】：