Verwenden Sie Elektronen, um den Effekt von Vollbildherzen zu erzielen (Codebeispiel).

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Elektronen, um den Effekt der Vollbildliebe zu erzielen. Ich hoffe, dass dies für Freunde in Not hilfreich ist nützlich für Sie.

Das Bild ist komprimiert und sieht etwas hässlich aus

Hauptprozesscode

import {BrowserWindow, app, ipcMain} from 'electron'

createWindow();

ipcMain.on('quitApp', () => {
    app.quit();
});

function createWindow() {

    const loginURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`;
    const win = new BrowserWindow({

        alwaysOnTop: true,
        modal: true,
        width: 1200,
        height: 6500,
        frame: false,
        show: false,
        darkTheme: true,
        resizable: false,
        minimizable: false,
        maximizable: false,
        transparent: true,
        type: 'toolbar',
        webPreferences: {
            devTools: false,
        }
    });
    win.loadURL(loginURL);
    win.once('ready-to-show', () => {
        win.show();
    });
}

Prozesscode rendern

Schnittstellencode

<template>
    <div>
        <canvas></canvas>
    </div>
</template>

js-Code

 mounted() {
            var hearts = [];
            var canvas = this.$refs.drawHeart;
            var wW = 1920;
            var wH = 1040;
            // 创建画布
            var ctx = canvas.getContext('2d');
            // 创建图片对象
            var heartImage = new Image();
            heartImage.src = img;
            var num = 100;

            init();

            window.addEventListener('resize', function(){
                wW = window.innerWidth;
                wH = window.innerHeight;
            });
            // 初始化画布大小
            function init(){
                canvas.width = wW;
                canvas.height = wH;
                for(var i = 0; i  0 && val  1 && val  2 && val  3 && val  4 && val  5 && val  6 && val  7 && val  8 && val  1 && val  3 && val  5 && val  wW || this.x + this.width  wH || this.y + this.height  50){
                    this.fs = 2;
                }

                if(this.fx - this.fs > wW || this.fx + this.fs  wH || this.fy + this.fs <p><strong>Erweiterte Funktionen</strong></p><p>Vollständig Bildschirmanzeige </p><pre class="brush:php;toolbar:false">const size = screen.getPrimaryDisplay().workAreaSize;   //获取显示器的宽高
win.setSet(size.width size.height);
win.setPosition(0,0);

Dadurch wird das Fenster im Vollbildmodus angezeigt, aber es besteht das Problem, dass die Schnittstelle nicht richtig reagiert. Wir können die Prozesskommunikation verwenden, um das Problem zu lösen

win.webContents.sen('windowSize',size);

之后再主进程中监听就行了

Fensterklick-Penetration

Oben Ein Problem mit dem Code besteht darin, dass er nach der Ausführung nicht geschlossen werden kann

win.setIgnoreMouseEvents(true) 就可以让界面只做展示使用 鼠标可以点击你窗口的任意区域

Das obige ist der detaillierte Inhalt vonVerwenden Sie Elektronen, um den Effekt von Vollbildherzen zu erzielen (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!