当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Electron Windows增加托盘悬浮框功能

Electron Windows增加托盘悬浮框功能

2020年05月02日  | 移动技术网IT编程  | 我要评论

背景

在做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();
    }
})

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网