大家好，我是前端西瓜哥。
最近又要开始学习 pixijs 了。
今天我们来学习如何给 pixijs 的图形设置光标（cursor）。
pixijs 版本为 7.4.2
首先我们先用 pixijs 绘制好一个椭圆和一个矩形。
import { Application, Graphics } from'pixi.js';
const app = new Application({
width: 500,
height: 400,
antialias: true,
backgroundColor: 0xffffff,
});
const ellipse = new Graphics()
.beginFill(0xff0044)
.drawEllipse(130, 100, 60, 30)
.endFill();
const rect = new Graphics()
.beginFill(0x0000ff)
.drawRect(200, 150, 60, 40)
.endFill();
app.stage.addChild(ellipse, rect);
document.body.appendChild(app.view);渲染结果为：
设置光标
我们先给 ellipse 设置为可交互，这样图形才能激活 hitTest 功能和触发事件。
ellipse.eventMode = 'static';
// ellipse.interactive = true; // 这个废弃了然后设置 cursor 为 pointer。
ellipse.cursor = 'pointer';看看效果：
原理是鼠标移动时会进行 hitTest，当椭圆的 hitTest 为 true 时，将 canvas 画布元素的 style 的 cursor 属性设置为椭圆对应的 cursor，即 "pointer"。
当鼠标移出椭圆时，canvas 的 cursor 值会恢复为默认的 "inherit"。
矩形因为没设置为可交互，所以没有任何反应。
设置自定义光标
一般来说，pixijs 只是会将 canvas 的 cursor 改为对应的字符串值，比如 "default"。
但我们可以全局配置 app.renderer.events.cursorStyles，重新定义 "default" 为我们自定义的光标图片。
app.renderer.events.cursorStyles.default =
'url(./suika-cursor-default.png) 5 5, auto';
app.renderer.events.cursorStyles.pointer =
'url(./suika-cursor-move.png) 16 16, auto';语法同 CSS 的 cursor。
效果：
其实就是更新了一个映射表，当 pixijs 要设置图形的 cursor 值时，如果发现映射表中作为 key 有映射值，会改为使用映射值；否则直接使用图形的 cursor 值。
