javascript - 限制鼠标事件到 Pixi.js 容器

Question

我正在使用 Pixi JS并通过一个简单的事件处理程序检测鼠标位置:

...

var stage = new PIXI.Container();
stage.interactive = true;

var handler = function(e){
  mouseX = renderer.plugins.interaction.mouse.global.x;
  mouseY = renderer.plugins.interaction.mouse.global.y;
}

stage.on("pointermove", handler);

...

但是mouseX和 mouseY当鼠标超出舞台边界(页面上的 <canvas> 元素)时正在更新。是否可以限制 mousemove事件到舞台内？

我试过了 stage.hitArea但这没有用。

Answer 1

这似乎是预期的行为；即使鼠标指针在容器之外，调用 mousemove 回调对于实现某些操作(例如拖放)也是必要的。

但是您可以使用 mouseover 和 mouseout 事件来跟踪指针是否位于对象上方，如下所示:

...
var graphics = new PIXI.Graphics();
graphics.hitArea = new PIXI.Rectangle(0, 0, 100, 100);
graphics.interactive = true;
stage.addChild(graphics);
...

var mouseIn = false;
graphics.on("mouseover", function(e) {
  console.log("over")
  mouseIn = true;
});

graphics.on("mouseout", function(e) {
  console.log("out");
  mouseIn = false;
});

graphics.on("mousemove",function(e) {
  if (mouseIn) {
    console.log("mouse move inside", e)
  }
});

(注意:我无法在舞台对象上触发 mouseout 和 mouseover 事件 - 但显然您应该只将子元素添加到舞台并与它们交互. 此外，hitArea 是必需的。)

这个 JSFiddle 应该演示这个想法，查看控制台输出: http://jsfiddle.net/qc73ufbh/

它看起来确实是功能而不是错误，请查看有关此主题的这些已关闭问题: https://github.com/pixijs/pixi.js/issues/2310和 https://github.com/pixijs/pixi.js/issues/1250