Electron Windows增加托盘悬浮框功能
2020-05-02 18:33
2116 查看
背景
在做Electron Windows 桌面应用时候,做鼠标悬浮到托盘图标上时显示一个悬浮框(例如做消息提醒),但因为Windows没有提供托盘mouse-enter/mouse-leave事件,无法直接做这个功能,考虑到还有mouse-move事件,弄个间接的方式实现。
实现步骤
1、监听mouse-move事件,当触发时,即也相当触发mouse-enter事件。
2、开始定时(100ms)获取托盘位置和鼠标位置,判断鼠标是否还在托盘图标里,当已不在时,触发mouse-leave事件并停止定时查询。
//判断鼠标是否还在托盘图标
trayBounds = tray.getBounds(); point = screen.getCursorScreenPoint(); if(!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y + trayBounds.height))){ //已不在托盘,触发mouse-leave }
3、当mouse-enter时,显示悬浮窗口到托盘上方,当mouse-enter,隐藏悬浮窗口。
PS:悬浮窗口需要设置置顶属性,且不显示在任务栏。
具体代码
var leaveInter, trayBounds, point, isLeave = true; function checkTrayLeave(){ clearInterval(leaveInter) leaveInter = setInterval(function(){ trayBounds = tray.getBounds(); point = screen.getCursorScreenPoint(); if(!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y + trayBounds.height))){ //触发mouse-leave clearInterval(leaveInter); isLeave = true; } }, 100) } tray.on('mouse-move', () => { if (isLeave) { //触发mouse-enter isLeave = false; checkTrayLeave(); } })
相关文章推荐
- 一比二购增加您指定的商品降价时,给您发送邮件通知的功能
- IYI referer插件下载与使用方法和增加Referer功能
- 给CuteEditor5增加了高亮代码显示功能(C#版)
- Android使用Popupwindow实现悬浮菜单功能
- 利用开源框架ZXing增加二维码功能(by 星空武哥)
- 扩展GridView控件(索引) - 增加多个常用功能
- android 实现了知乎日报的大部分功能,增加双击标题栏回到顶部以及双击 webview 返回两个实用功能
- ◆C语言函数库简介系列◆ 1.3 增加图片浏览器的功能 zz
- cxGrid在内置右键菜单的后面增加菜单项并实现诸多功能
- (NO.00001)iOS游戏SpeedBoy Lite成形记(二十九):增加排行榜功能2
- Ecc6.0和R/3的区别,新功能增加
- gridview 绑定数据源 SqlDataSource 实现增加修改删除功能
- 给新闻系统增加了RSS功能......
- sgit增加搜索功能
- java jdk1.5、 windows 32位字节 ----->实现系统托盘功能
- 如何给自己的程序增加插件功能-用DLL做插件
- Discuz!教程之DIY主题模块增加主题随机排序功能
- Android 在ListView中使用CheckBox,实现增加联系人的功能
- 在Matlab当中增加VBScript运行功能
- 定义一个日期类,并在其中设计一个成员函数,其功能是增加一天日期