전자를 사용하여 전체 화면 하트 효과 얻기(코드 예)

이 기사의 내용은 전자를 사용하여 전체 화면 사랑의 효과를 얻는 것에 관한 것입니다(코드 예). 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이됩니다.

사진이 압축되어 좀 보기 흉하네요

Main 프로세스 코드

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

렌더링 프로세스 코드

인터페이스 코드

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

js 코드#🎜🎜 #

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

이렇게 하면 창이 전체 화면으로 표시되지만 한 가지 문제는 인터페이스가 올바르게 응답하지 않으려면 프로세스 통신을 사용하여 해결하면 됩니다.

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

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

창 클릭 침투

위 코드에는 한 번 닫을 수 없는 문제가 있습니다. 달려가

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

#🎜 🎜#

위 내용은 전자를 사용하여 전체 화면 하트 효과 얻기(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!