摘要:圖片被壓縮了看起來(lái)很難看主進(jìn)程代碼渲染進(jìn)程代碼界面代碼代碼創(chuàng)建畫(huà)布創(chuàng)建圖片對(duì)象初始化畫(huà)布大小愛(ài)你一輩子感謝你喜歡你初始化生成范圍偏移量縮放比例最小文字位置設(shè)置文字屬性填充字符串重新初始化位置重新初始化位置放大
圖片被壓縮了 看起來(lái)很難看
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(); }); }渲染進(jìn)程代碼 界面代碼
js代碼
mounted() { var hearts = []; var canvas = this.$refs.drawHeart; var wW = 1920; var wH = 1040; // 創(chuàng)建畫(huà)布 var ctx = canvas.getContext("2d"); // 創(chuàng)建圖片對(duì)象 var heartImage = new Image(); heartImage.src = img; var num = 100; init(); window.addEventListener("resize", function(){ wW = window.innerWidth; wH = window.innerHeight; }); // 初始化畫(huà)布大小 function init(){ canvas.width = wW; canvas.height = wH; for(var i = 0; i < num; i++){ hearts.push(new Heart(i%5)); } requestAnimationFrame(render); } function getColor(){ var val = Math.random() * 10; if(val > 0 && val <= 1){ return "#00f"; } else if(val > 1 && val <= 2){ return "#f00"; } else if(val > 2 && val <= 3){ return "#0f0"; } else if(val > 3 && val <= 4){ return "#368"; } else if(val > 4 && val <= 5){ return "#666"; } else if(val > 5 && val <= 6){ return "#333"; } else if(val > 6 && val <= 7){ return "#f50"; } else if(val > 7 && val <= 8){ return "#e96d5b"; } else if(val > 8 && val <= 9){ return "#5be9e9"; } else { return "#d41d50"; } } function getText(){ var val = Math.random() * 10; if(val > 1 && val <= 3){ return "愛(ài)你一輩子"; } else if(val > 3 && val <= 5){ return "感謝你"; } else if(val > 5 && val <= 8){ return "喜歡你"; } else{ return "I Love You"; } } function Heart(type){ this.type = type; // 初始化生成范圍 this.x = Math.random() * wW; this.y = Math.random() * wH; this.opacity = Math.random() * .5 + .5; // 偏移量 this.vel = { x: (Math.random() - .5) * 5, y: (Math.random() - .5) * 5 } this.initialW = wW * .5; this.initialH = wH * .5; // 縮放比例 this.targetScale = Math.random() * .15 + .02; // 最小0.02 this.scale = Math.random() * this.targetScale; // 文字位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; this.fs = Math.random() * 10; this.text = getText(); this.fvel = { x: (Math.random() - .5) * 5, y: (Math.random() - .5) * 5, f: (Math.random() - .5) * 2 } } Heart.prototype.draw = function(){ ctx.save(); ctx.globalAlpha = this.opacity; ctx.drawImage(heartImage, this.x, this.y, this.width, this.height); ctx.scale(this.scale + 1, this.scale + 1); if(!this.type){ // 設(shè)置文字屬性 ctx.fillStyle = getColor(); ctx.font = "italic " + this.fs + "px sans-serif"; // 填充字符串 ctx.fillText(this.text, this.fx, this.fy); } ctx.restore(); } Heart.prototype.update = function(){ this.x += this.vel.x; this.y += this.vel.y; if(this.x - this.width > wW || this.x + this.width < 0){ // 重新初始化位置 this.scale = 0; this.x = Math.random() * wW; this.y = Math.random() * wH; } if(this.y - this.height > wH || this.y + this.height < 0){ // 重新初始化位置 this.scale = 0; this.x = Math.random() * wW; this.y = Math.random() * wH; } // 放大 this.scale += (this.targetScale - this.scale) * .1; this.height = this.scale * this.initialH; this.width = this.height * 1.4; // -----文字----- this.fx += this.fvel.x; this.fy += this.fvel.y; this.fs += this.fvel.f; if(this.fs > 50){ this.fs = 2; } if(this.fx - this.fs > wW || this.fx + this.fs < 0){ // 重新初始化位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; } if(this.fy - this.fs > wH || this.fy + this.fs < 0){ // 重新初始化位置 this.fx = Math.random() * wW; this.fy = Math.random() * wH; } } function render(){ ctx.clearRect(0, 0, wW, wH); for(var i = 0; i < hearts.length; i++){ hearts[i].draw(); hearts[i].update(); } requestAnimationFrame(render); } }擴(kuò)展功能 全屏展示
const size = screen.getPrimaryDisplay().workAreaSize; //獲取顯示器的寬高 win.setSet(size.width size.height); win.setPosition(0,0);
這樣就會(huì)讓窗口全屏 但是有一個(gè)問(wèn)題 就是這樣做界面不會(huì)正確響應(yīng) 我們可以使用進(jìn)程通信去解決
win.webContents.sen("windowSize",size); 之后再主進(jìn)程中監(jiān)聽(tīng)就行了窗口點(diǎn)擊穿透
以上代碼會(huì)有一個(gè)問(wèn)題 就是一旦運(yùn)行 就不能關(guān)閉了
win.setIgnoreMouseEvents(true) 就可以讓界面只做展示使用 鼠標(biāo)可以點(diǎn)擊你窗口的任意區(qū)域
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/99439.html
摘要:未來(lái)一個(gè)大的趨勢(shì)就是前端開(kāi)發(fā)的效果,正無(wú)限逼近原生效果同時(shí)一些大廠也在紛紛提前布局了,之前驚艷四方的天貓?jiān)煳锕?jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機(jī),那么就必須提前學(xué)習(xí)。我個(gè)人想學(xué)習(xí)的框架是天貓的。 面向2018年,我覺(jué)得前端有這么三個(gè)方向可以突破 前端邏輯層(包括三大框架,webpack,前端數(shù)據(jù)管理) 前端交互層(包括css3,canvas,svg,vr...
摘要:壓縮圖片桌面應(yīng)用基于制作一個(gè)壓縮圖片的桌面應(yīng)用下載地址項(xiàng)目源碼準(zhǔn)備工作我們來(lái)整理一下我們需要做什么壓縮圖片模塊獲取文件路徑桌面應(yīng)用生成壓縮圖片我們需要使用這個(gè)庫(kù)來(lái)壓縮圖片,這里我們把這個(gè)庫(kù)封裝成壓縮模塊。 壓縮圖片桌面應(yīng)用imagemin-electron 基于electron制作一個(gè)node壓縮圖片的桌面應(yīng)用 下載地址:https://github.com/zenoslin/imag...
摘要:最近學(xué)習(xí),發(fā)現(xiàn)一個(gè)腳手架,不僅集成好了等等,甚至打包工具打包命令都一并準(zhǔn)備好了,實(shí)在是太方便了。于是產(chǎn)生了通過(guò)制作一個(gè)簡(jiǎn)單的桌面應(yīng)用,邊做邊學(xué)的想法。 最近學(xué)習(xí)vue,發(fā)現(xiàn)一個(gè)electron腳手架,不僅集成好了electron、vue、vue-state、vue-route、webpack等等,甚至打包工具打包命令都一并準(zhǔn)備好了,實(shí)在是太方便了。于是產(chǎn)生了通過(guò)electron+vue...
閱讀 4511·2021-09-22 14:57
閱讀 555·2019-08-30 15:56
閱讀 2658·2019-08-30 15:53
閱讀 2234·2019-08-29 14:15
閱讀 1684·2019-08-28 17:54
閱讀 553·2019-08-26 13:37
閱讀 3472·2019-08-26 10:57
閱讀 1041·2019-08-26 10:32