关于 electron 无边框窗口拖动的问题

2021-06-03 09:34:35 +08:00
 7075
有没有一个比较好的库或者源码,可以实现非 css 样式方式的窗体的拖动呢(程序有多个窗体)?
需要至少可以兼容 win,macos
2781 次点击
所在节点    程序员
12 条回复
lswl66
2021-06-03 09:36:04 +08:00
哈哈哈你之前是怎么拖动的?
7075
2021-06-03 09:45:33 +08:00
@lswl66 css 样式,问题多的一批啊
leohxj
2021-06-03 09:52:24 +08:00
https://www.electronjs.org/docs/api/frameless-window

用这个窗体模式,然后自己 html+css 绘制顶部
yangheng4922
2021-06-03 09:52:54 +08:00
那就监听鼠标拖动 js 控制窗口位置
7075
2021-06-03 09:57:49 +08:00
@leohxj 嗯嗯,已经实现了无边框窗体,主要是不想用他自带的 css 样式实现拖动。希望窗口所有位置可以拖动,又不影响所有的 dom 元素的事件响应( css 样式会干扰页面交互事件)。
7075
2021-06-03 09:58:10 +08:00
@yangheng4922 有没有现成的库或者源码?~
yangheng4922
2021-06-03 10:04:17 +08:00
@7075 #6 没有
全局 addEventListener 一下鼠标事件 setPosition 移动窗口
xudaolong
2021-06-03 10:07:42 +08:00
类似代码,仅做参考
```
const getSize = debounce(() => {
const win = BrowserWindow.getFocusedWindow()
const [width, height] = win.getSize()
return { win, width, height }
}, 500, {
'leading': true,
'trailing': false
})

ipcMain.on('windowMoving', (e, { mouseX, mouseY }) => {
const { x, y } = screen.getCursorScreenPoint()
const { win, width, height } = getSize()
if (win && !win.isMaximized()) {
win.setBounds({
width,
height,
x: x - mouseX,
y: y - mouseY
})
}
})
```
7075
2021-06-03 10:14:35 +08:00
thanks ! i'll give it a try !
7075
2021-06-03 10:16:14 +08:00
@xudaolong 多谢,试试先~
codehz
2021-06-03 17:53:01 +08:00
不用那个样式的话会有很多边界问题要处理。。比如考虑下鼠标移动过快,超过窗口区域
还有用户预期的 aero 效果(指移动到屏幕边界的贴合效果,分屏操作等)这些都是很难在纯粹的 js 层面解决的。。。
7075
2021-06-04 14:52:53 +08:00
@codehz 是的,尴尬的是,如果用了,相关的元素完全无法响应任何鼠标事件。。。。。。了解到有个库 electron-drag,有用过吗?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/781026

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX