Pixi.js: 非交互式精灵会阻止交互式精灵的点击(而DOM不会再将鼠标悬停在画布上了)?

创建于 2015-04-26  ·  23评论  ·  资料来源: pixijs/pixi.js

希望这两个词足够接近,足以实际解决同一问题。 我正在使用pixi v3

a。)每当我有两个重叠的子画面时,即使顶部子画面具有interactive = false,我在底部子画面上的鼠标悬停(interactive = true)也会被所讨论的第一个子画面阻止。

b。)将鼠标悬停在我用于游戏HUD的某些DOM元素上时,其下方的子画面仍然像直接将鼠标悬停在上面一样。 在v2中并没有发生这种情况。 这是由于鼠标悬停而不是单击而发生的。

我一直在寻找v3的CDN链接,以便可以尝试为这些创建jsfiddle,但是运气不佳。

🕷 Bug

最有用的评论

诀窍是为DisplayObject或DisplayObjectContainer设置一个空的hitArea:
mouseDisabledElement.hitArea =新的PIXI.Rectangle(0,0,0,0);

所有23条评论

https://rawgit.com/

真是太酷了。 您只需将dev bin文件链接粘贴到此处,它将为您提供一个URL,该URL可直接从GitHub加载代理。

例如,您可以粘贴:

https://github.com/GoodBoyDigital/pixi.js/blob/dev/bin/pixi.js

并出去:

https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js

谢谢,我今天将制作一些jsfiddle示例并将其发布到此处。

我在正确设置jsfiddle时遇到问题,因为我认为我需要使用一张图像来说明我的观点,但希望我能给你一些代码和观察结果,以便弄清楚发生了什么。

理论性错误案例(伪代码段):

var bunny = PIXI.Sprite.fromFrame(building.image); 
bunny.interactive = true;
stage.addChild(bunny);
bunny.hitArea = poly;
bunny.on('mouseover',function(data){
      bunny.brighten
});
bunny.on('mouseout',function(data){
      bunny.unbrighten
});
var g2 = new PIXI.Graphics();
    g2.beginFill(0xC03302);
    g2.drawCircle(0, 0, 100);
    g2.endFill(); 
    var cant_touch_this = new PIXI.Sprite(g2.generateTexture());
    cant_touch_this.position.x = bunny.position.x - 100;
    cant_touch_this.position.y = bunny.sprite.position.y - 100;
stage.addChild(cant_touch_this);

两个Sprite重叠,兔子的处理程序在第二个Sprite上停止工作一次。

当我在jsfiddle(http://jsfiddle.net/h63mLx7b/)中执行类似操作时,该错误不存在。 我在这里看到的主要区别之一是,在小提琴中,我不使用fromImage或fromFrame,而是生成纹理。 我在游戏环境中尝试了此操作(使用2个生成纹理),但该错误仍然存​​在。

我想考虑的下一件事是hitArea,但是当我将hitArea添加到jsfiddle中时,它没有重新创建该bug。 我将继续通过我的代码进行归档,以查看是否还有其他重要的代码片段,但是也许您看到的是我缺少的内容? PIXI中是否有某种意图使精灵生成行为,以防止发生其下可能会意外包含的事件?

可能也是有用的信息,兔子有

    bunny.pivot.x = 0.5;
    bunny.pivot.y = 1;
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 1;

另一个有用的花絮:在我的游戏环境中,jsfiddle代码重新创建了该错误! 所以我想最后一个问题变成,什么全局选项(或Containers本身的选项)可以创建此选项?

wahooooooo我想通了! 但是,对我来说,这可能是比您更好的消息,假设这确实是一个错误而不是预期的行为。

http://jsfiddle.net/h63mLx7b/1/

当Sprites存在于具有Interactive = true的容器中时,就会发生该错误。 如果您将stage.interactive设置为false,则该错误将消失。

编辑:首先错误的小提琴链接

@englercj ping。 只是好奇如果您有机会看看这个

我还没有,对不起Shadow。

我现在正在发生许多生活事件,并且没有太多的辅助项目时间。 我希望很快能解决一个错误,但是现在非常忙:(

不用担心,我明白这是怎么回事:)

嘿,偷看-对dev分支做了一些调整,方法如下:

http://jsfiddle.net/g3vcfmef/

现在可以了!
谢谢 :)

确认也要完成我的工作。 谢谢一堆!

实际上,我原始问题的第二部分仍然构成了一个问题:

b。)将鼠标悬停在我用于游戏HUD的某些DOM元素上时,其下方的子画面仍然像直接将鼠标悬停在它们上一样/单击。 在v2中并没有发生这种情况。 这是由于鼠标悬停而不是单击而发生的。

这引起了一些问题,因为我尝试单击DOM HUD元素之一,下面的画布仍然触发单击,并且发生了我的主Container mouseup处理程序,因此在创建/显示菜单后立即隐藏了菜单。 我试图在jquery mouseup处理程序中使用e.stopPropagation,但无济于事。

stage.on('mouseup',function(data){
console.log("Still triggering");
});

$('body').on('mouseup','#battle-menu:not(.attack-island)',function(e){
e.stopPropagation();
});

战斗菜单重叠阶段。

抱歉重新打开,我应该重新阅读我的原始帖子:(

http://jsfiddle.net/prg9jubt/2/

这很奇怪,因为有时阶段性点击会在其他时间触发,但不会。 只需在周围看到

如果有帮助的话,这种行为似乎只发生在mouseup上。 按下鼠标并单击似乎稳定。

在#1765中恢复为5344062ef4657857ce6a20bea4681e5d66c1c2b2。 我们正在寻找解决这些问题的最佳方法。

@englercj因此,请确保我遵循,我提到的重叠精灵错误再次出现在pixi的master分支中,而你们都在寻找一种更好地解决它的方法吗?

只想确保我知道自己的立场/如果我现在可以继续前进以从事其他工作

对,那是正确的。

好的,感谢您的更新@englercj

固定的! :+1:

哪种情况是固定的? 如果我的容器的interactive = true,并且粒子发射器阻止了交互式小精灵的视图,则该小精灵的鼠标事件仍不会触发。 显然,如果我将容器的interactive = false设置为true,则会触发事件。 但是,我要求容器是交互式的,以便可以拖动和缩放地图。 我正在使用代码的最新开发版本。

诀窍是为DisplayObject或DisplayObjectContainer设置一个空的hitArea:
mouseDisabledElement.hitArea =新的PIXI.Rectangle(0,0,0,0);

该线程已被自动锁定,因为它关闭后没有任何近期活动。 请为相关的错误打开新一期。

此页面是否有帮助?
0 / 5 - 0 等级