码迷,mamicode.com
首页 > Windows程序 > 详细

Electron Windows增加托盘悬浮框功能

时间:2020-05-01 16:48:22      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:etc   idt   步骤   code   src   桌面   直接   cursor   npoi   

背景

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

 

Electron Windows增加托盘悬浮框功能

标签:etc   idt   步骤   code   src   桌面   直接   cursor   npoi   

原文地址:https://www.cnblogs.com/lovesong/p/12813646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!