如何在 Phaser 3 中悬停时与 SVG 图像进行交互

Question

我有以下代码：

function preload() {
  this.load.svg('table', 'assets/svg/table.svg');
}

function create {
  this.add.image(400, 300, 'table');
}

当我将鼠标悬停在这张图片上时，如何突出显示它？

Answer 1

您可以像这样使用 pointerover 事件：

• 首先，声明一个变量来保存svg图像。

let tableSvg;

• 其次，预加载 svg 图片。

 function preload() {
   this.load.svg('table', 'assets/svg/table.svg');
 }

• 第三，将svg图片添加到变量中

tableSvg = this.add.image(400, 300, 'table');

• 第四，设置svg图片为可交互

tableSvg.setInteractive();

• 第五，像这样添加鼠标悬停在事件侦听器上：

tableSvg.on('pointerover', () => {
  console.log(tableSvg)
});

编辑：

您可以像这样更改图片的颜色：

tableSvg.on('pointerover', () => {
  // setTint method takes a color value & change the image's color accordingly
  tableSvg.setTint(185273)
});