如何使用透明度模糊电子 BrowserWindow

Question

题

是否可以BrowserWindow在电子中使, 透明且模糊？因为它模糊了所有背景内容，包括应用程序和壁纸。

如果可能，我将如何实现这一目标？

例子

这是我尝试过的一些代码。
index.js：

let win = new BrowserWindow({
    fullscreen: true,
    fullscreenable: false,
    frame: false,
    skipTaskbar: true,
    resizable: false,
    movable: false,
    show: false,
    alwaysOnTop: true,
    transparent: true
})

style.css：

html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    backdrop-filter: blur(4px);
}

html 只是一个带有 h1 标签的正文，其中包含文本。
虽然这只会在窗口中创建黑色背景。

我读了一些关于这个的东西：

webPreferences: {
    experimentalFeatures: true
}

但无法让它工作。

环境

• Ubuntu：18.04.2
• 节点：v10.15.3
• npm：6.4.1
• i3wm。4.14.1

我有康普顿运行。也许它与此有关。还是一般的合成引擎？

提前致谢！

Answer 1

电子亚克力窗

事实上，只要一点点魔法，这是可能的。我不知道为什么没有人指出这一点，但有一个名为electro-ryls-window 的小实用程序，它可以让你做到这一点。您可以在acrylic（“磨砂”）和blur效果之间进行选择，以及更改窗口的颜色和不透明度。

在底层，它使用node-gyp和低级 C++ 代码来按照您喜欢的方式呈现页面。用 JavaScript 很容易实现。

缺点

• 任何远程透明的东西（并且不高于任何纯色的东西）都将被渲染为完全透明
• 还应该注意严重的性能影响。仅在提示用户或验证运行所有这些的计算机的计算能力后，您才应在应用程序中启用此功能
• 它也可能与改变桌面行为的程序不兼容（即Wallpaper Engine、Transparent/RoundedTB...）
• 与其他 EcmaScript/TypeScript 运行程序（如 Bun）的兼容性可能很困难
• 由于该库使用不多，因此将来被放弃或弃用的可能性较高

使用示例

index.js

import { BrowserWindow } from 'electron-acrylic-window'; // ESM
// const { BrowserWindow } = require('electron-acrylic-window'); // CommonJS

const win = new BrowserWindow({
    ...,
    frame: false,
    vibrancy: {
        theme: 'light', // (default) or 'dark' or '#rrggbbaa'
        effect: 'acrylic', // (default) or 'blur'
        disableOnBlur: true, // (default)
    }
});

// alternatively use these to
// dynamically change vibrancy
win.setVibrancy([options])
// or
setVibrancy(win, [options])

style.css

body {
    background-color: transparent;
}

.foo {
    background-color: black;
}