Как изменить уровень масштабирования окна в Electron Framework

Содержание

1 Изменение уровня масштабирования
2 пример

Как разработчик иногда, довольно утомительно менять стили динамически. Одна из тех утомительных задач — динамически изменять размер шрифта приложения с помощью JavaScript, так как обычно это приводит к неправильному отображению макета и другим проблемам. Иногда использование масштабирования браузера вместо изменения стилей может работать лучше, поэтому вы можете воспользоваться Electron, если вы помните, что это так сказать браузер для вашего собственного приложения. Вы можете изменить размер текста, изображений и видео для одной веб-страницы или для всех веб-страниц (в данном случае Windows).

Изменение уровня масштабирования

Чтобы изменить уровень масштабирования окна в Electron, вам потребуется использовать модуль WebFrame в Electron, который позволяет настроить отображение текущей веб-страницы. Эта задача выполняется только в процессе Renderer (представление). Доступ к модулю от электроники, используя:

const {webFrame} = require('electron')
// Set the zoom factor to 200%
webFrame.setZoomFactor(2);

Метод изменяет коэффициент масштабирования на указанный. Коэффициент масштабирования — это процент масштабирования, деленный на 100, поэтому 500% = 5,0 (максимальный коэффициент масштабирования 5). Вы можете получить текущий уровень, используя getZoomFactor метод тоже:

const {webFrame} = require('electron')
// Get the zoom factor i.e: 2
let currentZoomFactor = webFrame.getZoomFactor();

пример

В следующем примере показано, как изменить коэффициент масштабирования браузера с помощью ввода диапазона:


Electron Zoom State
Current Zoom:
const {webFrame} = require('electron');
let zoomLevelSpan = document.getElementById("current-value");
function getFactorInPercent(value){
return (parseInt(value) * 100) + "%"
}
document.getElementById("zoom").addEventListener("input", function(){
var value = this.value;
// Update zoom factor
webFrame.setZoomFactor(parseInt(value));
// Update label
zoomLevelSpan.innerHTML = getFactorInPercent(value);
}, false);
document.addEventListener('DOMContentLoaded', function(){
zoomLevelSpan.innerHTML = getFactorInPercent(webFrame.getZoomFactor());
}, false);