为什么 mousemove 事件在 PIXI JS 中执行到精灵区域之外？

Question

我开始学习 pixi js 这是我的 codepen,

我有一个精灵，我想为其调用 mousemove 事件，

它正在工作，你可以在 console.log 中看到它，但不仅对 sprite，它也在 sprite 之外工作。

这是我的代码：

const wrapper = document.querySelector(".wrapper");
let _w = wrapper.offsetWidth,
    _h = wrapper.offsetHeight,
    sprite;

const app = new PIXI.Application({
    width: _w,
    height: _h,
        backgroundColor: 0x000000,
    autoResize: true, 
});

wrapper.appendChild(app.view);

window.addEventListener('resize', resize);

function resize() {
  _w = wrapper.offsetWidth,
  _h = wrapper.offsetHeight;
  
  app.renderer.resize(_w, _h);
  setup();
}

const container = new PIXI.Container();
app.stage.addChild(container);

const loader = PIXI.Loader.shared; // PixiJS exposes a premade instance for you to use.
loader.add('bg','https://i.ibb.co/1T06dL6/bg.jpg').load(setup);

function setup() {
  let texture = loader.resources.bg.texture;
  sprite = new PIXI.Sprite(texture);
  const scale = Math.max( _w / sprite.texture.width, _h / sprite.texture.height);
  sprite.scale.set(scale,scale);
  sprite.x = Math.round( ( _w - sprite.width ) / 2);
  sprite.y = Math.round( ( _h - sprite.height ) / 2);
  container.addChild(sprite);
  
  sprite.interactive = true;
  sprite.buttonMode = true;
  sprite.on('mousemove', function() {
    console.log('fire');
  })
}

我做错了什么？我怎样才能只定位精灵区域？

Answer 1

试试这个：（你的代码有一些修改）https://codepen.io/domis86/pen/JjKeyzK

要点：

var interactionManager = app.renderer.plugins.interaction;
缩小 sprite（如果它适合整个 canvas 区域那么总是会命中）：

  sprite.width = 200;
  sprite.height = 200;

使用interactionManager检测命中：

  sprite.on('mousemove', function(interactionData) {
      //console.log('fire');
      if(interactionManager.hitTest(interactionData.data.global, this)) {  
          console.log("mousemove over sprite");  
      }
  })

文档：

为什么 mousemove 事件在 PIXI JS 中执行到精灵区域之外？

Why mousemove event execute out of sprite's area in PIXI JS?

pixi.js