Как заставить мышь проходить через окно в Электроне

Question

Как я могу сделать электрон BrowserWindow, через который мышиные события полностью проходят к тому, что находится под ним?

Окно будет просто для отображения вещей.При нажатии ctrl окно должно стать активным.

Answer 1

Сквозное окно

Чтобы создать окно с переходом по ссылке, т. Е. Заставить окно игнорировать все события мыши, вы можете вызвать API win.setIgnoreMouseEvents(ignore):

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

Очень простая реализация того, как этого добиться.

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

Подробнее об этом можно прочитать здесь.