PIXI 交互 - 重新定位画布无法按预期工作答案

【问题标题】：PIXI Interaction - Retargeting canvas doesn't work as expectedPIXI 交互 - 重新定位画布无法按预期工作
【发布时间】：2021-12-10 19:44:06
【问题描述】：

我目前正在尝试使 PIXI 交互与 DOM 元素一起工作。我的目标如下：当用户悬停一个块时，我想显示一个下拉菜单（现在是红色的<div>），当它离开 div 时，我希望交互返回到画布。
为此，我使用PIXI.InteractionManager 和它的方法setTargetElement。起初，目标是画布，当显示红色框时，它成为目标元素。到目前为止，一切都按预期工作。但是当光标离开框时，我使用setTargetElement并给它画布，然后出现了一个奇怪的问题，如图所示。
在gif中可以看到圆圈跟随光标没有问题，然后消失在红框上（这不是问题），然后，当光标离开框时，圆圈有一种缩放效果（它不是一个固定的偏移量，因为在 0,0 处，光标和圆是重叠的）。

在简化版本中，我就是这样做的：

// Creates the circle that follows the pointer
initialization() {
  this.app.stage.on('pointermove', (e) => {
        circle.position.copyFrom(e.data.global)
  })
}

// When the blue box is hovered
onHoverBlock() {
  // Get the red box from the DOM
  const redBox = document.getElementById('red-box')
  // Tell the interaction manager to target the box
  this.app.renderer.plugins.interaction.setTargetElement(redBox)
}

// Called on the `mouseleave` of the red box
onMouseLeaveRedBox() {
  // Assign the canvas back to the interaction manager
  this.app.renderer.plugins.interaction.setTargetElement(
        this.canvasReference
  )

  // From this point, the circle doesn't follow the pointer anymore ????
}

你知道发生了什么，以及如何解决这个问题吗？

【问题讨论】：

标签： javascript pixi.js

【解决方案1】：

好吧，毕竟答案很简单； setTargetElement 还接受一个默认设置为 1 的 resolution 参数...而我的应用程序以 2 的分辨率运行。?‍♂️
我只需要传递我的 HTML 元素和我的分辨率（通常是 app.renderer.resolution）就可以了！

【讨论】：