pixi.js⾃定义光标样式
pixi 介绍
Pixi是⼀个超快的2D渲染引擎，通过Javascript和Html技术创建动画或管理交互式图像，从⽽制作游戏或应⽤。
项⽬地址：
API 地址：
中⽂教程地址：
游戏中都会做⼀些跟整个游戏画⾯风格相符的定制光标，⽐如英雄联盟中的棱形光标。在光标移动到敌对单位（交互对象）上时，会变成⼀把⼩ ，释放技能时⼜变成了另外的形状。ps：为了素材我特意打了⼀局游戏(⼿动狗头).
⾸先，我们需要创建⼀个可交互的区域。
const star = new PIXI.Graphics();
star.beginFill(0xfff8dc);
star.drawStar(200, 200, 5, 50);
star.interactive = true;//启⽤交互响应
star.buttonMode = true;//设置交互时光标样式为 pointer 等同于 star.cursor = 'pointer'
app.stage.addChild(star);
在之前的⽂章中，我们提到过，可交互的关键就在于需要设置DisplayObject的交互属性interactive。只有当interactive=true时，触摸、点击、⿏标等事件才能被该对象捕获到。（对于交互对象，原本的交互范围只是元素本⾝的位置范围，但是还可以通过设置hitArea来定义更⼤的交互范围。）
cursor : This defines what cursor mode is used when the mouse cursor is hovered over the displayObject.
buttonMode: Setting this changes the 'cursor' property to 'pointer'.
CSS cursor 样式
在我们看到的html中，所有的pixi绘制都是基于⼀个canvas实现的。也就是说，光标的变化其实都是相当于修改了canvas的cursor样式。
cursor: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer |
progress | wait |cell | crosshair | text | vertical-text | alias | copy | move |
no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize |
se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize |
col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];
1、cursor属性适⽤于所有元素；
2、cursor属性仅对具有指针设备（如⿏标）的设备有效；它对触控设备没有任何影响。
3、并⾮所有浏览器都⽀持cursor属性的所有属性值，且所有属性值在所有浏览器和操作系统中显⽰的效果不⼀定相同。css鼠标点击样式
通过给不同的五⾓星设置不同的cursor属性，就可以实现这样的效果。
注意：buttonMode和cursor的值会互相覆盖，以最后设置的为准。
全局⾃定义cursor样式
千呼万唤始出来直接上代码：
const defaultIcon = "url('imgs/bunny.png'),auto";
const hoverIcon = "url('imgs/bunny_saturated.png'),auto";
cursorStyles()是⼀个Object<string, Object>类型的键值对，string字符串是⽤于设置cursor的值，object为对应cursor的具体样式内容。
这个解释起来⽐较拗⼝，看个样例就明⽩了。
const hoverIcon = "url('imgs/bunny_saturated.png'),auto";
//定义⼀个名为mycursor的光标样式并绑定具体css
//添加⼀个新的交互对象并将其cursor设置为mycursor
const star = new PIXI.Graphics();
star.interactive = true;
star.cursor = 'mycursor';
...
总结
本⽂介绍了pixi中设置DisplayObject触发交互的⽅式、buttonMode和cursor之间的关系以及CSS cursor，通过对全局cursorStyles的设置实现了全局的⾃定义光标。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。