交互区域远小于实心圆的可见区域

interactive area is much smaller than the visible area of a filled circle

我正在添加一些圆圈(用颜色填充以便我可以看到它们的位置)。每个圆圈都是 setInteractive,监听 pointerdown。

问题 我希望能够单击圆圈内的任意位置并查看 console.log 输出。实际上,这仅在我单击圆圈内的相当多像素但不靠近边缘时才会发生——就好像交互区域比可见的实心圆小得多。我 认为我的形状的命中区域必须是矩形,而不是圆形 - 但我不知道如何使命中区域与渲染的圆相同。

var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
spotLayers.forEach(spotLayer => {
  spotLayer.spotMarkers.forEach(spotMarker => {

    var spotcircle = this.add.circle(spotMarker.x * (width / maxWidth), spotMarker.y * (height / maxHeight), 30 * (width / maxWidth));
    graphics.fillCircleShape(spotcircle);
    spotMarker.gameObject = spotcircle;

    spotMarker.gameObject.setInteractive();
    spotMarker.gameObject.on('pointerdown', function (pointer) {
      console.log('pointer x ' + pointer.x + ' pointer y ' + pointer.y);                        
    }, this);
  })
});

编辑:刚刚找到这个 post,这意味着我的代码是正确的 Click event is working only in the circle centre - 我仍然有问题。可能是什么原因造成的?

phaser 论坛的 post(谢谢 @samme)提供了带有圆形命中区域(默认为矩形)的工作代码

spotLayers.forEach(spotLayer => {
  spotLayer.spotMarkers.forEach(spotMarker => {
    var spotcircle = this.add.circle(
      spotMarker.x * (width / maxWidth),
      spotMarker.y * (height / maxHeight),
      60 * (width / maxWidth),
      0xffff00, // fillColor
      0.5 // fillAlpha
    );

    spotcircle.setInteractive(
      new Phaser.Geom.Circle(
        0.5 * spotcircle.displayWidth, // center x
        0.5 * spotcircle.displayHeight, // center y
        spotcircle.radius // radius
      ),
      Phaser.Geom.Circle.Contains
    );

    console.log('hitArea', spotcircle.input.hitArea); // Geom.Circle

    // Makes a debug shape for the hit area (thin green stroke)
    // It should align with `spotcircle` texture (solid yellow)
    this.input.enableDebug(spotcircle);

    spotcircle.on(
      'pointerdown',
      function (pointer) {
        console.log('pointer x ' + pointer.x + ' pointer y ' + pointer.y);
      },
      this
    );

    spotMarker.gameObject = spotcircle;
  });
});