Функциональность масштабирования в ElectronJS

Опубликовано: 31 Июля, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Все традиционные веб-браузеры имеют встроенную функцию масштабирования. Пользователь может просто увеличивать / уменьшать масштаб для увеличения / уменьшения размера содержимого веб-страницы соответственно, прокручивая колесо мыши. По умолчанию Electron не включает функцию масштабирования для своих экземпляров BrowserWindow. Однако, Electron действительно обеспечивает способ , с помощью которого мы можем добавить функциональность Увеличить к содержимому страницы с помощью методов экземпляра, события и свойства встроенного объекта BrowserWindow и свойства webContents. Свойство webContents предоставляет нам определенные события и методы Instance, с помощью которых мы можем установить масштаб веб-страницы по умолчанию, максимальное и минимальное масштабирование веб-страницы и увеличивать / масштабировать содержимое веб-страницы с помощью прокрутки мыши. В этом руководстве будет продемонстрирована функция масштабирования в Electron.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

Структура проекта:

Пример: следуйте инструкциям в разделе Печать в ElectronJS, чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Также внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.
package.json:

{
  "name": "электрон-зум",
  "версия": "1.0.0",
  "description": "Увеличить электрон",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}

Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат:

Увеличение функциональность в Electron: BrowserWindow Instance и webContents собственность является частью основного процесса. Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron.

index.html : добавьте в этот файл следующий фрагмент.

html

 < h3 >Zoom in Electron</ h3 >
 < div >Ctrl+Scroll for Triggering Zoom Functionality</ div > 

index.js : добавьте в этот файл следующий фрагмент.

javascript

 const electron = require( "electron" );
 
// Import BrowserWindow using Electron remote
 const BrowserWindow = electron.remote.BrowserWindow;
 let win = BrowserWindow.getFocusedWindow();
 
// let win = BrowserWindow.getAllWindows()[0];
 
// If reduced below Minimum value
 // Error - 'zoomFactor' must be a double greater than 0.0
 win.webContents.setZoomFactor(1.0);
 
// Upper Limit is working of 500 %
 win.webContents
    .setVisualZoomLevelLimits(1, 5)
    .then(console.log( "Zoom Levels Have been Set between 100% and 500%" ))
    . catch ((err) => console.log(err));
 
win.webContents.on( "zoom-changed" , (event, zoomDirection) => {
    console.log(zoomDirection);
    var currentZoom = win.webContents.getZoomFactor();
    console.log( "Current Zoom Factor - " , currentZoom);
    // console.log('Current Zoom Level at - '
    // , win.webContents.getZoomLevel());
    console.log( "Current Zoom Level at - " , win.webContents.zoomLevel);
 
    if (zoomDirection === "in" ) {
       
        // win.webContents.setZoomFactor(currentZoom + 0.20);
        win.webContents.zoomFactor = currentZoom + 0.2;
 
        console.log( "Zoom Factor Increased to - "
                    , win.webContents.zoomFactor * 100, "%" );
    }
    if (zoomDirection === "out" ) {
       
        // win.webContents.setZoomFactor(currentZoom - 0.20);
        win.webContents.zoomFactor = currentZoom - 0.2;
 
        console.log( "Zoom Factor Decreased to - "
                    , win.webContents.zoomFactor * 100, "%" );
    }
 });

Подробное объяснение всех событий, методов и свойств экземпляра, используемых в коде, приведено ниже:

zoom-changed: Event Это событие экземпляра свойства webContents генерируется, когда пользователь запрашивает изменение уровня масштабирования веб-страницы с помощью прокрутки колесика мыши. В Windows это запускается комбинацией клавиш Ctrl + Scroll . По умолчанию в Electron не включено масштабирование, и это событие необходимо явно добавить, чтобы знать, было ли инициировано изменение уровня масштабирования или нет. Это событие возвращает следующие параметры.
- event: глобальный объект Event.
- zoomDirection: String Этот параметр указывает, была ли начата прокрутка колесика мыши вверх, обозначающая увеличение, или была начата прокрутка вниз, обозначающая уменьшение. Этот параметр может содержать только два значения , то есть в или соответственно.
webContents.setZoomFactor (factor) Этот метод экземпляра свойства webContents изменяет коэффициент масштабирования веб-страницы на указанный коэффициент. Этот метод экземпляра определяет, на какой коэффициент веб-страница должна быть увеличена или уменьшена. Коэффициент масштабирования равен проценту масштабирования, деленному на 100 . Следовательно, если процент масштабирования равен 100%, то коэффициент масштабирования - 1,0 . Он принимает следующие параметры. В приведенном выше коде мы увеличиваем / уменьшаем коэффициент масштабирования для каждого события экземпляра с измененным масштабированием, генерируемого на 0,2, что означает 20% -ное увеличение или уменьшение масштаба.
- factor: Double Двойной коэффициент увеличения. По умолчанию установлено значение 1.0 . Значение коэффициента всегда должно быть больше 0,0 . В случае, если во время операций масштабирования это значение опускается ниже 0,0 , возникает ошибка, которая отображается в консоли, и никакие дальнейшие изменения масштабирования веб-страницы не вносятся.
webContents.getZoomFactor () Этот метод экземпляра свойства webContents возвращает целочисленное значение, указывающее текущий коэффициент масштабирования веб-страницы. Возвращаемое значение всегда будет больше 0,0 .
Примечание. Несмотря на то, что это не указано в официальной документации Electron, начиная с версии Electron 8.3.0 , этот метод считается устаревшим . В случае использования этого метода он отобразит предупреждающее сообщение в консоли, даже если он все еще работает. Вместо этого мы должны использовать свойство экземпляра webContents.zoomFactor для получения и управления коэффициентом масштабирования веб-страницы. То же самое было продемонстрировано в коде и объяснено ниже.
webContents.setZoomLevel (level) Этот метод экземпляра свойства webContents изменяет уровень масштабирования веб-страницы на указанный уровень. Этот метод экземпляра определяет, на каком уровне веб-страница должна быть увеличена или уменьшена. Согласно официальной документации Electron, исходный размер равен 0, и каждое увеличение выше или ниже представляет собой увеличение или уменьшение на 20% до пределов по умолчанию в 300% и 50% от исходного размера соответственно. Формула для этого - масштаб: = 1,2 ^ уровень .
Примечание. Этот метод экземпляра и метод экземпляра webContents.setZoomFactor () выполняют одинаковые манипуляции с масштабированием содержимого веб-страницы в Electron. Эти методы экземпляра просто принимают разные значения в зависимости от предоставленного фактора и уровня соответственно. Также проще управлять и контролировать метод webContents.setZoomFactor (). В приведенном выше коде мы отображали коэффициент масштабирования и уровень масштабирования каждый раз, когда генерируется событие экземпляра. Также уровень масштабирования веб-страницы может иметь отрицательное значение.
Примечание. Несмотря на то, что это не указано в официальной документации Electron, начиная с версии Electron 8.3.0 , этот метод считается устаревшим . В случае использования этого метода он отобразит предупреждающее сообщение в консоли, даже если он все еще работает. Вместо этого мы должны использовать свойство экземпляра webContents.zoomLevel для получения и управления уровнем масштабирования веб-страницы.
webContents.getZoomLevel () Этот метод экземпляра свойства webContents возвращает целочисленное значение, указывающее текущий уровень масштабирования веб-страницы. Возвращаемое значение также может быть отрицательным.
Примечание. Несмотря на то, что это не указано в официальной документации Electron, начиная с версии Electron 8.3.0 , этот метод считается устаревшим . В случае использования этого метода он отобразит предупреждающее сообщение в консоли, даже если он все еще работает. Вместо этого мы должны использовать свойство экземпляра webContents.zoomLevel для получения и управления уровнем масштабирования веб-страницы.
win.webContents.setVisualZoomLevelLimits (минимум, максимум) Этот метод экземпляра свойства webContents устанавливает минимальный и максимальный предел уровня масштабирования. Как обсуждалось выше, функция масштабирования по умолчанию отключена в Electron. Для его включения используется этот метод экземпляра. Он возвращает Promise, и он разрешается, когда минимальный и максимальный масштаб для веб-страницы были успешно установлены. Он принимает следующие параметры.
- минимум: целое число Устанавливает минимальный разрешенный масштаб для веб-страницы. Это значение представляет собой процент масштабирования, деленный на 100 . Следовательно, Zoom Percent - 100% переводится в 1, который установлен в этом параметре.
- Максимум: целое число. Устанавливает максимально допустимый масштаб для веб-страницы. Это значение представляет собой процент масштабирования, деленный на 100 . Следовательно, Zoom Percent - 500% переводится в 5, что установлено в этом параметре.
webContents.zoomFactor Это свойство Instance свойства webContents изменяет коэффициент масштабирования веб-страницы на указанный коэффициент. Это свойство экземпляра определяет, с каким коэффициентом веб-страница должна быть увеличена или уменьшена. Коэффициент масштабирования равен проценту масштабирования, деленному на 100 . В приведенном выше коде мы увеличиваем / уменьшаем коэффициент масштабирования для каждого события экземпляра с измененным масштабированием, генерируемого на 0,2, что означает 20% -ное увеличение или уменьшение масштаба.
webContents.zoomLevel Это свойство Instance свойства webContents изменяет уровень масштабирования веб-страницы на указанный уровень. Это свойство экземпляра определяет, на каком уровне веб-страница должна быть увеличена или уменьшена. Согласно официальной документации Electron, исходный размер равен 0, и каждое увеличение выше или ниже представляет собой увеличение или уменьшение на 20% до пределов по умолчанию в 300% и 50% от исходного размера соответственно. Формула для этого - масштаб: = 1,2 ^ уровень .

Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.

BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

На этом этапе мы должны успешно иметь возможность увеличивать и уменьшать масштаб содержимого BrowserWindow в Electron.
Выход:

Node.js JavaScript HTML CSS

Функциональность масштабирования в ElectronJS

html

javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ