Изменить стиль курсора по умолчанию в PIXI.js

Question

Я хочу изменить свой курсор при запуске mousedown событие. Я нашел много подсказок, как этого добиться, но у них есть одна серьезная проблема. Чтобы изменить defaultCursorStyle собственность мне нужно создать экземпляр InteractionManager прототип.

var renderer = PIXI.autoDetectRenderer(640, 480),
var interactionManager = new PIXI.interaction.InteractionManager(renderer)
interactionManager.defaultCursorStyle = "crosshair" // a native html/css cursor style

Сначала это выглядит хорошо, но проблема здесь в том, что этот InteractionManager, похоже, регистрирует все события, примененные к объекту PIXI, через .on(event, callback) функция привязки события к экземпляру.

Это означает, что если бы был второй случай этогоInteractionManagerвсе события будут связаны дважды и, следовательно, сработают дважды. У меня была именно эта проблема.

Поэтому мне нужно было отменить мои изменения и попытаться получить доступ кнастройкам по умолчанию InteractionManager, Кто-то на форуме HTML5GameDev сказал мне, чтобы получить к нему доступ так:

renderer.plugins.interaction

зная, что я попробовал следующее:

renderer.plugins.interaction.defaultCursorStyle = "crosshair"

Мои события снова сработали правильно. Но смена курсора не произошла. Однако отладка строки сказала мне, что свойство defaultCursorStyle был успешно установлен в "crosshair", Сейчас я ищу способ сделать это изменение видимым.

Мой вопрос:

Есть ли лучший способ изменить стиль курсора, чем упомянутый выше? Если нет, как я могу сделать изменение курсора по умолчанию видимым после установки нового стиля по умолчанию InteractionManager?

Answer 1

В документации есть метод setCursorMode, думаю, это то, что вам нужно.

const app = new PIXI.Application({ height, width })
app.renderer.plugins.interaction.cursorStyles.default = 'crosshair'

setTimeout(() => {
  app.renderer.plugins.interaction.setCursorMode('pointer')
}, 1000)

Всякий раз, когда курсор покидает renderer, PIXI сбрасывает режим курсора (здесь точно строка). Таким образом, вы можете захотеть установить новый режим курсора по умолчанию каждый раз, когда вы меняете его.

function changeCursorMode (cursorMode) {
  app.renderer.plugins.interaction.cursorStyles.default = cursorMode
  app.renderer.plugins.interaction.setCursorMode(cursorMode)
}

app.renderer.plugins.interaction.cursorStyles.crosshair = 'crosshair'
changeCursorMode('crosshair')