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似乎批量注册通过{/ 1}}事件绑定函数每个实例应用于PIXI对象的所有事件。

这意味着如果存在此.on(event, callback)的第二个实例，则所有事件将被绑定两次，因此会触发两次。我有这个问题。

所以我需要还原我的更改并尝试访问默认 InteractionManager。 HTML5GameDev论坛中有人告诉我这样访问它：

InteractionManager

知道我尝试了以下内容：

renderer.plugins.interaction

我的活动现在再次正常运作。但是游标改变没有发生。但是，调试该行告诉我，属性renderer.plugins.interaction.defaultCursorStyle = "crosshair"已成功设置为defaultCursorStyle。现在我正在寻找一种让这种变化可见的方法。

我的问题：

有没有比上面提到的更好的方法来更改光标样式？如果不是，在将新样式设置为默认"crosshair"后，如何使我的默认光标更改可见？

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都会重置光标模式（这里正是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')

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

我的问题：

1 个答案: