PIXI调用setTargetElement重定向canvas后交互不符合预期如何解决？

异常原因 #

• PIXI的setTargetElement接口本身设计初衷是初始化时指定交互目标，并不支持高频切换。每次切换目标后，InteractionManager内部不会主动重新同步新目标元素的尺寸、坐标映射矩阵，切回canvas时依然沿用了红色div的尺寸参数计算坐标，因此出现缩放偏移的问题。
• 切换目标后内部残留的旧指针事件缓存没有被清空，会导致后续pointermove事件触发异常，甚至完全不响应。

解决方案 #

方案1：修复现有切换逻辑 #

在切回canvas后主动调用交互管理器的resize方法，强制重新同步坐标映射关系即可，修改后的代码如下：

// Called on the `mouseleave` of the red box
onMouseLeaveRedBox() {
  const interaction = this.app.renderer.plugins.interaction
  // 切回canvas作为交互目标
  interaction.setTargetElement(this.canvasReference)
  // 强制重算交互坐标的映射参数
  interaction.resize()
}

方案2（更推荐）：不用切换交互目标 #

你完全不需要调用setTargetElement，仅通过CSS的pointer-events属性就能实现需求，不会触发坐标相关的异常：

1. 给红色div设置默认样式：

#red-box {
  display: none;
  pointer-events: none;
  /* 其余原有样式保留 */
}

2. 展示红色div时添加激活类即可：

#red-box.active {
  display: block;
  pointer-events: auto;
}

3. 删除所有setTargetElement相关的调用，浏览器会自动拦截红色div上的指针事件，不会透传到下层canvas，完全符合你的交互需求。

内容的提问来源于stack exchange，提问作者Ericlm