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

【问题标题】：interactive area is much smaller than the visible area of a filled circle交互区域远小于实心圆的可见区域
【发布时间】：2019-12-10 17:21:25
【问题描述】：

我正在添加一些圆圈（用颜色填充，以便我可以看到它们的位置）。每个圈子都是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);
  })
});

编辑：刚刚发现这篇文章，这意味着我的代码是正确的Click event is working only in the circle centre - 我仍然有问题。可能是什么原因造成的？

【问题讨论】：

标签： phaser-framework

【解决方案1】：

移相器论坛的一篇帖子（谢谢@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;
  });
});

【讨论】：