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

【问题标题】：change default cursor style in PIXI.js更改 PIXI.js 中的默认光标样式
【发布时间】：2017-03-09 19:48:45
【问题描述】：

我想在触发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 似乎通过.on(event, callback) 事件绑定函数 per 实例批量注册应用于 PIXI 对象的所有事件。

这意味着如果有此InteractionManager 的第二个实例，所有事件将被绑定两次，因此被触发两次。我有这个确切的问题。

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

renderer.plugins.interaction

知道我尝试了以下方法：

renderer.plugins.interaction.defaultCursorStyle = "crosshair"

我的活动现在又可以正常工作了。但是光标没有发生变化。但是调试该行告诉我属性defaultCursorStyle 已成功设置为"crosshair"。现在我正在寻找一种方法来使这种变化可见。

我的问题：

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

【问题讨论】：

在移动端现在很难检查，但是：github.com/pixijs/pixi.js/blob/master/src/interaction/… 表示下次更新时使用 defaultCursor 并且有更新方法，试试看？

标签： javascript css pixi.js

【解决方案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')

【讨论】：