javascript - 更改 PIXI.js 中的默认光标样式

Question

我想在触发 mousedown 事件时更改光标。我发现了很多如何实现这一目标的提示 - 但这些提示有一个主要问题。要更改 defaultCursorStyle 属性，我需要实例化 InteractionManager 原型(prototype)。

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

一开始看起来不错，但这里的问题是这个 InteractionManager 似乎通过 .on(event,callback) 事件绑定(bind)函数批量注册应用于 PIXI 对象的所有事件 每个实例。

这意味着，如果存在此 InteractionManager 的第二个实例，则所有事件都将绑定(bind)两次，因此会触发两次。我遇到了这个确切的问题。

所以我需要恢复我的更改并尝试访问默认 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)

每当光标离开渲染器时，PIXI 都会重置光标模式(这里正是 line )。因此，您可能希望每次更改时都将新的光标模式设置为默认值。

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')