• 请不要在回答技术问题时复制粘贴 AI 生成的内容
7075
V2EX  ›  程序员

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

  •  
  •   7075 · Jun 3, 2021 · 4126 views
    This topic created in 1989 days ago, the information mentioned may be changed or developed.
    有没有一个比较好的库或者源码,可以实现非 css 样式方式的窗体的拖动呢(程序有多个窗体)?
    需要至少可以兼容 win,macos
    12 replies  •  2021-06-04 14:52:53 +08:00
    lswl66
    lswl66
    Jun 3, 2021 via iPhone
    1
    哈哈哈你之前是怎么拖动的?
    7075
    7075
    OP
    Jun 3, 2021
    2
    @lswl66 css 样式,问题多的一批啊
    leohxj
    leohxj
    Jun 3, 2021
    3
    https://www.electronjs.org/docs/api/frameless-window

    用这个窗体模式,然后自己 html+css 绘制顶部
    yangheng4922
    yangheng4922
    Jun 3, 2021
    4
    那就监听鼠标拖动 js 控制窗口位置
    7075
    7075
    OP
    Jun 3, 2021
    5
    @leohxj 嗯嗯,已经实现了无边框窗体,主要是不想用他自带的 css 样式实现拖动。希望窗口所有位置可以拖动,又不影响所有的 dom 元素的事件响应( css 样式会干扰页面交互事件)。
    7075
    7075
    OP
    Jun 3, 2021
    6
    @yangheng4922 有没有现成的库或者源码?~
    yangheng4922
    yangheng4922
    Jun 3, 2021
    7
    @7075 #6 没有
    全局 addEventListener 一下鼠标事件 setPosition 移动窗口
    xudaolong
    xudaolong
    Jun 3, 2021
    8
    类似代码,仅做参考
    ```
    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
    7075
    OP
    Jun 3, 2021
    9
    thanks ! i'll give it a try !
    7075
    7075
    OP
    Jun 3, 2021
    10
    @xudaolong 多谢,试试先~
    codehz
    codehz
    Jun 3, 2021❤️1
    11
    不用那个样式的话会有很多边界问题要处理。。比如考虑下鼠标移动过快,超过窗口区域
    还有用户预期的 aero 效果(指移动到屏幕边界的贴合效果,分屏操作等)这些都是很难在纯粹的 js 层面解决的。。。
    7075
    7075
    OP
    Jun 4, 2021
    12
    @codehz 是的,尴尬的是,如果用了,相关的元素完全无法响应任何鼠标事件。。。。。。了解到有个库 electron-drag,有用过吗?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2137 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 13:55 · PVG 21:55 · LAX 05:55 · JFK 08:55
    ♥ Do have faith in what you're doing.