当我们创建多个精灵时,当hitArea多边形中的任何鼠标悬停时,都会调用mouseover函数。不管是否应用于另一个对象。

Sprite的可见性通过对数组进行排序来控制。添加到stage.children中的sprite越晚,它将越高。这是一个矩形重叠在另一个矩形上的示例。同时,当我们将东西放在底部精灵的左上角时,对象函数顶部的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/

最佳答案

我知道这是旧线程,但是对于那些进入此页面的人来说,可以通过扩展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/

07-24 09:51
查看更多