如何使用Electron Framework创建透明窗口 _Framework

本文概述

实现
重要笔记
例子

实现 MainWindow类构造函数将一个对象作为第一个参数。为了使窗口透明, 我们需要分别提供transparent和frame属性, 分别为true和false：

const {BrowserWindow} = require('electron')let win = new BrowserWindow({width: 800, height: 600, transparent:true, frame: false})win.show()

最好, 如果透明窗口是唯一的且是初始的, 则应在main.js文件中进行更改：

function createWindow () {// Create the browser window.mainWindow = new BrowserWindow({width: 800, height: 600, transparent: true, frame:false})// and load the index.html of the app.mainWindow.loadURL(`file://${__dirname}/index.html`)// Open the DevTools.//mainWindow.webContents.openDevTools()// Emitted when the window is closed.mainWindow.on('closed', function () {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.mainWindow = null})}

那应该已经使你的窗口透明。将以下标记设置为index.html文件的内容：

< !DOCTYPE html> < html> < head> < meta charset="UTF-8"> < title> Transparent Window< /title> < /head> < body> < div> < img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/> < /div> < /body> < /html>

并使用npm start执行项目, 你的应用程序将如下所示：

文章图片
如你所见, 该窗口是完全透明的, 并且你可以在后台看到VSCode。
局限性

你不能单击透明区域。我们将引入一个API来设置窗口形状以解决此问题, 有关详细信息, 请参见该问题。
透明窗口不可调整大小。将resizable设置为true可能会使透明窗口在某些平台上停止工作。
模糊过滤器仅适用于网页, 因此无法将模糊效果应用于窗口下方的内容(即在用户系统上打开的其他应用程序)。
在Windows操作系统上, 禁用DWM时透明窗口将不起作用。
在Linux上, 用户必须在命令行中添加– enable-transparent-visuals – disable-gpu以禁用GPU并允许ARGB生成透明窗口, 这是由上游错误导致的, 该错误是Alpha通道在某些NVidia上不起作用Linux上的驱动程序。
在Mac上, 本机窗口阴影不会显示在透明窗口上。

重要笔记如果开发人员工具区域可见, 则该窗口将不再透明。如果隐藏或未??显示, 则将保留透明效果。
【如何使用Electron Framework创建透明窗口】可能没有人想要不能移动的静态窗口, 因此可以使用CSS将拖动功能拖放到元素上：

.draggable-area{-webkit-app-region: drag; }

通过将draggable-area类添加到任何元素, 它将允许用户从该点拖动整个窗口。在某些平台上, 可拖动区域将被视为非客户端框架, 因此, 当你右键单击它时, 将弹出一个系统菜单。为了使上下文菜单在所有平台上都能正常运行, 你永远不要在可拖动区域使用自定义上下文菜单。
例子以下文档将创建一个非常简单的透明窗口, 其中包含几个按钮操作和一个可拖动区域：

< !DOCTYPE html> < html> < head> < meta charset="UTF-8"> < title> Transparent Window< /title> < style> .draggable-area{width:300px; height:300px; background-color:blue; color:white; -webkit-app-region: drag; }< /style> < /head> < body> < div> < img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/> < div> < input type="button" id="close" value="http://www.srcmini.com/Close app"/> < input type="button" id="devtools" value="http://www.srcmini.com/Open DEV Tools"/> < div class="draggable-area"> Drag the window here< /div> < /div> < /div> < script> var app = require('electron').remote; // Close app document.getElementById("close").addEventListener("click", () => {app.BrowserWindow.getFocusedWindow().close(); }, false); // Close app document.getElementById("devtools").addEventListener("click", () => {app.BrowserWindow.getFocusedWindow().openDevTools(); }, false); < /script> < /body> < /html>

先前的标记应生成一个类似以下的应用：