为什么 Electron 窗口在我的画布周围有边框？

Question

顶部和左侧边框：

红线是用：

绘制的

Deadline.prototype.draw = function(client, context) {
    var percent = this.charge / this.maxCharge;
    context.fillStyle = "#FF0000";
    var w = percent * client.canvas.width;
    client.drawRect((client.canvas.width / 2) - 0.5 * w, this.y, w, 2, context.fillStyle);
}

当百分比为 100 时，它会向左偏移几个像素。

<html>
<body bgcolor="black" style="overflow: hidden">
    <div id="game_container">
        <canvas id="canvas" style= "width: 450; height: 600;">
        </canvas>
    </div>
</body>

来自电子main.js：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 450, height: 600,
    'title' : 'Quantum Pilot', 'transparent' : true,
    'web-preferences' : {'allow-displaying-insecure-content' : true}});
  mainWindow.loadURL('file://' + __dirname + '/game.html');

Answer 1

如果与

mainWindow.setResiazble(false)

一起使用，可能会出现黑色边框。解决方法是

preventDefault()

will-resize

事件。

// We don't need you.
// mainWindow.setResizable(false);

// Use this instead.
mainWindow.on("will-resize", e => {
    e.preventDefault();
});

如果您以后不更新该值，您可以将

resize: false

添加到

BrowserWindow

const mainWindow = new BrowserWindow({
    // ...
    resizable: false,
});

Answer 2

这是一个老话题，但我遇到了这个问题，所以我将为遇到这个问题的人提供答案。 @Michael Radionov 的评论是正确的答案。

可能是 body { margin: 8px; Chrome 默认添加的。尝试为其添加重置样式，例如 body { margin: 0; }

您需要将电子应用程序的

index.html

上的边距设置为零才能删除边框。要么喜欢评论，要么像这样应用它：

  <body style="overflow: hidden; margin: 0px">
    ...
  </body>

这将删除您的电子应用程序中的 8 像素黑色边框。

为什么 Electron 窗口在我的画布周围有边框？

问题描述投票：0回答：2

2个回答

最新问题

为什么 Electron 窗口在我的画布周围有边框？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2