Question

我使用Pixi JS并通过简单的事件处理程序检测鼠标位置：

<div id="recent">
  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent-container">
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>
    <div class="thmbnl-recent">
      <img src="http://placehold.it/190x190">
      <h1 class="thmbnl-name">Sample</h1>
    </div>

  </div>

  <p id="right-button">></p>
  <p id="left-button">
    <</p>

</div>

但是，当鼠标位于舞台边界之外时，... 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，但这没有用。

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个事件 - 但显然你应该只将子元素添加到舞台并与它们互动。此外，{{ 1}}是必要的。）

这个JSFiddle应该演示这个想法，请参阅控制台输出： http://jsfiddle.net/qc73ufbh/

这似乎是功能而不是错误，请查看以下关于此主题的已关闭问题： https://github.com/pixijs/pixi.js/issues/2310和 https://github.com/pixijs/pixi.js/issues/1250

Answer 2

通过设置交互管理器的moveWhenInside属性可以轻松实现

HashMap

app.renderer.plugins.interaction.moveWhenInside = true;

将鼠标事件限制为Pixi.js容器

2 个答案: