Как взаимодействовать при наведении курсора с изображением SVG в Phaser 3

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