svg - 如何在 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)
});