Question

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

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

Answer 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;
  });
});

互动区域比实心圆的可见区域小得多

1 个答案: