Electron怎么自定義窗口桌面時(shí)鐘

這篇文章主要介紹“Electron怎么自定義窗口桌面時(shí)鐘”，在日常操作中，相信很多人在Electron怎么自定義窗口桌面時(shí)鐘問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Electron怎么自定義窗口桌面時(shí)鐘”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

效果如下

實(shí)例化 BrowserWindow 類創(chuàng)建窗口

眾所周知，在 Electron 里面，窗口都是通過(guò)實(shí)例化 BrowserWindow 類創(chuàng)建出來(lái)的

一個(gè)最簡(jiǎn)單的創(chuàng)建窗口的代碼如下：

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

這樣就會(huì)創(chuàng)建出一個(gè)寬 800 像素，高 600 像素的窗口出來(lái)。BrowserWindow 類是 Electron 提供的窗口管理的類，繼承自 EventEmitter：

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

窗口創(chuàng)建之后，默認(rèn)是空的，如果想要界面上顯示內(nèi)容，Electron 提供了兩個(gè)方法：

• loadURL：加載指定網(wǎng)站

• loadFile：加載本地文件

加載本地 clock.html 文件

const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile(path.join(__dirname, '../renderer/clock.html'))

默認(rèn)的窗口是帶標(biāo)題欄的，但系統(tǒng)自帶的標(biāo)題欄定制功能很弱，往往無(wú)法滿足個(gè)性化需求，于是 Electron 提供了 titleBarStyle 選項(xiàng)來(lái)隱藏標(biāo)題欄：

win = new BrowserWindow({
  width: 600,
  height: 500,
  titleBarStyle: 'hiddenInset', // 隱藏標(biāo)題欄
})

這個(gè)時(shí)候的效果看起來(lái)舒服多了：

除此之外，還可以設(shè)置 transparent: true 來(lái)創(chuàng)建一個(gè)透明窗口：

可以看到，整個(gè)矩形窗體的非內(nèi)容區(qū)都變成了透明狀態(tài)，但還能看到邊框，此時(shí)可以用 frame: false 創(chuàng)建一個(gè)無(wú)邊框窗口，僅顯示時(shí)鐘圓形區(qū)域：

win = new BrowserWindow({
  width: 600,
  height: 500,
  resizable: false,
  frame: false,
  transparent: true,
  webPreferences: {
    preload: path.join(__dirname, '../preload/index.js'),
  },
})

這樣就實(shí)現(xiàn)文章開(kāi)頭的效果了：

不過(guò)雖然窗口變透明了，但本質(zhì)上窗口還是矩形的，如果用戶點(diǎn)擊時(shí)鐘外側(cè)、矩形內(nèi)側(cè)的區(qū)域，還是能夠選中時(shí)鐘窗口：

但我們要實(shí)現(xiàn)的是鼠標(biāo)穿透效果，即：點(diǎn)擊透明區(qū)域能夠選中下層的元素。BrowserWindow 提供了一個(gè)方法：

win.setIgnoreMouseEvents(true)

但這會(huì)帶來(lái)新的問(wèn)題：點(diǎn)擊時(shí)鐘里面也會(huì)造成鼠標(biāo)穿透！也就是說(shuō)，時(shí)鐘變成了一個(gè)永遠(yuǎn)無(wú)法選中、無(wú)法拖動(dòng)的窗口了。要想解決這個(gè)問(wèn)題，只能通過(guò)渲染進(jìn)程向主進(jìn)程發(fā)送消息，動(dòng)態(tài)的設(shè)置鼠標(biāo)穿透效果，

主進(jìn)程代碼

ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
  console.log('set-ignore-mouse-events', args)
  BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)
})

在 preload.js 中監(jiān)聽(tīng)鼠標(biāo)事件，當(dāng)進(jìn)入時(shí)鐘圓形內(nèi)部的時(shí)候，不設(shè)置鼠標(biāo)穿透，離開(kāi)時(shí)鐘再設(shè)置穿透效果：

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 })
  })
})

到此，關(guān)于“Electron怎么自定義窗口桌面時(shí)鐘”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！