Electron无边框窗口在Windows下拖拽导致窗口放大

691 阅读1分钟

渲染进程

  <div class="login" @mousedown="mousedown"></div>
let isKeyDown = ref<boolean>(false)
let dinatesX = ref<number>(0)
let dinatesY = ref<number>(0)

const mousedown = (event) => {
  isKeyDown.value = true
  dinatesX.value = event.x
  dinatesY.value = event.y

  document.onmousemove = (ev) => {
    if (isKeyDown.value) {
      const x = ev.screenX - dinatesX.value
      const y = ev.screenY - dinatesY.value
      //给主进程传入坐标
      let data = {
        appX: x,
        appY: y
      }
      electron.ipcRenderer.invoke('custom-adsorption', data)
    }
  }
  document.onmouseup = () => {
    isKeyDown.value = false
  }
}

主进程:

ipcMain.handle('custom-adsorption', (_event, res) => {
    let x = res.appX
    let y = res.appY
    mainWindow.setPosition( x , y )
  })

该代码Windows系统缩放不为100%时会导致拖拽时窗口放大

image.png 调整为100%后就不会出现拖拽放大了,但是无法保证用户的电脑也为无缩放

解决办法:使用setBounds,将窗口大小传递进去,也可以使用win.getSize()获取窗口大小

ipcMain.handle('custom-adsorption', (_event, res) => {
    let x = res.appX
    let y = res.appY
    let newBounds = {
      x,
      y,
      width: 900,
      height: 670
    }
    mainWindow.setBounds(newBounds)
    // 使用setPositon在Windows系统设置缩放不为100%时拖拽会导致窗口放大
    // mainWindow.setPosition( x , y )
  })