Electron?自定義窗口桌面時鐘實現示例詳解
正文
本節(jié)主要講解如何使用 Electron 創(chuàng)建自定義窗口，并帶領大家開發(fā)一款漂亮的桌面時鐘
效果如下
實例化 BrowserWindow 類創(chuàng)建窗口
眾所周知，在 Electron 里面，窗口都是通過實例化 BrowserWindow 類創(chuàng)建出來的
一個最簡單的創(chuàng)建窗口的代碼如下：
const win = new BrowserWindow({ width: 800, height: 600 })
這樣就會創(chuàng)建出一個寬 800 像素，高 600 像素的窗口出來。BrowserWindow 類是 Electron 提供的窗口管理的類，繼承自 EventEmitter：
class BrowserWindow extends NodeEventEmitter {
// 省略...
}
窗口創(chuàng)建之后，默認是空的，如果想要界面上顯示內容，Electron 提供了兩個方法：
loadURL：加載指定網站loadFile：加載本地文件
加載本地 clock.html 文件
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile(path.join(__dirname, '../renderer/clock.html'))
默認的窗口是帶標題欄的，但系統(tǒng)自帶的標題欄定制功能很弱，往往無法滿足個性化需求，于是 Electron 提供了 titleBarStyle 選項來隱藏標題欄：
win = new BrowserWindow({
width: 600,
height: 500,
titleBarStyle: 'hiddenInset', // 隱藏標題欄
})
這個時候的效果看起來舒服多了：
除此之外，還可以設置 transparent: true 來創(chuàng)建一個透明窗口：
可以看到，整個矩形窗體的非內容區(qū)都變成了透明狀態(tài)，但還能看到邊框，此時可以用 frame: false 創(chuàng)建一個無邊框窗口，僅顯示時鐘圓形區(qū)域：
win = new BrowserWindow({
width: 600,
height: 500,
resizable: false,
frame: false,
transparent: true,
webPreferences: {
preload: path.join(__dirname, '../preload/index.js'),
},
})
這樣就實現文章開頭的效果了：
不過雖然窗口變透明了，但本質上窗口還是矩形的，如果用戶點擊時鐘外側、矩形內側的區(qū)域，還是能夠選中時鐘窗口：
但我們要實現的是鼠標穿透效果，即：點擊透明區(qū)域能夠選中下層的元素。BrowserWindow 提供了一個方法：
win.setIgnoreMouseEvents(true)
但這會帶來新的問題：點擊時鐘里面也會造成鼠標穿透！也就是說，時鐘變成了一個永遠無法選中、無法拖動的窗口了。要想解決這個問題，只能通過渲染進程向主進程發(fā)送消息，動態(tài)的設置鼠標穿透效果，
主進程代碼
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)聽鼠標事件，當進入時鐘圓形內部的時候，不設置鼠標穿透，離開時鐘再設置穿透效果：
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
JS庫之Particles.js中文開發(fā)手冊及參數詳解
因為自己需要做產品，所以一個好的UI界面也是很重要的，發(fā)現這種散射的原子顆粒特效還不錯。今天腳本之家小編把Particles.js中文開發(fā)手冊及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實現瀏覽器狀態(tài)欄文字從右向左彈出效果,涉及JavaScript結合時間函數遍歷字符串及動態(tài)改變狀態(tài)欄顯示效果的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
今天小編就為大家分享一篇layui table 表格模板按鈕的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
先用concat拼接數組 ，再使用一個對象、一個新數組（用于存放不重復的數組）具體實現如下，感興趣的朋友可以參考2013-12-12