Heim > Web-Frontend > js-Tutorial > Hauptteil

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

不言
Freigeben: 2018-11-27 15:17:31
nach vorne
10801 Leute haben es durchsucht

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

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

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();
    });
}
Nach dem Login kopieren

Prozesscode rendern

Schnittstellencode

<template>
    <div>
        <canvas></canvas>
    </div>
</template>
Nach dem Login kopieren

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);
Nach dem Login kopieren

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

之后再主进程中监听就行了
Nach dem Login kopieren

Fensterklick-Penetration

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

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

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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage