透明窗口在Linux(Electron)上的实现

12

在Electron中创建新的BrowserWindow时,通常使用透明参数并将其设置为true可使窗口具有透明背景... 但就我所知,在Linux上并非如此。

现在我听说可以设置一些命令行参数... 但这并不起作用... 无论如何都只会显示黑色或白色...

// Should set the commandLine arguments and work...

const {app} = require('electron')

app.commandLine.appendSwitch('enable-transparent-visuals');
app.commandLine.appendSwitch('disable-gpu');

我听说这不是电子软件的问题,而是硬件的问题... 但我只是想确保一下,所以才提出这个问题!


你可能想看一下这个:https://ourcodeworld.com/articles/read/315/how-to-create-a-transparent-window-with-electron-framework - CodeF0x
我试过了,但它不起作用。 - undefinedChar
尝试设置 body 标签的 rgba 属性为 rgba(255,255,255,0.5)。这样会有效吗? - Maged Saeed
如果您能描述一下您的计算机和操作系统,那将有助于我们。 - doom
也许你可以把你的源代码分享到一个仓库里吗? - doom
从外部使用teranssetLinux命令行似乎也行不通。 我猜这是Chromium本身的问题,但我对Electron架构的了解还不够。 - matanster
4个回答

7

我遇到了和你一样的问题,因此写了以下内容:

在实现所请求的功能之前,解决方案很简单,只需在启动窗口之前添加延迟。

您可以克隆这个git仓库,将延迟设置为500,然后魔术通常就会出现。

编辑1: 使用这个仓库: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

对我来说,在Debian Jessie和electron 4.0.5上,它可以直接使用,适用于npm startnpm run startWithTransparentOption,但不适用于npm run startWithAllOptions
注意:务必设置至少500毫秒才能有机会使其工作。之后可以减小延迟,但不稳定。这就是为什么需要在transparentReady事件上进行操作的原因。
毁灭

@OneGuy,我已经更新了代码库,请尝试。如果不起作用,请尝试运行 npm run 命令。 - doom
好的,很酷。关于统计数据,你能告诉我们你使用的操作系统吗?还有,它是否也适用于 npm run startWithTransparentOptionnpm run startWithAllOptions 命令? - doom
如果您能够满足这个功能请求:https://github.com/electron/electron/issues/16809,那也很酷。毁灭。 - doom
目前我正在使用Xubuntu,但是在我的家用电脑上安装了几个发行版,它们也无法正常工作...这些发行版包括Ubuntu、Manjaro、Arch和Kubuntu,在此修复之前都无法正常工作,而且我还没有测试过这个修复方法...我有更多的发行版,但它们是我测试过的...至于npm运行命令,我只是得到一个缺少脚本错误,不确定原因是什么... - undefinedChar
警告:延迟可能取决于硬件-快速CPU,不需要太多延迟等。 - Sam Johnson

5
似乎有多个透明度问题,不同的发行版和硬件存在差异。有各种建议的解决方法。您可能无法使透明度在所有硬件和发行版上都能正常工作。
例子:
- https://github.com/electron/electron/issues/2170 - https://github.com/zeit/hyper/pull/842 - https://github.com/electron/electron/issues/15947 - Can't succeed in making transparent window in Electron (javascript) 来自Electron文档:
在Linux上,用户需要在命令行中添加--enable-transparent-visuals --disable-gpu来禁用GPU并允许ARGB使窗口透明。这是由于在Linux上某些NVidia驱动程序上alpha通道不起作用的上游错误导致的。

https://github.com/electron/electron/blob/master/docs/api/frameless-window.md


嗨,我认为我正在回答你问题的这一部分:“但我只是需要确保因此创建了这个问题!”基本上,似乎存在多个问题,并且可能特定于您的发行版/硬件。链接中提到了一些有趣的解决方法-例如,在窗口“准备就绪”后延迟几秒钟再使其可见。 - GrahamMc
1
到目前为止,什么都没起作用,我认为也不会有任何作用...虽然我很乐意听取任何人对解决我的问题的想法,并尝试这种解决方法。 - undefinedChar
也许可以尝试来自doom答案中的延迟建议,另外在某个地方提到您的视频卡和Linux发行版详细信息可能会增加价值。 - GrahamMc
抱歉!Chrome 上游的错误是使用 Electron 最不愉快的部分之一,但如果您在正确的位置记录问题,它可能会得到解决。 - GrahamMc
你会推荐我去哪里报告这个问题? - undefinedChar
显示剩余3条评论

1

这对我有用:

if(process.platform === "linux") {
  app.commandLine.appendSwitch('enable-transparent-visuals');
  app.disableHardwareAcceleration();

  app.on('ready', () => setTimeout(createWindow, 400));
}

0
这段代码可能适用于你。我在注释中添加了解释。
//electron can't be transparent on linux
//see issue on github: https://github.com/electron/electron/issues/2170

// app.disableHardwareAcceleration(); //use this
//or use these two lines code
app.commandLine.appendSwitch('enable-transparent-visuals');
app.commandLine.appendSwitch('disable-gpu');

//createWindow need to wait(more than about 100ms) if you want the window to be transparent
// app.whenReady().then(createWindow); //this won't work
app.commandLine.appendSwitch('enable-transparent-visuals');
app.commandLine.appendSwitch('disable-gpu');
app.on('ready', () => {
    setTimeout(() => {
        createWindow();
    }, 200);
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接