Linux 上的透明 Windows (Electron)

Question

在 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');

現在我聽說這不是電子的問題，而是硬件的問題......但我只需要確保因此創建這個問題！

Answer 1

我遇到了和你一樣的問題，所以我寫了：

• 這個 StackOverFlow 問題： 無法成功在 Electron 中制作透明窗口（javascript）
• 這個電子問題： https : //github.com/electron/electron/issues/15947
• 最后請求此功能： https : //github.com/electron/electron/issues/16809

在實現請求的功能之前，解決方案很簡單，只需在啟動窗口之前添加延遲即可。

您可以克隆 這個 git repo ，將延遲設置為 500，通常會出現魔法。

編輯 1：使用這個 repo： 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 和電子 4.0.5 一起開箱即用，對於npm start ， npm run startWithTransparentOption但不適用於npm run startWithAllOptions 。

注意：請小心設置至少 500 毫秒以使其有機會工作。 之后可以減少延遲但不穩定。 這就是為什么需要transparentReady 事件的原因。

厄運

Answer 2

在具有不同硬件的不同發行版上，透明度似乎存在多個問題。 有各種建議的解決方法。 您可能無法在所有硬件和發行版上為您的方案提供可接受的透明度。

例子

• https://github.com/electron/electron/issues/2170
• https://github.com/zeit/hyper/pull/842
• https://github.com/electron/electron/issues/15947
• 無法成功在 Electron 中制作透明窗口（javascript）

從電子文檔：

在 Linux 上，用戶必須在命令行中放置 --enable-transparent-visuals --disable-gpu 以禁用 GPU 並允許 ARGB 制作透明窗口，這是由上游錯誤引起的，即 alpha 通道在某些情況下不起作用Linux 上的 NVidia 驅動程序。

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

Answer 3

此代碼可能對您有用。 我在評論中添加了解釋。

//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);
});

Answer 4

這對我有用：

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

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