この記事の内容は、Electron を使用してフルスクリーン ラブの効果を実現することに関するものです (コード例)。必要な友人は参考にしていただければ幸いです。あなたに役立ちます。
画像は圧縮されており、少し見苦しくなります
##メイン プロセス コード
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>
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); 之后再主进程中监听就行了
上記のコードの問題の 1 つは、一度実行すると閉じることができないことです。
win.setIgnoreMouseEvents(true) 就可以让界面只做展示使用 鼠标可以点击你窗口的任意区域
以上がElectron を使用して全画面ハートの効果を実現する (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。