Electron中内容周围的黑色边框答案

【问题标题】：Black border arround content in ElectronElectron中内容周围的黑色边框
【发布时间】：2019-12-18 21:48:46
【问题描述】：

我使用 electron 将使用 Phaser 2 制作的视频游戏转换为 .exe。但是围绕我的内容，我有一些边框或边距。

我尝试使用全屏来更改它，我也尝试使用 useContentSize 但问题没有解决。

这是我的 JS 文件：

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Cree la fenetre du navigateur.
 win = new BrowserWindow({
    //width: 886,
    //height: 473,
    useContentSize : true,
    autoHideMenuBar : true,
    icon: "favicon.ico",
    //met la fenetre sans bordure 
    //frame : false,
    //fullscreen : true,
  })

  //load the index.html.
  win.loadFile('src/junkbuster.html');
  win.setMenuBarVisibility(false);
  win.setMenu(null);
  //win.setContentSize(1700,1200);
}

app.on('ready', function(){
  createWindow();

  console.log(win.getContentBounds());

  //800,600 => 786, 563
  console.log(win.getSize()+"=>"+win.getContentSize());

});

这是我的 HTML 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="./phaser.js"></script>
    <script src="./index.js"></script>
    <style type="text/css">
    body {
        background-color: black;
        width:100vw;
        height:100vh;
        margin:0px;
    }
    body * {
        margin-left: auto;
        margin-right: auto;
    }
    </style>
</head>
<body>
</body>
</html>

【问题讨论】：

提供 HTML 和 CSS

标签： javascript node.js npm electron

【解决方案1】：

根据Issue #9419，对我有用的解决方法是避免使用mainWindow.setResizable(false)，而是使用它：

mainWindow.on('will-resize', (e) => {
//prevent resizing even if resizable property is true.
    e.preventDefault();
});

【讨论】：

谢谢这是完美的

【解决方案2】：

这个问题来自 Phaser 2 的 scaleMangaer。所以要解决这个问题，您需要转到 Boot init 文件并更改您的 scaleMode。

转至https://phaser.io/docs/2.6.2/Phaser.ScaleManager.html了解更多信息

【讨论】：