当前位置：首页 > news >正文

Electron无边框自定义窗口拖动

news 2025/9/6 2:26:11

最近使用了electron框架，发现如果自定义拖动是比较实用的;特别是定制化比较高的项目，如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发;

过程中发现问题：

1.windows缩放不是100%后设置偏移界面会缩放，感觉像吹起的气球;

2.单纯的添加css;-webkit-app-region: drag; 会让鼠标事件无法触发;

封装核心方法

import { screen  } from 'electron'
/* 自定义窗口移动 */
export class AzCustomWindowMove {// 是否开启isOpen: boolean;// 传入要处理的窗口win: any;// 窗口偏移winStartPosition: {x: number, y: number, width: number, height: number,}// 现在鼠标所在位置startPosition: {x: number, y: number,}constructor() {this.isOpen = false;this.win = null;this.winStartPosition = {x: 0,y: 0,width: 0,height: 0,}this.startPosition = {x: 0,y: 0,}}init(win: any) {this.win = win;}start() {this.isOpen = true;// 获取当前窗口偏移[x, y]const winPosition = this.win.getPosition();// 获取当前缩放[width, height]const winSize = this.win.getSize();this.winStartPosition.x = winPosition[0];this.winStartPosition.y = winPosition[1];this.winStartPosition.width = winSize[0];this.winStartPosition.height = winSize[1];// 获取鼠标绝对位置const mouseStartPosition = screen.getCursorScreenPoint();this.startPosition.x = mouseStartPosition.x;this.startPosition.y = mouseStartPosition.y;// 开启刷新this.move();}move() {if (!this.isOpen) {return;};console.log('this.win.isDestroyed()', this.win.isDestroyed(), this.win.isFocused());// 如果窗口已销毁if (this.win.isDestroyed()) {this.end();return;}// 判断窗口是否聚焦if (!this.win.isFocused()) {this.end();return;}const cursorPosition = screen.getCursorScreenPoint();const x = this.winStartPosition.x + cursorPosition.x - this.startPosition.x;const y = this.winStartPosition.y + cursorPosition.y - this.startPosition.y;// this.win.setPosition(120, 120, false);// this.win.setBounds({x: 120, y: 120})// 更新位置的同时设置窗口原大小， windows上设置=>显示设置=>文本缩放 不是100%时，窗口会拖拽放大this.win.setBounds({x: x,y: y,width: this.winStartPosition.width,height: this.winStartPosition.height,})setTimeout(() => {this.move();}, 20)}end() {this.isOpen = false;}
}

在main.js中引入

import { AzCustomWindowMove } from './util';/* new 自定义窗口移动 */
const CustomWindowMove = new AzCustomWindowMove();// 创建一个窗口
const mainWindow = new BrowserWindow({frame: false,webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}
})// 将窗口传进去
CustomWindowMove.init(mainWindow)// 通信监听
ipcMain.on("Main_Window_Operate", (event, info) => {    const operateEvent = info.event || '';switch(operateEvent) {// 拖拽窗口-开始case 'homeDragWindowStart':{/*如果别的窗口也想复用这个自定义拖拽方法可以这么用;const webContents = event.sender;const win = BrowserWindow.fromWebContents(webContents);CustomWindowMove.init(win);CustomWindowMove.start();*/CustomWindowMove.start();}break;// 拖拽窗口-结束case 'homeDragWindowEnd':{CustomWindowMove.end();}break;default:break;}})

preload.ts 预加载脚本

import { contextBridge, ipcRenderer } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'
...contextBridge.exposeInMainWorld('customAPI', {/***  发布main窗口操作消息* @param info {type: 操作类型, data: 参数}*/publishMainWindowOperateMessage: (info: {event: string, data: {}}) => {ipcRenderer.send("Main_Window_Operate", info);} 
})
...

React绑定事件

 const handleMouseDown = (e) => {(window as any).customAPI.publishMainWindowOperateMessage({event: 'homeDragWindowStart'});
}
const handleMouseUp = (e) => {(window as any).customAPI.publishMainWindowOperateMessage({event: 'homeDragWindowEnd'});
}
/*第二个思路, 当按下后监听document的事件*/
const handleMouseDown = (e) => {// 通知开始(window as any).customAPI.publishMainWindowOperateMessage({event: 'homeDragWindowStart'});// 鼠标抬起document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;document.onselectstart = null;// 通知结束(window as any).customAPI.publishMainWindowOperateMessage({event: 'homeDragWindowEnd'});}
}
<divonMouseDown={handleMouseDown} onMouseUp={handleMouseUp} 
>自定义窗口移动</div>