Как создать прозрачное окно с Electron Framework

Содержание

1 Реализация
- 1.1 Ограничения
2 Важные заметки
3 пример

Реализация

Конструктор класса MainWindow ожидает объект в качестве первого параметра. Чтобы сделать наше окно прозрачным, мы должны предоставить transparent а также frame свойство true и false соответственно:

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
width: 800,
height: 600,
transparent:true,
frame: false
})
win.show()

Как правило, если прозрачные окна должны быть уникальными и начальными, то вы должны внести изменения в файл main.js:

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
transparent: true,
frame:false
})
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
//mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}

Это должно сделать уже ваше окно прозрачным. Установить в качестве содержания вашего index.html подать следующую разметку:


Transparent Window

и выполнить проект, используя npm startваше приложение будет выглядеть так:

Как вы можете видеть, окно полностью прозрачно, и вы можете видеть VSCode на заднем плане.

Ограничения

Вы не можете нажать через прозрачную область. Мы собираемся ввести API для установки формы окна, чтобы решить эту проблему, смотрите проблема для деталей.
Прозрачные окна не могут быть изменены. настройка resizable в true может заставить прозрачное окно перестать работать на некоторых платформах.
blur Фильтр применяется только к веб-странице, поэтому невозможно применить эффект размытия к содержимому под окном (т. е. другие приложения открываются в системе пользователя).
В операционных системах Windows прозрачные окна не будут работать, если DWM отключен.
На Linux пользователи должны поставить --enable-transparent-visuals --disable-gpu в командной строке, чтобы отключить графический процессор и позволить ARGB сделать прозрачное окно, это вызвано вышестоящей ошибкой, которая Альфа-канал не работает на некоторых драйверах NVidia в линуксе
На Mac собственная тень окна не будет отображаться в прозрачном окне.

Важные заметки

Если область инструментов разработчика видна, окно больше не будет прозрачным. Если он скрыт или не показан, эффект прозрачности сохранится.

Поскольку, вероятно, никто не хочет статическое окно, которое нельзя переместить, разрешите функцию перетаскивания в элемент с помощью CSS:

.draggable-area{
-webkit-app-region: drag;
}

Добавляя draggable-area Класс для любого элемента, это позволит пользователю перетащить все окно из этой точки. На некоторых платформах перетаскиваемая область будет обрабатываться как не клиентский фрейм, поэтому при щелчке правой кнопкой мыши на ней появляется системное меню. Чтобы контекстное меню работало корректно на всех платформах, вы никогда не должны использовать пользовательское контекстное меню в перетаскиваемых областях.

пример

Следующий документ создаст очень простое прозрачное окно с парой действий кнопок и перетаскиваемой областью:


Transparent Window
.draggable-area{
width:300px;
height:300px;
background-color:blue;
color:white;
-webkit-app-region: drag;
}

Drag the window here
var app = require('electron').remote;
// Close app
document.getElementById("close").addEventListener("click", () => {
app.BrowserWindow.getFocusedWindow().close();
}, false);
// Close app
document.getElementById("devtools").addEventListener("click", () => {
app.BrowserWindow.getFocusedWindow().openDevTools();
}, false);

Предыдущая разметка должна генерировать приложение вроде: