如何使鼠标通过Electron中的窗口

Question

我如何制作电子BrowserWindow，使鼠标事件完全通过电子到达其下方？

该窗口将仅用于显示事物。按下 ctrl 时，该窗口应启用。

Answer 1

  

点击窗口

     

要创建点击窗口，即使该窗口忽略所有鼠标事件，可以调用win.setIgnoreMouseEvents(ignore) API：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

     

^{-https://electronjs.org/docs/api/frameless-window#click-through-window}

我将示例扩展到下面的完整电子应用程序中。

您可能需要考虑的一些事项：

• 设置x和y坐标
• 如果您未设置宽度和高度，则默认值分别为800px和600px，
• 如果您不想使用背景，则必须设置transparent: true

要使窗口“点击”，您还需要：

• 使用frame: false删除框架
• 使用focusable: false禁用焦点，这将隐式设置skipTaskbar:true

我还没有在电子中找到将窗口发送到背景的方法，因此，如果在其下方有一个窗口，则在聚焦窗口之前，新窗口将位于顶部。聚焦窗口后，永远无法为点击后窗口赋予焦点，因此：

• 最小化当前窗口将使堆栈中的下一个窗口聚焦，这意味着点击后窗口将在该下一个窗口下方。
• 未最大化当前窗口将显示在单击窗口开始之前，单击窗口位于当前窗口下方的所有窗口之上。
• 一旦点击窗口位于堆栈的底部，它就必须留在堆栈底部。

无论如何，此类应用程序都可能会在登录时启动，因此在大多数情况下这不是问题。

按下 ctrl 时启用焦点

我不认为这目前是不可能的，因为当窗口未聚焦时，它需要全局监听键盘事件。

_{./ main.js}

const { BrowserWindow, app } = require('electron')

let mainWindow = null

function main() {
    mainWindow = new BrowserWindow({
        x: 0, y: 0,
        transparent: true,
        focusable: false,
        frame: false
    })
    mainWindow.setIgnoreMouseEvents(true)
    mainWindow.loadFile(`./index.html`)
    mainWindow.on('close', event => {
        mainWindow = null
    })
}

app.on('ready', main)

_{./ index.html}

<h1 style="color: #FFF">Hello World!</h1>

_{./ package.json}

{
  "name": "your-app-name",
  "version": "1.0.0",
  "description": "A description of your application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/link/to/repo",
  "keywords": [
    "some",
    "keywords"
  ],
  "author": "You",
  "license": "Your License",
  "dependencies": {
    "electron": "^3.0.9"
  }
}

安装方式：

> npm install

运行方式：

> npm start

Answer 2

关于如何实现此目标的非常基本的实现。

doOnSubscribe()

您可以详细了解here.