ElectronJS 中的缩放功能

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 应用程序所需的基本步骤保持不变。
包.json：

{
  "name": "electron-zoom",
  "version": "1.0.0",
  "description": "Zoom in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

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

Electron 中的缩放功能： BrowserWindow实例和webContents属性是Main Process 的一部分。为了在 Renderer Process 中导入和使用 BrowserWindow，我们将使用 Electron远程模块。

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

html

Zoom in Electron
Ctrl+Scroll for Triggering Zoom Functionality

• 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 没有启用 Zoom，需要明确添加此 Event 以了解 Zoom 级别的更改是否被触发。此事件返回以下参数。
  • 事件：全局事件对象。
  • zoomDirection: String该参数表示鼠标滚轮上的滚动是向上启动表示放大还是向下启动表示缩小。该参数只能保存两个值，即分别为in或out。
• webContents.setZoomFactor(factor) webContents属性的此实例方法将网页的缩放系数更改为指定的系数。此 Instance 方法确定应放大或缩小网页的因素。缩放系数是缩放百分比除以100 。因此，如果 Zoom Percent 为100%，则 Zoom Factor – 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 Instance 属性来获取和操作网页的缩放系数。代码中已经演示了相同的内容并在下面进行了解释。
• webContents.setZoomLevel(level) webContents属性的此实例方法将网页的缩放级别更改为指定级别。此 Instance 方法确定应放大或缩小网页的级别。根据官方电子文档，原始大小为0 ，每增加或减少 20%代表缩放到原始大小的默认限制分别为300%和50%。这个公式是scale := 1.2 ^ level 。
  注意– 此 Instance 方法和webContents.setZoomFactor() Instance 方法都对 Electron 中网页内容的缩放执行相同的操作。这些 Instance 方法只是根据分别提供的因子和级别取不同的值。另外webContents.setZoomFactor()方法更易于管理和控制。在上面的代码中，我们在每次发出实例事件时都显示了缩放系数和缩放级别。此外，网页的缩放级别也可以是负值。
  注意——尽管官方 Electron 文档中没有指定，但从Electron 8.3.0 开始，此方法已弃用。如果使用此方法，即使它仍然有效，它也会在控制台中显示警告消息。我们应该使用webContents.zoomLevel实例属性来获取和操作网页的缩放级别。
• webContents.getZoomLevel() webContents属性的此实例方法返回一个整数值，表示网页的当前缩放级别。返回的值也可以是负值。
  注意——尽管官方 Electron 文档中没有指定，但从Electron 8.3.0 开始，此方法已弃用。如果使用此方法，即使它仍然有效，它也会在控制台中显示警告消息。我们应该使用webContents.zoomLevel实例属性来获取和操作网页的缩放级别。
• win.webContents.setVisualZoomLevelLimits(minimum, maximum) webContents属性的此实例方法设置缩放级别的最小和最大限制。如上所述，默认情况下在 Electron 中禁用缩放功能。要启用它，请使用此 Instance 方法。它返回一个Promise并在成功设置网页的最小和最大缩放后解决。它接受以下参数。
  • minimum: Integer设置网页允许的最小缩放。该值是缩放百分比除以100 。因此，缩放百分比 – 100%转换为1 ，这是在此参数中设置的。
  • 最大值：整数设置网页允许的最大缩放。该值是缩放百分比除以100 。因此，Zoom Percent – 500%转换为在此参数中设置的5。
• 在webContents财产webContents.zoomFactor此实例属性更改网页的缩放系数到指定的因素。此实例属性确定应放大或缩小网页的因素。缩放系数是缩放百分比除以100 。在上面的代码中，我们为每个由 0.2发出的缩放更改的实例事件增加/减少缩放系数，这意味着放大或缩小20%。
• 在webContents财产webContents.zoomLevel此实例属性更改网页的缩放级别设置为指定级别。此 Instance 属性确定应放大或缩小网页的级别。根据官方电子文档，原始大小为0 ，每增加或减少 20%代表缩放到原始大小的默认限制分别为300%和50%。这个公式是scale := 1.2 ^ level 。

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

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

此时，我们应该可以成功地在 Electron 中放大和缩小 BrowserWindow 的内容了。
输出：