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

新手上路,请多包涵

我正在尝试使用 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>

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

在此处输入图像描述

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

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

谢谢

-

编辑 1:也尝试过使用和不使用 --enable-transparent-visuals --disable-gpu 如此 所述

原文由 doom 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.9k
2 个回答

这是 Electron 项目中一个非常古老的回归错误。

请参阅 https://github.com/electron/electron/issues/15947

要绕过这个问题,只需降级到1.4.16 2.0.16 ,最后一个工作版本。


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

app.on('ready', () => setTimeout(onAppReady, 300));

而且你不需要 package.json 中的 --disable-gpu 选项

"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 startnpm run startWithTransparentOption 工作


编辑 3:也请查看 下面的@Thalinda Bandara 回答:它可能很有趣(未测试但已在别处看到)。

原文由 doom 发布,翻译遵循 CC BY-SA 4.0 许可协议

我找到了让它工作的方法!尝试在 Electron 准备好后 10 毫秒创建窗口,如下所示:

 app.on('ready', function () {
    setTimeout(function() {
        createWindow();
    }, 10);
});

而不是: app.on('ready', createWindow);

我从这篇 Github 帖子中找到了它: https ://github.com/electron/electron/issues/2170#issuecomment-361549395

此外,您需要保留这些命令行标志才能正常工作: --enable-transparent-visuals --disable-gpu


不幸的是,Electron 在 Linux 上不支持透明窗口。

我实际上已经尝试了很多方法来让它工作,但还没有任何效果。

资料来源: https ://github.com/electron/electron/issues/8532#issuecomment-306383343

原文由 Joshua 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题