electron 透明窗口

   electron 中的 BrowserWindow api 用来创建浏览器窗口。其中窗口可以自定义，就可以创建透明的浏览器窗口，可以用来共享桌面等等这些操作。

相关的配置

  new BrowserWindow({
    ....
    transparent: true,
    backgroundColor: '#00000000',
  });

• transparent 属性为 true 时，就是透明的窗口
• backgroundColor 属性为窗口的背景色，为透明色

相关的限制与不透明的原因

• 透明窗口不可调整大小 (将 resizable 设置为 true)

• 默认不能点击穿透透明区域

• 当打开开发者工具时，窗口将不透明

    webPreferences: {
      devTools: true,
    },
    shareTool.webContents.openDevTools() // 打开调工具
  

• 透明窗口的宽高超过桌面的宽度时，透明效果也将失效

让透明的窗口可点击穿透(鼠标事件作用于原生桌面)

• setIgnoreMouseEvents 设置为 true

    win.setIgnoreMouseEvents(true)
  

• 实现部分区域不可穿透

    // shareWin.vue
    const win = window.require('@electron/remote').getCurrentWindow();
    let el = document.getElementById('share_tips');
    el.addEventListener('mouseenter', () => {
      win.setIgnoreMouseEvents(false);
    });
    el.addEventListener('mouseleave', () => {
      win.setIgnoreMouseEvents(true, { forward: true });
    });
  

调整透明窗口的大小

• 透明窗口无法用鼠标手动调整大小，但是可以通过setContentSize事件重新设置大小

    win.on('resize', () => {
      if (shareWin) {
        let { width, height } = screen.getPrimaryDisplay().size;
        shareWin.setContentSize(width, height);
      }
    });