要求
在录制之前,有个倒计时的蒙层提示;
效果
electron录制工具-倒计时准备录制效果
实现
1、无边框、透明窗口
2、保持窗口层级为最顶层
3、倒计时效果
4、倒计时结束之后修改系统托盘的状态
代码地址
// 创建 无边框、透明窗口;保持窗口层级为最顶层
new BrowserWindow({
width: 800,
height: 600,
frame: true, // 无边框
transparent: true, // 透明窗口
alwaysOnTop: true, // 窗口总是显示在最前面
webPreferences: {
preload: path.join(__dirname, 'preload.mjs'),
},
})
// 倒计时效果;结束倒计时 通知 【count-down-end】
useEffect(() => {
if (count <= 0) {
window?.ipcRenderer.send('count-down-end')
return
}
const interval = setInterval(() => {
setCount(count - 1)
}, 1000)
return () => {
interval && clearInterval(interval);
}
}, [count])
// 监听倒计时结束,切换【系统托盘】状态
maskWin.webContents.on('did-finish-load', () => {
ipcMain.on('count-down-end', () => {
maskWin?.close()
maskWin = null
tray?.destroy()
tray = null
createTray(1)
})
// maskWin?.webContents.openDevTools()
})