egret鼠标变小手实现思路

因为白鹭主要面向移动端，所以对pc端功能支持是马马虎虎，目前还没有实现mouseOver、mouseOut功能，导致pc端上面不能实现鼠标表小手功能。

项目需要就自己写了一个，说说大概思路..

下面是以鼠标移动到按钮btn上变成小手为例：

1.首先获取egret所在的canvas，这里使用js获取的，方法很多，这里只是其中一种

this.canvas=document.getElementsByTagName("CANVAS")[0];

2.对canvas添加监听，我这里监听的是mousemove鼠标移动事件

this.canvas.addEventListener('mousemove',this.onMove);

  private onMove(evt: MouseEvent): void {        var temp = getPoint(evt.currentTarget,evt.x,evt.y);        if(btn.hitTestPoint(temp.x,temp.y)) {//这里使用egret显示对象自带的碰撞检测,btn是egret的显示对象            this.canvas.style.cursor = "pointer";//手型鼠标        }        canvas.style.cursor = "auto";//指针型鼠标</span>

}

3.在onMove方法中可以获取到鼠标当前的x、y坐标值，但是这个坐标值是全局的，需要转换才能用。目前egret引擎的版本是3.0.2，在index.html中设置了css样式，所以需要对这个进行处理

    private getPoint(canvas:any,x: number,y: number): any {        var style = window.getComputedStyle(canvas,null);        var rect = canvas.getBoundingClientRect();        return {            x: (x - rect.left) * (canvas.width / parseFloat(style["width"])),// 全局坐标*水平方向的缩放因子            y: (y - rect.top) * (canvas.height / parseFloat(style["height"]))        };    }

这里返回的x和y就是在canvas里面的x和y值

4.btn是一个显示对象，应该有hitTestPoint方法，用上面获取到的x、y做碰撞检测，如果发生碰撞说明在btn上，否则不在

<span style="white-space:pre"></span>if(btn.hitTestPoint(x,y)){            this.canvas.style.cursor ="pointer";//小手图标        }else{            this.canvas.style.cursor = "auto";//箭头        }

5.在使用后记得移除监听

this.canvas.removeEventListener('mousemove',this.onMove);

以上就是egret鼠标变小手的思路，当然除了小手也可以变成其他图标，下面给出常用的鼠标样式：

auto        move           no-drop      col-resizeall-scroll  pointer        not-allowed  row-resizecrosshair   progress       e-resize     ne-resizedefault     text           n-resize     nw-resizehelp        vertical-text  s-resize     se-resize   inherit     wait           w-resize     sw-resize

demo:

class PcMouseHelper {    private static _instance: PcMouseHelper;    private isListening: boolean = false;    private canvas: any;    private list: Array<egret.DisplayObjectContainer>;    public constructor() {        this.list = new Array<egret.DisplayObjectContainer>();    }    private add(): void {        if(this.isListening == false) {            this.isListening = true;            this.canvas = document.getElementsByTagName("CANVAS")[0];            this.canvas.addEventListener('mousemove',this.onMove);        }    }    public addListener(target: egret.DisplayObjectContainer): void {        this.add();        this.list.push(target);    }    public removeListener(target: egret.DisplayObjectContainer): void {        if(PcMouseHelper._instance.list.indexOf(target) > -1) {            PcMouseHelper._instance.list.splice(PcMouseHelper._instance.list.indexOf(target),1);            this.checkCount();        }    }    private checkCount(): void {        for(var key in PcMouseHelper._instance.list) {            return;        }        PcMouseHelper._instance.canvas.style.cursor = "auto";        this.canvas.removeEventListener('mousemove',this.onMove);        this.isListening = false;    }    private onMove(evt: MouseEvent): void {        var len: number = PcMouseHelper._instance.list.length;        var temp = PcMouseHelper._instance.getPoint(evt.currentTarget,evt.x,evt.y);        for(var i = 0;i < len;i++) {            var target: egret.DisplayObjectContainer;            if(PcMouseHelper._instance.list[i].hitTestPoint(temp.x,temp.y)) {                PcMouseHelper._instance.canvas.style.cursor = "pointer";                return;//目前同一时间鼠标只能悬浮在一个对象上            }        }        PcMouseHelper._instance.canvas.style.cursor = "auto";    }        /**     * 获取canvas内的鼠标坐标     * egret 3.0.2版本设置了 css width/height     * @param canvas     * @param x     * @param y     */    private getPoint(canvas:any,x: number,y: number): any {        var style = window.getComputedStyle(canvas,null);        var rect = canvas.getBoundingClientRect();        return {            x: (x - rect.left) * (canvas.width / parseFloat(style["width"])),// 全局坐标*水平方向的缩放因子            y: (y - rect.top) * (canvas.height / parseFloat(style["height"]))        };    }    public static get instance(): PcMouseHelper {        if(PcMouseHelper._instance == null) {            PcMouseHelper._instance = new PcMouseHelper();        }        return PcMouseHelper._instance;    }}