适用于win10和win7的electron窗口毛玻璃特效

为了使electron的窗口炫起来,可以通过以下方式添加毛玻璃特效,开篇先上一张效果图。
在这里插入图片描述
话不多说,上代码及使用说明:

一、 支持平台

Windows 7、Windows 10 (stable) 64位

二、 代码拉取及启动示例

git clone https://gitee.com/lykiao/electron-vibrancy-windows.git
cd electron-vibrancy-windows
yarn install
cd spec/app # 进入示例
electron . # electron --version 版本应该为 15.3.5

三、 使用说明

1、指定适用于自己的electron版本及node版本,再编译,生成Vibrancy.node文件
2、复制文件【\vibrancy\index.js】并改名为例如【vibrancy.js】,将第一行【var Vibrancy = require(‘bindings’)(‘Vibrancy’);】改为【var Vibrancy = require(‘…/Vibrancy.node’);】,具体路径根据实际修改
3、然后就可以在background.js中引入并使用了,background.js引入例:

const electronVibrancy = require("./vibrancy"); 

(附)我的文件夹结构:
D:.

├─工程文件夹
│ │ Vibrancy.node
│ │
│ └─src
│ background.js
│ vibrancy.js
│ 其他

├─其他

background.js中使用例:

 electronVibrancy.enableVibrancy(mainWindow); 
 electronVibrancy.disableVibrancy(mainWindow);

以上是我直接引入Vibrancy.node文件的使用方式,或者也可以参照本工程例(spec/app)的引入方式:

// mainWindow with show: false
mainWindow.on('ready-to-show',function() {
  var electronVibrancy = require('..');
  electronVibrancy.enableVibrancy(mainWindow);
  electronVibrancy.disableVibrancy(mainWindow);
  mainWindow.show();
});

四、 再编译

参照package.json或readme,执行以下命令,生成release版本Vibrancy.node文件

yarn conf
yarn rebuild

五、 注意事项

1、BrowserWindow 必须定义为透明 (transparent:true)
2、编译时node版本需要同electron版本对应的node版本一致
3、关于原代码编译错误: 其中Vibrancy.cc的61行编译报错,有修改,以下代码的括号中添加isolate解决:

bool toggleState = toggleStateObj->BooleanValue(isolate);

六、 详细参照代码库说明文档:

https://gitee.com/lykiao/electron-vibrancy-windows.git

  • 31
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值