如何在Electron Framework中获取屏幕的宽度和高度

本文概述

• Electron中的屏幕变量
• 获取屏幕尺寸

通常, 屏幕对象包含有关浏览器中用户屏幕的信息。没有适用于屏幕对象的公共标准, 但是所有主要的浏览器都支持它。

因此, 我们将使用以下代码段在浏览器中使用Javascript来检索屏幕尺寸：

var monitorWidth = screen.width;
var monitorHeight = screen.height;

console.log(monitorWidth + "x" + monitorHeight);
// Outputs i.e : 1280x720

但是, 这在Electron中不起作用。在本文中, 你将了解为什么此变量无法正常工作以及如何正确检索这些值。

Electron中的屏幕变量

屏幕无法使用我们在普通浏览器中看到和处理的默认属性不可用的唯一简单原因是, 该屏幕是EventEmitter。在渲染器和DevTools中, window.screen都是保留的DOM属性, 因此替换它(编写let {screen} = require(‘electron’))将无法工作。

获取屏幕尺寸

我们需要在Electron常量中提供可用的屏幕变量, 而不是在浏览器中访问screen全局变量, 你可以使用以下方法检索该变量：

const electron = require('electron');
var screenElectron = electron.screen;

屏幕对象将授予你访问有关屏幕(或多个屏幕的信息)的信息：

var mainScreen = screenElectron.getPrimaryDisplay();
var allScreens = screenElectron.getAllDisplays();

console.log(mainScreen, allScreens);

getPrimaryDisplay方法(或getAllDisplays方法返回的数组中的每个对象)将具有类似于以下内容的结构：

你可以在此处阅读有关Electron文档的更多有关屏幕模块的信息。

为了检索屏幕的高度和宽度, 你可以依赖返回的屏幕对象的size属性：

var mainScreen = screenElectron.getPrimaryDisplay();
var dimensions = mainScreen.size;

console.log(dimensions.width + "x" + dimensions.height);
// Outputs i.e : 1280x720

检索到的对象(使用mainScreen方法)提供有关屏幕尺寸和其他属性的更多信息：

• workAreaSize：提供屏幕的尺寸(高度和宽度), 而不包含任务栏的高度。
• touchSupport：以字符串形式指定屏幕是否使用触摸技术。
• scaleFactor：返回具有缩放比例的屏幕的比例因子(Float)(任何未启用缩放的屏幕的默认值均为1)。
• 旋转：指定屏幕方向是否不同于0(正常)。

玩得开心 ！