虹口集团网站建设,网站建设与网络推广,wordpress自定义json,宁波江北区城市建设档案馆网站最近使用了electron框架#xff0c;发现如果自定义拖动是比较实用的;特别是定制化比较高的项目#xff0c;如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发; 过程中发现问题#xff1a;
1.windows缩放不是100%后设置偏移界面会缩放#xff0c;感觉像吹起的气… 最近使用了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
