egret鼠标变小手实现思路

最新推荐文章于 2023-05-17 16:01:06 发布

sxtaosdo

最新推荐文章于 2023-05-17 16:01:06 发布

阅读量6.6k

点赞数 1

分类专栏： egret

本文链接：https://blog.csdn.net/sxtaosdo/article/details/50675621

版权

针对egret在移动端为主的特点，其在pc端的mouseOver和mouseOut功能不完善，无法直接展示鼠标小手效果。本文介绍了如何自定义实现这一功能，以按钮btn为例，通过获取canvas并进行碰撞检测，当鼠标坐标与按钮碰撞时，鼠标指针变小手，提供了一种解决思路。

摘要由CSDN通过智能技术生成

因为白鹭主要面向移动端，所以对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 &