在开发 Electron 应用时,可能需要创建完全透明的窗口,比如我们要做一个屏幕内容共享的功能,在特定矩形区域内的内容才会被共享出来,而这个区域是一个透明且可被穿透的区域。
首先我们需要再主进程上创建一个矩形窗口
const screenRegionShareWindow = new BrowserWindow({
width: 800,
height: 600,
// 关键!创建无边框窗口,没有窗口的某些部分(例如工具栏、控件等)
frame: false,
// 关键!创建一个完全透明的窗口
transparent: true,
minHeight: Math.ceil(workAreaSize.height * 0.3),
minWidth: Math.ceil(workAreaSize.width * 0.3),
// 窗口可移动
movable: true,
// 窗口可调整大小
resizable: true,
// 窗口不能最小化
minimizable: false,
// 窗口不能最大化
maximizable: false,
// 窗口不能进入全屏状态
fullscreenable: false,
// 窗口不能关闭
closable: true,
webPreferences: {
nodeIntegration: true,
contextIsolation: false // 否则页面无法用require
}
});
共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小,但不能最小化和最大化,也不能进入全屏状态,窗口也不能在程序坞中关闭。
实现点击穿透
要创建一个点击穿透窗口,也就是使窗口忽略所有鼠标事件,可以调用 win.setIgnoreMouseEvents(ignore) API
screenRegionShareWindow.setIgnoreMouseEvents(true)
设置可拖动元素
默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏)在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。
要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:
body {
-webkit-app-region: drag;
}
前端部分实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name=&