WebView2 - 桌面透明3D效果
WebView2 真是一个很好的组件,Chromium 89 以上的内核(并自动更新),接口又简洁方便,而且支持 WIN7,WIN8,WIN10,用上这个组件,一切前端最新的技术都可以放心地用上去,再也不用考虑浏览器兼容性。
所有基于 WebView2 的软件会共享一个 WebView2 Runtime ,解决了其他类似方案体积大的问题。即使是没有安装 WebView2 Runtime ,aardio 也可以自动安装,下载速度也非常快,可以达到几MB每秒,瞬间可以下载安装好,体验非常好。
下面是一个基于 WebView2 实现桌面透明3D效果的例子,几句代码就可以了,真是太好用了。
注意为了方便演示,下面用了远程网页,所以第一次网络下载要点时间,实际开发放到本地就会快了。
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebView2 - 透明3D";border="none")
/*}}*/
import web.view;
var wb = web.view(winform);
//窗口透明
winform.transparent(true);
//webView2 控件透明
wb.defaultBackgroundColor = 0x00000000;
wb.external = {
winform = winform;
}
//因为要加载远程资源,第一次可能有点慢,实际开发使用本地文件即可
wb.go("https://www.html5tricks.com/demo/html5-css3-3d-cube-puzzle/index2.html")
//等待页面加载完成后,执行下面的Javascript
wb.waitEle("body","
//这里方便演示动态修改远程网页的 CSS 背景为透明色,直接改CSS可以更简单
this.style.backgroundColor='#00000000'
//异步执行以刷新透明背景后显示
setTimeout(()=>aardio.winform.show(),100);
this.onmouseup= function(e){
if(e.button == 2){
aardio.winform.close();
}
}
");
win.loopMessage();