Electron 中创建透明窗口

最新推荐文章于 2024-07-17 09:39:56 发布

多云转晴ing

最新推荐文章于 2024-07-17 09:39:56 发布

阅读量2.1k

点赞数 11

文章标签： electron 前端 typescript

本文链接：https://blog.csdn.net/qq_42062727/article/details/135045481

版权

在开发 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=&

最低0.47元/天解锁文章

多云转晴ing

关注

11
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
Electron 中创建透明窗口

在开发 Electron 应用时，可能需要创建完全透明的窗口，比如我们要做一个屏幕内容共享的功能，在特定矩形区域内的内容才会被共享出来，而这个区域是一个透明且可被穿透的区域。首先我们需要再主进程上创建一个矩形窗口共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小，但不能最小化和最大化，也不能进入全屏状态，窗口也不能在程序坞中关闭。
复制链接

扫一扫