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

doo*_*oom 6 electron

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

我在Linux(Debian Jessie)上

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

我有适用于同一台机器的NW.js版本,因此我希望这是电子问题。

这是我的代码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);
Run Code Online (Sandbox Code Playgroud)

这是我的代码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>
Run Code Online (Sandbox Code Playgroud)

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

在此处输入图片说明

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

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

谢谢

--

编辑1:也尝试过有和没有--enable-transparent-visuals --disable-gpu这里

doo*_*oom 6

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

参见https://github.com/electron/electron/issues/15947

要绕过该问题,只需将其降级为最新的工作版本。1.4.16 2.0.16


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

app.on('ready', () => setTimeout(onAppReady, 300));
Run Code Online (Sandbox Code Playgroud)

而且您不需要--disable-gpupackage.json中的选项

"start": "electron --enable-transparent-visuals ."
Run Code Online (Sandbox Code Playgroud)

编辑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
Run Code Online (Sandbox Code Playgroud)

对我来说npm startnpm run startWithTransparentOption


Mik*_*ike 5

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

app.on('ready', function () {
    setTimeout(function() {
        createWindow();
    }, 10);
});
Run Code Online (Sandbox Code Playgroud)

代替: 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