Warum muss ich mein Elektronenfenster größer als meine Leinwand machen?

JSWarum muss ich mein Elektronenfenster größer als meine Leinwand machen?

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

HTML

<html> 
<body bgcolor="black"> 
<center> 
    <div id="game_container"> 
    </div> 
</center> 
</body>

Vorder JS

generateCanvas() { 
    var canvas = document.createElement("canvas"); 
    Thing.prototype.scale = 1; 
    canvas.width = 450 * Thing.prototype.scale; 
    canvas.height = 600;

Wenn ich meine Anwendung ausführen, sind Scrollbalken vorhanden, es sei denn ich style="overflow: hidden" im body HTML verwenden.

Ich kann die Bildlaufleisten loswerden, indem Sie 50px zum Electron-Fenster hinzufügen. Aber ich bin verwirrt darüber, warum das passiert.

Wie kann ich nur ein Fenster und die Leinwand die gleiche Größe haben?

Quelle

2016-03-30 quantumpotato

Die Dimensionen, die Sie in BrowserWindow Optionen angeben sind nicht die Dimensionen des Körpers, sondern die Abmessungen des Fensters, einschließlich des Rahmens.

Wenn Sie das Innere des Fensters wollen entsprechen, was Sie als Optionen angeben, sollten Sie useContentSize: true

Von https://github.com/electron/electron/blob/master/docs/api/browser-window.md#class-browserwindow

Quelle

2016-11-08 11:45:15

width und height Eigenschaften/Attribute stellt den Koordinatenraum des Canvas dar und nicht die Abmessungen des Elements.

Verwenden Sie stattdessen <canvas style="width: 450px; height: 600px;"></canvas>, um die Abmessungen der Zeichenfläche anzugeben.

Oder einfacher, wenn Sie es Vollbild: <canvas style="width: 100vw; height: 100vh;"></canvas>

Überprüfen Sie, ob <body> oder <html> auch keine Polsterung oder Spielraum hat.

Siehe canvas attributes documentation

Quelle

2016-03-31 08:25:31 KeitIG

verwenden Es gibt keine Polsterung, aber das Design auf der Leinwand beheben das Problem nicht .. Versuchen Sie die vh – quantumpotato

Vielleicht könnten Sie Ihre Dateien in Ihren Fragen aktualisieren, sehe ich keine CSS oder Canvas-Element zum Beispiel;) Es wird ein wenig helfen, Ihren Fall zu lösen – KeitIG

Warum muss ich mein Elektronenfenster größer als meine Leinwand machen?

Antwort

Verwandte Themen