Electron 自定义窗口桌面时钟实现示例详解
正文
本节主要讲解如何使用 Electron 创建自定义窗口，并带领大家开发一款漂亮的桌面时钟
效果如下
实例化 BrowserWindow 类创建窗口
众所周知，在 Electron 里面，窗口都是通过实例化 BrowserWindow 类创建出来的
一个最简单的创建窗口的代码如下：
const win = new BrowserWindow({ width: 800, height: 600 })
这样就会创建出一个宽 800 像素，高 600 像素的窗口出来。BrowserWindow 类是 Electron 提供的窗口管理的类，继承自 EventEmitter：
class BrowserWindow extends NodeEventEmitter {
// 省略...
}
窗口创建之后，默认是空的，如果想要界面上显示内容，Electron 提供了两个方法：
loadURL：加载指定网站loadFile：加载本地文件
加载本地 clock.html 文件
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile(path.join(__dirname, '../renderer/clock.html'))
默认的窗口是带标题栏的，但系统自带的标题栏定制功能很弱，往往无法满足个性化需求，于是 Electron 提供了 titleBarStyle 选项来隐藏标题栏：
win = new BrowserWindow({
width: 600,
height: 500,
titleBarStyle: 'hiddenInset', // 隐藏标题栏
})
这个时候的效果看起来舒服多了：
除此之外，还可以设置 transparent: true 来创建一个透明窗口：
可以看到，整个矩形窗体的非内容区都变成了透明状态，但还能看到边框，此时可以用 frame: false 创建一个无边框窗口，仅显示时钟圆形区域：
win = new BrowserWindow({
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', () => {
const clock = 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 自定义窗口桌面时钟实现示例详解的详细内容，更多关于Electron 窗口时钟的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于JavaScript如何将后端获取到的byte数组转为文件的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
这篇文章全面解析了Bootstrap排版使用方法，本文重点介绍Bootstrap标题排版，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了js使用递归解析xml,需要的朋友可以参考下2014-12-12
因为自己需要做产品，所以一个好的UI界面也是很重要的，发现这种散射的原子颗粒特效还不错。今天脚本之家小编把Particles.js中文开发手册及particles.js参数分享给大家，需要的朋友参考下吧2017-09-09
Intellij中直接运行ts配置方法:run configuration for typescript
run configuration for typescript 插件本质还是依赖于ts-node来运行,只是其可以帮助我们自动配置好ts-node运行参数,简化使用,这篇文章给大家介绍在Intellij中可以借助插件run configuration for typescript直接运行typescript的方法,感兴趣的朋友一起看看吧2023-08-08
使用js显示当然日期和时间在网页中很是常见，方法有很多，不过多说大同小异，下面有个不错的示例，需要的朋友可以感受下2013-10-10
这篇文章主要为大家详细介绍了js实现图片上传并预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了JS实现浏览器状态栏文字从右向左弹出效果,涉及JavaScript结合时间函数遍历字符串及动态改变状态栏显示效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
今天小编就为大家分享一篇layui table 表格模板按钮的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
先用concat拼接数组 ，再使用一个对象、一个新数组（用于存放不重复的数组）具体实现如下，感兴趣的朋友可以参考2013-12-12
最新评论