hanyeah

鼠标位于不同的元件上，要有不同的样式。

以前做flash的时候，我们经常用到的方法是，侦听元件的rollOver和rollOut事件，改变光标类型。

但是这样，如果元件之间有嵌套关系（一个是另一个的parent），逻辑会很复杂。

直到现在，我们线上项目里边还是用的这种方式。

前两天新项目要实现这个功能，看了一下，pixijs里边显示对象是有cursor属性的，只需要指定cursor属性就行了，不用自己再实现一遍。

但是有些光标类型系统没有，需要用到自定义的，或者系统有的想要换成自己设计的。

显示效果实现方式还是是设置canvas.style.cursor，只不过是设置成url(..)的形式（css的知识，就不多说了）。

其实pixijs里边也可以实现自定义光标。

pixi中的源码

InteractionManager.prototype.setCursorMode = function setCursorMode(mode) {
    mode = mode || 'default';
    // if the mode didn't actually change, bail early
    if (this.currentCursorMode === mode) {
        return;
    }
    this.currentCursorMode = mode;
    var style = this.cursorStyles[mode];

    // only do things if there is a cursor style for it
    if (style) {
        switch (typeof style === 'undefined' ? 'undefined' : _typeof(style)) {
            case 'string':
                // string styles are handled as cursor CSS
                this.interactionDOMElement.style.cursor = style;
                break;
            case 'function':
                // functions are just called, and passed the cursor mode
                style(mode);
                break;
            case 'object':
                // if it is an object, assume that it is a dictionary of CSS styles,
                // apply it to the interactionDOMElement
                Object.assign(this.interactionDOMElement.style, style);
                break;
        }
    } else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) {
        // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry
        // for the mode, then assume that the dev wants it to be CSS for the cursor.
        this.interactionDOMElement.style.cursor = mode;
    }
};

mode就是我们制定的元件的cursor值。

第一种方式，我们可以直接设置元件的cursor值为url形式。

第二种方式，我们可以配置cursorStyles，把cursorStyles[mode]设置成一个自定义函数，这样就可以在函数里边设置canvas的style，来实现自定义光标了。

第三种方式，我们可以配置cursorStyles，把cursorStyles[mode]设置成一个url字符串形式。同理设置成object，object的style属性为url字符串。

还有第四种方式。

我们发现，有一个currentCursorMode记录了mode的值。

我们可以通过外部每次update的时候，判断currentCursorMode的值，根据currentCursorMode的值来设置canvas的style.cursor属性。

需要提一下怎么拿到这个InteractionManager对象的实例。通过Application的实例比如叫app，app.renderer.plugins.interaction 。

其实光标类型和当前光标位置的元件是一个映射关系。

我们只需要知道任何一个时刻，光标下边的元件是什么，就知道了该显示什么光标。

我们可以通过侦听mouseMove事件，记录下事件的target，就知道了光标下的器材，也就知道了要显示的光标。

有人说，这样会消耗性能。

其实不会有多大影响，因为不管你是否侦听mouseMove事件，pixijs内部都在算。

如果鼠标不动，器材动，挪到了鼠标下边，这种是不支持的。这种可以不考虑，非要考虑的话，就需要每帧多算一遍了（原来是鼠标move的时候才算）。

这种思路不只是适用于pixijs，其它也适用。比如flash，DOM等。