javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Electron 窗口时钟

Electron 自定义窗口桌面时钟实现示例详解

作者:乔珂力

这篇文章主要为大家介绍了Electron 自定义窗口桌面时钟实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

本节主要讲解如何使用 Electron 创建自定义窗口,并带领大家开发一款漂亮的桌面时钟

效果如下

实例化 BrowserWindow 类创建窗口

众所周知,在 Electron 里面,窗口都是通过实例化 BrowserWindow 类创建出来的

一个最简单的创建窗口的代码如下:

const win = new BrowserWindow({ width: 800, height: 600 })

这样就会创建出一个宽 800 像素,高 600 像素的窗口出来。BrowserWindow 类是 Electron 提供的窗口管理的类,继承自 EventEmitter:

class BrowserWindow extends NodeEventEmitter {
	// 省略...
}

窗口创建之后,默认是空的,如果想要界面上显示内容,Electron 提供了两个方法:

加载本地 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 窗口时钟的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文