无法点击六边形地图中的六边形 Pixi.js (Vue)

Question

我有一个使用 pixi.js 的六边形地图，当我想向我的六边形添加点击事件侦听器时

 const hex = new PIXI.Graphics();
          hex.beginFill(0xffffff, 1);
          hex.lineStyle(2.5, 0xffffff, 1);
          hex.drawPolygon(hexPoints.map((p) => new PIXI.Point(p.x, p.y)));
          hex.x = hexCenter.x;
          hex.y = hexCenter.y;

          hex.eventMode = "dynamic";
          hex.hitArea = new PIXI.Polygon(hexPoints.map((p) => new PIXI.Point(p.x, p.y)));
          hex.on("click", handleClick);
          function handleClick() {
            console.log(`Clicked on hexagon at grid coordinates (${coord.x}, ${coord.y})`);
            hex.off("click", handleClick); // remove the event listener
            app.stage.removeChild(hex); // remove the hexagon from the stage
          }
          app.stage.addChild(hex);

当我点击其中一个或移动鼠标时出现此错误。我尝试在 pixi 应用程序上设置 onclick 事件并找到它，但我的点击的 x 和 y 取决于屏幕上的位置而不是地图上的位置。有任何帮助或想法吗？

Answer 1

我在使用 Vue 3 和 pixijs 时遇到了同样的错误。问题是，如果您将 vue 反应式 api(ref) 与标准 js 声明（const、let）混合使用，它就会开始抛出错误。例如我有这样的东西；

抛出错误；

const container = ref<Container>()
container.value = new Container()
// container props
const myGraphic = new Graphics()
myGraphic.eventMode = "static"
container.value.addChild(myGraphic)

如果您按照上述操作，它会抛出与您相同的错误。

修复；

const container = ref<Container>()
const myGraphic = ref<Graphics>()
container.value = new Container()
myGraphic.value = new Graphics()
// setup myGraphics
myGraphic.eventMode = "static"
container.value.addChild(myGraphic)