Electron怎么自定义窗口桌面时钟
这篇文章主要介绍“Electron怎么自定义窗口桌面时钟”,在日常操作中,相信很多人在Electron怎么自定义窗口桌面时钟问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Electron怎么自定义窗口桌面时钟”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
效果如下实例化 BrowserWindow 类创建窗口
众所周知,在 Electron 里面,窗口都是通过实例化 BrowserWindow 类创建出来的
一个最简单的创建窗口的代码如下:
constwin=newBrowserWindow({width:800,height:600})
这样就会创建出一个宽 800 像素,高 600 像素的窗口出来。BrowserWindow 类是 Electron 提供的窗口管理的类,继承自 EventEmitter:
classBrowserWindowextendsNodeEventEmitter{//省略...}
窗口创建之后,默认是空的,如果想要界面上显示内容,Electron 提供了两个方法:
loadURL:加载指定网站
loadFile:加载本地文件
加载本地 clock.html 文件constwin=newBrowserWindow({width:800,height:600})win.loadFile(path.join(__dirname,'../renderer/clock.html'))
默认的窗口是带栏的,但系统自带的栏定制功能很弱,往往无法满足个性化需求,于是 Electron 提供了 titleBarStyle 选项来隐藏栏:
win=newBrowserWindow({width:600,height:500,titleBarStyle:'hiddenInset',//隐藏栏})
这个时候的效果看起来舒服多了:
除此之外,还可以设置 transparent: true 来创建一个透明窗口:
可以看到,整个矩形窗体的非内容区都变成了透明状态,但还能看到边框,此时可以用 frame: false 创建一个无边框窗口,仅显示时钟圆形区域:
win=newBrowserWindow({width:600,height:500,resizable:false,frame:false,transparent:true,webPreferences:{preload:path.join(__dirname,'../preload/index.js'),},})
这样就实现文章开头的效果了:
不过虽然窗口变透明了,但本质上窗口还是矩形的,如果用户点击时钟外侧、矩形内侧的区域,还是能够选中时钟窗口:
但我们要实现的是鼠标穿透效果,即:点击透明区域能够选中下层的元素。BrowserWindow 提供了一个方法:
win.setIgnoreMouseEvents(true)
但这会带来新的问题:点击时钟里面也会造成鼠标穿透!也就是说,时钟变成了一个永远无法选中、无法拖动的窗口了。要想解决这个问题,只能通过渲染进程向主进程发送消息,动态的设置鼠标穿透效果,
主进程代码ipcMain.on('set-ignore-mouse-events',(event,...args)=>{console.log('set-ignore-mouse-events',args)BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)})
在 preload.js 中监听鼠标事件,当进入时钟圆形内部的时候,不设置鼠标穿透,离开时钟再设置穿透效果:
const{ipcRenderer}=require('electron')document.addEventListener('DOMContentLoaded',()=>{constclock=document.getElementById('clock')clock.addEventListener('mouseenter',()=>{ipcRenderer.send('set-ignore-mouse-events',false)})clock.addEventListener('mouseleave',()=>{ipcRenderer.send('set-ignore-mouse-events',true,{forward:true})})})
到此,关于“Electron怎么自定义窗口桌面时钟”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!