Equal scaling of the Electron window (zoom in and out according to the width and height)

Recently, there was a demand to build a project packaging tool based on Electron, and adapt to the resolution and scale of old Web projects. It required that the window should be zoomed in and out proportionally.

text

The adaptive resolution of each project is different, and in order to disguise as a desktop program, it is necessary to make them stick to the whole window as much as possible and scale equally, so this problem can be broken down into two small problems:

1. Obtain the correct resolution and update the initial size of the BrowserWindow to the correct resolution
2. Block the scaling operation of the window, calculate the size of the proportionally scaled window and apply it.

1. Get and set the initial size

The new window created by Electron is a new BrowserWindow. Because the resolution of each Web project is different, the size specified when creating the window is useless. You need to reset the window size after obtaining the project resolution.

In order not to modify the web code of the old project, I use the webPreferences.preload Item injects the js file into the original html page.

 const mainWindow = new BrowserWindow({ width: 960, height: 630, // icon:app.getAppPath() + "/favicon.ico", icon:path.join(__dirname,"src/TemplateData", 'favicon.ico'), webPreferences: { Preload: path. jin (__dirname, '/reload. js'),//This item will be automatically injected into the web page at runtime devTools:false, nodeIntegration:true }, show:false, }); mainWindow.loadFile('src/index.html'); mainWindow.once("ready-to-show",()=>{ mainWindow.show(); })

In fact, the js file loaded by preload can directly call node without setting nodeIntegration 。 After obtaining the width and height of the old project configuration in preload.js, directly ipcRenderer Send to backend.

 //preload.js const { ipcRenderer} = require('electron'); window.addEventListener("DOMContentLoaded",OnLoadFinish); function OnLoadFinish(){ let realSize = GetRealSize(); ipcRenderer.send("realSize",realSize); } function GetRealSize(){ //Get the DOM, and then get its width and height //Note that if the width and height of the string is 100px, you need to manually change it to Number. let mainContent = document.getElementById("xxx"); let w = mainContent.style.width; let h = mainContent.style.height; if(typeof(w) == "string"){ w = parseInt(w.split("px")[0]); h = parseInt(h.split("px")[0]); } return { width:w, height:h } }

Then, listen in the main Electron thread realSize Event to reset the window size after the event is triggered.

 //main.js let realSize = null; ipcMain.once("realSize",(e,args)=>{ realSize = {width:args.width, height:args.height}; mainWindow.setMinimumSize(parseInt((args.width) / 2),parseInt((args.height + 30)/2)); MainWindow. setContentSize (args. width, args. height);//Note that this item sets ContentSize, which does not include the title bar. })

2. Equal scale when zooming

Proportional scaling is very simple. The realSize has been obtained above. Every time we want to scale, we block the request and manually set the window size to the desired size.

The BrowserWindow in the Electron will trigger every time before resizing will-resize event.

 mainWindow.on("will-resize", resizeWindow); function resizeWindow(event, newBounds){ if(realSize == null){ return; } const win = event.sender; event.preventDefault();// Intercept to make the window unchanged first const currentSize = win.getSize(); const widthChanged = (currentSize[0] !=  NewBounds. width) if(widthChanged){ win.setContentSize(newBounds.width, parseInt(newBounds.width / (realSize.width / realSize.height) + 0.5)); } else { win.setContentSize(parseInt((realSize.width / realSize.height) * newBounds.height + 0.5), newBounds.height); } }

Well, here we go to set the initialization resolution and proportional scaling.

3. Other problems

After zooming the window, you may sometimes need to reset some DOM styles in html. You can write relevant code into preload.js.

Listening to the resize event of the window in the rendering process can obtain the callback of the window size change.

 //preload.js window.addEventListener("resize",onResize); function onResize(){ //Do some other things, such as resizing the div so that it can evenly fill the window }