无法在 Electron 中成功制作透明窗口（javascript）答案

【问题标题】：Can't succeed in making transparent window in Electron (javascript)无法在 Electron 中成功制作透明窗口（javascript）
【发布时间】：2019-05-01 11:15:04
【问题描述】：

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

我在 Linux (Debian Jessie)

我尝试了不同的版本：latest、beta 和 nightly，结果相同。

我有一个 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 正如here所说的那样

【问题讨论】：

标签： electron

【解决方案1】：

这是 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 start 和 npm run startWithTransparentOption

编辑 3：也请查看@Thalinda Bandara answer below：它可能很有趣（未经测试，但已经在其他地方看到过）。

【讨论】：

【解决方案2】：

我找到了让它工作的方法！尝试在 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

【讨论】：

Here 据说可以工作（有一些限制，但应该可以）
@doom 嗨，对不起，我认为这是不可能的，但我挖得更远，结果证明是！请看我编辑的答案
这是个好主意，但它不起作用。仍然有黑色背景。
@doom 它有错误消息还是只是黑色？还要确保你仍然有这些命令行标志--enable-transparent-visuals --disable-gpu。
here 据说--enable-transparent-visuals --disable-gpu 仅适用于部分 Nvidia 显卡，因此在您的机器上正常运行。在 1.4.16 中，它似乎工作得很好。认为我们必须等待我的问题。

【解决方案3】：

如果有人在使用新版本时遇到此错误，则您已禁用或取消停靠开发人员工具，那么您将能够通过透明窗口成功

win.webContents.openDevTools({mode:'undocked'})

【讨论】：

【解决方案4】：

BrowserWindow {transparent: true} 如果您不打开 devTools 即不添加则有效

YourNewBrowserWindow.webContents.openDevTools() 到 main.js（或 electron.js）脚本

【讨论】：

【解决方案5】：

我注意到白色窗口在重绘后消失了（例如在调整大小后）。在我的代码中，我写了这个：

function createWindow() {
  const size = screen.getPrimaryDisplay().workAreaSize;

  // Create the browser window.
  win = new BrowserWindow({
    width: size.width - 1,
    height: size.height - 1,
    minWidth: 260,
    minHeight: 360,
    frame: false,
    transparent: true,
    webPreferences: {
      // ...
    },
  });

  win.setBackgroundColor("#000000");
  win.webContents.setFrameRate(60);

  // Set maximized size
  win.maximize(); // change window size -> redrawing
  win.setFullScreen(true); // change window property -> redrawing

  // ...

}

我也添加了这个：

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

【讨论】：