Electron中的frame：false經(jīng)常被我們用來(lái)隱藏標(biāo)題欄稚照，但是隨之而來(lái)的問(wèn)題就是窗口拖動(dòng)，像一般人一樣俯萌，我也是先去搜了一下怎么實(shí)現(xiàn)果录，看到的無(wú)非幾種做法
- 修改css
-webkit-app-region: drag;
2.使用electron-drag
npm install electron-drag
let drag = require('electron-drag');
let clear = drag(document);//這里可以傳任意你想選中的元素
clear();
3.事件監(jiān)聽(tīng)
function mouseMove(e){
//do something
}
el.onmousedown = e => {
addEventListener('mousemove', mouseMove);
}
el.onmouseup = e => {
removeEvenetListener('mousemove', mouseMove);
}
這些個(gè)方案其實(shí)問(wèn)題都不大，但都各有各的缺點(diǎn)咐熙，其中有一個(gè)共有的特大的bug
在一些機(jī)器上拖動(dòng)窗口的時(shí)候窗口大小會(huì)瞎吉兒改變弱恒，還會(huì)瞎吉兒亂動(dòng)，直到最后棋恼，我確定了一個(gè)方案返弹，如下
import { screen, ipcMain } from 'electron';
//在一些機(jī)器上會(huì)出現(xiàn)拖動(dòng)窗口導(dǎo)致的窗口大小莫名其妙改變的bug，這里采用在移動(dòng)窗口的時(shí)候鎖死窗口大小
export const windowMove = (win, id) => {
let moving_interval = null;
ipcMain.on('window-move-evt', (sender, data) => {
if(data['id'] === id && data['move']){
const win_size = win.getSize();
const win_pos = win.getPosition();
const mos_pos = screen.getCursorScreenPoint();
if(moving_interval){
clearInterval(moving_interval);
}
moving_interval = setInterval(() => {
const current_pos = screen.getCursorScreenPoint();
const x = win_pos[0] + current_pos.x - mos_pos.x;
const y = win_pos[1] + current_pos.y - mos_pos.y;
win.setBounds({ x: x, y: y, width: win_size[0], height: win_size[1] });
}, 15);
}else{
clearInterval(moving_interval);
}
});
}
通過(guò)在主進(jìn)程中添加事件循環(huán)實(shí)時(shí)修改窗口大小和位置爪飘，防止之前出現(xiàn)的鬼畜情況义起，其中
id為窗口對(duì)應(yīng)的id，每個(gè)窗口的id都不同师崎，這個(gè)用來(lái)實(shí)現(xiàn)多個(gè)窗口的移動(dòng)并扇，win為主進(jìn)程中的窗口實(shí)例，當(dāng)我們執(zhí)行
windowMove(mainWindow, 1);
此時(shí)ipcMain已經(jīng)添加了window-move-evt事件抡诞，只需要在渲染進(jìn)程中
ipc.send('window-move-evt', {
id : 當(dāng)前窗口id,
move : true
});
啟動(dòng)窗口移動(dòng)
ipc.send('window-move-evt', {
id : 當(dāng)前窗口id,
move : true
});
關(guān)閉窗口移動(dòng)
至于窗口ID穷蛹，這個(gè)可以自己瞎設(shè)，只要保證ID和窗口是一一對(duì)應(yīng)的就行了
