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,
});

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

1 个答案: