Use electron to achieve the effect of full screen hearts (code example)

The content of this article is about using electron to achieve the effect of full screen love (code example). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

The picture is compressed and looks a bit ugly

##Main process code

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

Rendering process code

Interface code

<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>Extended function<strong></strong></p>Full screen display <p></p><pre class="brush:php;toolbar:false">const size = screen.getPrimaryDisplay().workAreaSize;   //获取显示器的宽高
win.setSet(size.width size.height);
win.setPosition(0,0);

This will make the window full screen, but there is a problem that the interface will not respond correctly. We can use process communication to solve it

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

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

Window click penetration

Above One problem with the code is that once it is run, it cannot be closed

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

The above is the detailed content of Use electron to achieve the effect of full screen hearts (code example). For more information, please follow other related articles on the PHP Chinese website!