四时宝库

程序员的知识宝库

适用于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"); 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

#electron# #毛玻璃# #窗口特效# #electronjs# #node# #node.js#

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接