gpt4 book ai didi

javascript - 无法在 Electron 中成功制作透明窗口(javascript)

转载 作者:行者123 更新时间:2023-12-04 11:18:35 25 4
gpt4 key购买 nike

我正在尝试使用 ElectronJs 制作一个透明窗口,但我获得了黑色背景。

我在 Linux (Debian Jessie)

我尝试了不同的版本:最新版本、测试版本和每晚版本,结果相同。

我有一个 NW.js 版本,可以在同一台机器上运行,所以我认为这是一个 Electron 问题。

这是我的代码 main.js :

const {app, BrowserWindow} = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({width: 920, height: 300, frame:true, transparent:true, backgroundColor: '#00FFFFFF'});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);

这是我的代码 index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body style="background-color:rgba(255,255,255,0); color:lightgrey;">
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.

<script>
// You can also require other files to run in this process
// require('./renderer.js')
</script>
</body>
</html>

问题是背景不是透明的而是黑色的:

enter image description here

尝试过不同的事情但没有成功(例如 app.disableHardwareAcceleration() )

有人知道解决方案或有完整的工作示例吗?

谢谢

-

编辑 1:
也试过有没有 --enable-transparent-visuals --disable-gpu如前所述 here

最佳答案

这是 Electron 项目中一个非常古老的回归错误。
https://github.com/electron/electron/issues/15947
要绕过这个问题,只需降级到 1.4.16 2.0.16 ,最后一个工作版本。

编辑 1:如果您在准备好事件后等待至少 300 毫秒以打开窗口,它将正常工作

app.on('ready', () => setTimeout(onAppReady, 300));
你不需要 --disable-gpu package.json 中的选项
"start": "electron --enable-transparent-visuals ."

编辑 2:
要使其开箱即用,请使用此存储库: https://gitlab.com/doom-fr/electron-transparency-demo
git clone https://gitlab.com/doom-fr/electron-transparency-demo
cd electron-transparency-demo
npm install
npm start
# or npm run startWithTransparentOption
# or npm run startWithAllOptions
对我来说与 npm start 合作和 npm run startWithTransparentOption
编辑 3:
也请查看 @Thalinda Bandara answer below :
它可能很有趣(未经测试,但已经在其他地方看到过)。

关于javascript - 无法在 Electron 中成功制作透明窗口(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53538215/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com