ElectronJS 是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台本机桌面应用程序。它将 Chromium 引擎和 NodeJS 组合到单个运行时中。

所有传统的网络浏览器都具有内置的缩放功能。用户只需滚动鼠标滚轮即可放大/缩小，分别增加/减小网页内容的大小。默认情况下，Electron 不为其 BrowserWindow 实例启用缩放。然而，Electron 确实提供了一种方法，我们可以使用内置 BrowserWindow 对象 的 Instance 方法、事件和属性以及 webContents 属性向页面内容添加缩放功能。 webContents属性为我们提供了一定的Instance事件和方法，通过它们我们可以设置网页的默认缩放、网页的最大和最小缩放，以及使用鼠标滚动来放大/缩放网页页面内容。本教程演示了 Electron 中的缩放功能。

我们假设您熟悉上述链接中介绍的先决条件。为了让Electron正常工作，需要在系统中预先安装node和npm。

• 项目结构：

示例： 按照 ElectronJS 中打印中给出的步骤 设置基本的 Electron 应用程序。复制本文中提供的 main.js 文件和 index.html 文件的样板代码。 还执行 package.json 文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库来构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。
package.json：

{
  "name": "电子变焦",
  “版本”：“1.0.0”，
  "description": "电子放大",
  "main": "main.js",
  “脚本”：{
    “开始”：“电子”。
  },
  “关键字”：[
    “电子”
  ],
  “作者”：“拉德什·卡纳”，
  “许可证”：“ISC”，
  “依赖项”：{
    “电子”：“^8.3.0”
  }
}

输出： 此时我们的基本 Electron 应用程序已设置完毕。启动应用程序后，我们应该看到以下输出：

缩放功能： BrowserWindow实例和webContents属性是主流程 的一部分。 为了在渲染器进程中导入和使用BrowserWindow，我们将使用Electronremote模块。

• index.html：在该文件中添加以下代码段。

电子放大
Ctrl+滚动以触发缩放功能

常量电子 = require("电子");

// 使用 Electron 远程导入 BrowserWindow
const BrowserWindow = electro.remote.BrowserWindow;
让 win = BrowserWindow.getFocusedWindow();

// 让 win = BrowserWindow.getAllWindows()[0];

// 如果减少到最小值以下
// 错误 - 'zoomFactor' 必须是大于 0.0 的双精度值
win.webContents.setZoomFactor(1.0);

// 上限为 500 %
win.web内容
.setVisualZoomLevelLimits(1, 5)
.then(console.log("缩放级别已设置在 100% 到 500% 之间"))
.catch((err) => console.log(err));

win.webContents.on("缩放更改", (事件, ZoomDirection) => {
console.log(zoomDirection);
var currentZoom = win.webContents.getZoomFactor();console.log("当前缩放系数 - ", currentZoom);
// console.log('当前缩放级别为 - '
// , win.webContents.getZoomLevel());
console.log("当前缩放级别为 - ", win.webContents.zoomLevel);

if (zoomDirection === "in") {

// win.webContents.setZoomFactor(currentZoom + 0.20);
win.webContents.zoomFactor = currentZoom + 0.2;

console.log(“缩放系数增加到-”
, win.webContents.zoomFactor * 100, "%");
}
if (zoomDirection === "out") {

// win.webContents.setZoomFactor(currentZoom - 0.20);
win.webContents.zoomFactor = currentZoom - 0.2;

console.log(“缩放系数减小到 - ”
, win.webContents.zoomFactor * 100, "%");
}
});

• index.js：在该文件中添加以下代码段。

常量电子 = require("电子");
// 使用 Electron 远程导入 BrowserWindow
const BrowserWindow = electro.remote.BrowserWindow;
让 win = BrowserWindow.getFocusedWindow();

// 让 win = BrowserWindow.getAllWindows()[0];

// 如果减少到最小值以下
// 错误 - 'zoomFactor' 必须是大于 0.0 的双精度值
win.webContents.setZoomFactor(1.0);

// 上限为 500 %
win.web内容
.setVisualZoomLevelLimits(1, 5)
.then(console.log("缩放级别已设置在 100% 到 500% 之间"))
.catch((err) => console.log(err));

win.webContents.on("缩放更改", (事件, ZoomDirection) => {
console.log(zoomDirection);
var currentZoom = win.webContents.getZoomFactor();
console.log("当前缩放系数 - ", currentZoom);
// console.log('当前缩放级别为 - '
// , win.webContents.getZoomLevel());
console.log("当前缩放级别为 - ", win.webContents.zoomLevel);

if (zoomDirection === "in") {
// win.webContents.setZoomFactor(currentZoom + 0.20);
win.webContents.zoomFactor = currentZoom + 0.2;
​
console.log(“缩放系数增加到-”
, win.webContents.zoomFactor * 100, "%");
}
if (zoomDirection === "out") {

// win.webContents.setZoomFactor(currentZoom - 0.20);
win.webContents.zoomFactor = currentZoom - 0.2;
​
console.log(“缩放系数减小到 - ”
, win.webContents.zoomFactor * 100, "%");
}
});

代码中用到的所有实例事件、方法和属性详细解释如下：

• zoom-changed：事件当用户通过滚动鼠标滚轮 请求更改网页的缩放 级别时，将发出 webContents 属性的此实例事件。在 Windows 上，这是由 Ctrl+Scroll 组合键触发的。默认情况下，Electron 没有启用 Zoom，需要显式添加此事件以了解是否触发 Zoom 级别更改。该事件返回以下参数。
  • 事件：全局事件对象。
  • zoomDirection: String 该参数指示鼠标滚轮是否开始向上滚动以放大或向下滚动以缩小。该参数只能保存两个值，分别是in或out。
• webContents.setZoomFactor(factor) webContents 属性的此实例方法将网页的缩放系数更改为指定的系数。该实例方法确定网页应放大或缩小的因素。缩放因子是缩放百分比除以100。因此，如果缩放百分比为 100%，则 则缩放系数 – 1.0 。它接受以下参数。在上面的代码中，我们为 0.2 发出的每个 缩放比例更改 实例事件增加/减少缩放因子 ，这意味着放大或缩小 20 %。
  • 因子：双倍双倍缩放因子。默认情况下，该值设置为 1.0。因子值必须始终大于 0.0。如果在缩放操作期间该值低于0.0，则会触发错误并显示在控制台中，并且不会对网页的缩放进行进一步更改。
• webContents.getZoomFactor() webContents 属性 返回一个整数 值，描述网页的当前缩放系数。返回的值将始终大于 0.0。
  注意 - 虽然官方 Electron 文档中没有指定，但从 Electron 8.3.0 开始，此方法 已被弃用 。如果您使用此方法，即使它仍然有效，它也会在控制台中显示一条警告消息。我们应该使用 webContents.zoomFactor 实例属性来获取和操作网页的缩放系数。代码中已经演示了相同的内容并在下面进行了解释。
• webContents.setZoomLevel(level) webContents 属性的此实例方法将网页的缩放级别更改为指定级别。该实例方法确定网页应放大或缩小的级别。根据官方电子文档，原始尺寸为0，每增加或减少20%，意味着缩放到原始尺寸的默认限制为300%和 分别为 50%。 公式为 scale := 1.2 ^ level 。
  注意 – 此实例方法和 webContents.setZoomFactor() 实例方法都对 Electron 中的 Web 内容缩放执行相同的操作。这些实例方法只是根据分别提供的因素和级别采用不同的值。 此外，webContents.setZoomFactor()方法更易于管理和控制。在上面的代码中，每次发出实例事件时，我们都会显示缩放系数和缩放级别。此外，网页的缩放级别也可以是负的。
  注意 - 虽然官方 Electron 文档中没有指定，但从 Electron 8.3.0 开始，此方法 已被弃用 。如果您使用此方法，即使它仍然有效，它也会在控制台中显示一条警告消息。我们应该使用 webContents.zoomLevel 实例属性来获取和操作网页的缩放级别。
• WebContents.getZoomlevel（）webcontents property的此实例方法返回代表网页当前变焦级别的整数值。返回值也可以为负数。
  注意 - 虽然官方 Electron 文档中没有指定，但从 Electron 8.3.0 开始，此方法 已被弃用 。如果您使用此方法，即使它仍然有效，它也会在控制台中显示一条警告消息。我们应该使用 webContents.zoomLevel 实例属性来获取和操作网页的缩放级别。
• win.webContents.setVisualZoomLevelLimits(minimum, maximum) webContents 属性的此实例方法设置缩放级别的最小和最大限制。如上所述，Electron 中默认禁用缩放。要启用它，请使用此实例方法。它返回一个 Promise，并在成功设置网页的最小和最大缩放后解析。它接受以下参数。
  • minimum：整数 设置网页允许的最小缩放比例。该值是缩放百分比除以100。因此，缩放百分比 – 100% 转换为在此参数中设置的 1。
  • 最大值：整数 设置网页允许的最大缩放比例。该值是缩放百分比除以100。因此，缩放百分比 – 500% 转换为在此参数中设置的 5。
webContents 属性中的
• webContents.zoomFactor 此实例属性将网页的缩放系数更改为指定系数。该实例属性确定网页应放大或缩小的系数。缩放因子是缩放百分比除以100。在上面的代码中，我们为 0.2 发出的每个 缩放更改 实例事件增加/减少缩放因子 ，这意味着放大或缩小 20 %。
• 在 webContents 属性 webContents.zoomLevel 此实例属性将网页设置的缩放级别更改为指定级别。此实例属性确定网页应放大或缩小的级别。根据官方电子文档，原始尺寸为0，每增加或减少20%，意味着缩放到原始尺寸的默认限制为300%和 分别为 50%。 公式为 scale := 1.2 ^ level 。

为了获取Renderer Process中当前的BrowserWindow实例，我们可以使用BrowserWindow提供的 对象。 一些静态方法。

• BrowserWindow.getAllWindows(): 此方法返回活动/打开的 BrowserWindow 实例的数组。在此应用程序中，我们只有一个活动的 BrowserWindow 实例，可以直接从数组中引用它，如代码所示。
• BrowserWindow.getFocusedWindow()： 此方法返回在应用程序中具有焦点 的 BrowserWindow 实例。 如果没有找到当前的BrowserWindow实例，则返回null。在这个应用程序中，我们只有一个活动的 BrowserWindow 实例，可以使用此方法直接引用它，如代码所示。