Electron无边框自定义窗口拖动的问题小结

2024-04-18 0 964

最近使用了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\’});
}
}
<div
onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}
>自定义窗口移动</div>

到此这篇关于Electron无边框自定义窗口拖动的文章就介绍到这了,更多相关Electron自定义窗口拖动内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • electron无边框窗口拖拽移动问题及解决办法
  • Electron 自定义窗口桌面时钟实现示例详解
  • electron创建新窗口模态框并实现主进程传值给子进程
  • vue+electron实现创建多窗口及窗口间的通信(实施方案)
  • vue electron实现无边框窗口示例详解
  • 使用electron实现百度网盘悬浮窗口功能的示例代码

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript Electron无边框自定义窗口拖动的问题小结 https://www.u-9.cn/biancheng/javascript/186629.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务