V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
7075
V2EX  ›  程序员

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

  •  
  •   7075 · 2021-06-03 09:34:35 +08:00 · 2812 次点击
    这是一个创建于 1277 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有没有一个比较好的库或者源码,可以实现非 css 样式方式的窗体的拖动呢(程序有多个窗体)?
    需要至少可以兼容 win,macos
    12 条回复    2021-06-04 14:52:53 +08:00
    lswl66
        1
    lswl66  
       2021-06-03 09:36:04 +08:00 via iPhone
    哈哈哈你之前是怎么拖动的?
    7075
        2
    7075  
    OP
       2021-06-03 09:45:33 +08:00
    @lswl66 css 样式,问题多的一批啊
    leohxj
        3
    leohxj  
       2021-06-03 09:52:24 +08:00
    https://www.electronjs.org/docs/api/frameless-window

    用这个窗体模式,然后自己 html+css 绘制顶部
    yangheng4922
        4
    yangheng4922  
       2021-06-03 09:52:54 +08:00
    那就监听鼠标拖动 js 控制窗口位置
    7075
        5
    7075  
    OP
       2021-06-03 09:57:49 +08:00
    @leohxj 嗯嗯,已经实现了无边框窗体,主要是不想用他自带的 css 样式实现拖动。希望窗口所有位置可以拖动,又不影响所有的 dom 元素的事件响应( css 样式会干扰页面交互事件)。
    7075
        6
    7075  
    OP
       2021-06-03 09:58:10 +08:00
    @yangheng4922 有没有现成的库或者源码?~
    yangheng4922
        7
    yangheng4922  
       2021-06-03 10:04:17 +08:00
    @7075 #6 没有
    全局 addEventListener 一下鼠标事件 setPosition 移动窗口
    xudaolong
        8
    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
        9
    7075  
    OP
       2021-06-03 10:14:35 +08:00
    thanks ! i'll give it a try !
    7075
        10
    7075  
    OP
       2021-06-03 10:16:14 +08:00
    @xudaolong 多谢,试试先~
    codehz
        11
    codehz  
       2021-06-03 17:53:01 +08:00   ❤️ 1
    不用那个样式的话会有很多边界问题要处理。。比如考虑下鼠标移动过快,超过窗口区域
    还有用户预期的 aero 效果(指移动到屏幕边界的贴合效果,分屏操作等)这些都是很难在纯粹的 js 层面解决的。。。
    7075
        12
    7075  
    OP
       2021-06-04 14:52:53 +08:00
    @codehz 是的,尴尬的是,如果用了,相关的元素完全无法响应任何鼠标事件。。。。。。了解到有个库 electron-drag,有用过吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2544 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:37 · PVG 12:37 · LAX 20:37 · JFK 23:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.