electron **功能请求** :请为透明窗口添加背景滤镜支持(以重现流畅设计丙烯酸材质)

ezykj2lf  于 4个月前  发布在  Electron
关注(0)|答案(3)|浏览(101)

预检清单

问题描述

我尝试使用

body {
    background-color: #0000002f;
    -webkit-backdrop-filter: blur(8px);
}

,其中 background-color 可以工作,但 -webkit-backdrop-filter 无法工作。

建议的解决方案

能够通过 -webkit-backdrop-filter 对窗口背景进行模糊处理

考虑过的替代方案

This package 似乎很有帮助,但它已被弃用,且没有 Linux 支持 ...

其他信息

我相信随着流畅设计趋势的发展,更多的开发人员可能希望遵循这种设计模式,因此这个功能将是绝对必要的。

mepcadol

mepcadol1#

tldr;

当微软完成Windows 11及其新的WinUI API时,Electron将能够利用这些API并自动允许您的BrowserWindow请求操作系统将其变为acrylic或mica。

我估计这还需要再过一年,无论Windows 11何时发布RTM版。我不认为这些API会在一段时间内成为非第一方和win32应用程序的稳定公共API。

更长的版本:

你提出的方案在技术上是不可能的,特别是在一个一致、可靠、可预测且跨平台的方式上。CSS "backdrop-filter"属性永远只能限制在Chromium渲染器的领域内。它只能在其自己的内容上执行图形变换。它无法、不能也不会访问Electron窗口下面的任何东西。请忘记这个作为你试图实现的目标的解决方案!
话虽如此,没有必要绝望!最终会有解决方案,你只需要耐心等待。
以下是一些有助于理解的内容:

  1. Acrylic(以及在Windows 11上的兄弟姐妹Mica)不仅仅是模糊背景。这些模式非常依赖上下文,并且经过精心调整以处理各种边缘情况,以最小化效果导致失真或变得不可接受的分散注意力的可能性。(它们还针对性能进行了优化,超出了Chromium渲染器所能合理提供的任何东西!)macOS上可用的各种Vibrancy模式也是如此(Electron已经支持了一段时间,但当时只是简单地支持)。
  2. 有一个不太理想的“解决方案”,即你需要从源代码编译一个本地节点模块/DLL。它使用未记录的、私有的Microsoft API来请求窗口的chrome变为acrylic-ized。这段代码早于Windows 11,因此可能只适用于Windows 10,而且我不知道它如何处理圆角窗口角落。如果你在GitHub和Google上四处寻找,你可能会找到它,但我认为对于一个上市项目来说,它不值得你的时间(向这位创造性地将此解决方法组合在一起的编码人员表示敬意!)
  3. 如果你今天需要这个并且等不及了,我建议你使用Microsoft的新Edge WebView2控件自己编写WinUI/XAML/.NET/WPF应用程序。你将失去Electron成熟度的所有好处,但你现在就可以拥有acrylic和mica,以及一个可以与你的应用程序交互的基于Chromium的控件。这取决于你的用例是否有效!
  4. 我再怎么强调都不为过,对于许多这种“新”UI的东西来说,现在看起来还很早。甚至Edge Canary仍在使用实验性标志仅在Windows 11上启用mica(甚至没有acrylic!),就像我在我的tldr中所说的那样。正如我说的那样,这些API可能还需要一段时间才能稳定下来并从私有转移到公共......然后通过Project Reunion滴入到win32应用程序中。
ct3nt3jp

ct3nt3jp2#

  1. Acrylic不仅会模糊背景。
  2. 应用的性能可能会因为背景滤镜而降低。
  3. Chromium背景滤镜无法访问桌面等。
sirbozc5

sirbozc53#

那么这个呢?看起来它可以工作,所以很明显它是可能的。然而,如果你自己尝试这个包,发现丙烯酸设置似乎有问题(至少在Windows 10上),请改用'blurbehind'。

相关问题