electron 我如何模糊一个电子BrowserWindow与透明度

mdfafbf1  于 2023-09-28  发布在  Electron
关注(0)|答案(3)|浏览(273)

提问

有没有可能使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

我的电脑在运行。也许这与此有关。还是一般的合成引擎?
提前感谢!

bvjxkvbb

bvjxkvbb1#

电子亚克力窗

实际上,这是可能的,只要有一点魔法。我不知道为什么没有人指出这一点,但有一个名为electron-acrylic-window的小实用程序,它允许你这样做。您可以选择丙烯酸(“磨砂”)和模糊效果,以及更改窗口的颜色和不透明度。
在后台,它使用node-gyp和低级C++代码来呈现您喜欢的页面。这在JavaScript中很容易实现。
主要的缺点是,任何远程透明的东西(而不是上面的任何纯色)将被渲染为完全透明。
还应注意严重的性能影响。只有在提示用户或验证所有这些都将在其上运行的机器的计算能力之后,您才应该在应用中启用此功能。它也可能与改变桌面行为的程序(即壁纸引擎)不兼容。

示例用法

index.js

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

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

.watev {
  background-color: black;
}
2w3rbyxf

2w3rbyxf2#

无法在后台模糊其他应用程序。https://www.electronjs.org/docs/api/frameless-window#limitations
模糊滤镜只适用于网页,所以没有办法对窗口下面的内容(即在用户的系统上打开其他应用程序)。

bbuxkriu

bbuxkriu3#

电子不允许你模糊任何运行在它后面。它只允许您模糊网页/应用程序上的内容。css样式中的任何内容都将只应用于前景内容。我知道,因为我也尝试过,但失败了。

相关问题