无法在 Electron 中成功制作透明窗口(javascript) [英] Can't succeed in making transparent window in Electron (javascript)
问题描述
我正在尝试使用 ElectronJs 制作一个透明窗口，但我获得了黑色背景.
I am trying to make a transparent window with ElectronJs but I obtain a black background.
我在 Linux (Debian Jessie)
I am on Linux (Debian Jessie)
我尝试了不同的版本:latest、beta 和 nightly，结果相同.
I have tried different versions : latest, beta and nightly with the same result.
我有一个 NW.js 版本可以在同一台机器上运行，所以我认为这是一个 Electron 问题.
I have a version for NW.js that works on the same machine, so I expect it is a Electron problem.
这是我的 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>
问题是背景不是透明的而是黑色的:
The problem is that background is not transparent but black :
尝试了不同的方法但没有成功(例如 app.disableHardwareAcceleration())
Have tried different things without success (for example app.disableHardwareAcceleration())
有人知道解决方案或有完整的工作示例吗?
谢谢
-
编辑 1:也尝试过使用和不使用 --enable-transparent-visuals --disable-gpu正如这里
Edit 1 :
Have also tried with and without --enable-transparent-visuals --disable-gpu
as said here
推荐答案
这是 Electron 项目中一个非常古老的回归错误.
It's a very old regression bug in Electron project.
参见 https://github.com/electron/electron/issues/15947
要绕过这个问题，只需降级到 1.4.162.0.16，最后一个工作版本.
To bypass that problem, just downgrade to 1.4.162.0.16, the last working version.
编辑 1:如果您在准备好事件后至少等待 300 毫秒才能打开窗口，它将正常工作
EDIT 1 : if you wait at least 300ms after ready event to open windows it will work correctly
app.on('ready', () => setTimeout(onAppReady, 300));
而且你的 package.json 中不需要 --disable-gpu 选项
And you do not need --disable-gpu option in your 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
for me works with npm start and npm run startWithTransparentOption
编辑 3:请查看 @Thalinda Bandara 答案下面:它可能很有趣(未经测试，但已经在其他地方看到过).
EDIT 3 : Please have a look also to @Thalinda Bandara answer below : It might be interresting (not tested but already seen it elsewhere).
这篇关于无法在 Electron 中成功制作透明窗口(javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
