electron学习2 --- 窗口设置

最新推荐文章于 2024-07-20 09:00:00 发布
最新推荐文章于 2024-07-20 09:00:00 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： electron学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wodecanmeng/article/details/117399006
版权
本文介绍如何使用Electron创建无边框、透明的窗口，并详细讲解了如何通过frame、transparent、backgroundColor等配置项实现透明背景，以及解决设置透明度时的注意事项。同时，分享了设置窗口默认位置的方法，结合screen.getPrimaryDisplay动态计算窗口坐标。
摘要由CSDN通过智能技术生成

这次想要记录的问题是electron的窗口设置，首先用到的配置是frame这个配置项。

我想要实现的效果是一个透明的窗口来展示我每天的日程项。但是在mac上默认的窗口是有上面的红绿灯状态和标题栏的。如图

但是我不想要这个条。我希望是整个窗口都是透明的。而且没有这个条的。那就需要使用到frame参数

将frame设置为false.就可以隐藏这个条了。

效果如下 

  

看起来还不错，

接下来我想把背景设置为透明。

虽然使用opacity选项也可以。但是opacity会使得窗口中的内容的透明度也跟着一起变化了。就类似css中使用Opcity设置背景色。

所以这里需要用到另外一个配置项.backgroundColor。然而要使这个配置项支持透明度变化。就需要先设置另外一个配置项。即transparent。将它设置为true。然后就可以在backgroundColor中使用透明度。但是这里有个问题。就是backgroundColor中设置背景透明度不能使用类似rgba或者hsla这样的方式设置。而是要使用hex这种设置方式。即#AARRGGBB   后6位很好理解。就是常用的十六进制颜色。例如 白色是ffffff   黑色是000000  红色是ff0000 。但是前两位的透明度有点麻烦。比如想设置0.1的透明度。那么就需要先用0.1*255的结果四舍五入然后再把结果转化成16进制。可以使用以下的函数来得到16进制的透明度：

最低0.47元/天 解锁文章
wodecanmeng
关注
专栏目录
Electron 窗口吸附和模拟按键操作示例
weixin_37737765的博客
07-27 1913
模块来获取当前操作系统的活跃窗口信息，并通过判断活跃窗口的名称来决定是否需要进行窗口吸附操作。然后，我们通过遍历所有窗口，将当前主窗口移动到活跃窗口的旁边，实现窗口吸附效果。现在，我们已经成功实现了窗口吸附和模拟按键操作的功能。启动应用，你将看到窗口能够自动吸附在其他窗口的旁边，并且在输入框中可以通过粘贴按钮和发送按钮来实现模拟按键操作。应用程序窗口将会打开，你可以在输入框中输入文本，并通过点击粘贴按钮或发送按钮来触发相应的功能。中监听操作系统当前活跃窗口的信息，并判断是否需要进行窗口吸附。
electron实现类似QQ窗口靠边自动边缘隐藏
07-20
可以访问这篇文章有完整介绍： https://blog.csdn.net/lucky_fang/article/details/125264788 最近做了一个electron+vue的项目，需要实现类似QQ边缘自动隐藏的功能。 一开始想到的是通过页面的mouseout、mouseenter、mouseleave等方法实现，通过查找了很多资料，发现这几个方法只能实现一些比较简单的交互，局限性很大，难以实现鼠标hover显示，out就隐藏的效果。 后来发现通过监听鼠标在窗口的位置可以非常方便实现鼠标hover和out的判断，从而实现窗口自动隐现功能。
Electron案例解析——切换主题颜色的案例
最新发布
宝码香车的博客
07-20 884
Electron的属性，值是string。有三个参数：system, light 和 dark，用来覆盖、重写Chromium内部的相应的值相关文档地址：https://www.electronjs.org/zh/docs/latest/api/native-theme#nativethemethemesource。
electron中使用setPosition()方法设置窗口的位置
fu_jian_ping的博客
11-02 5160
今天我在使用setPosition()方法设置窗口的位置时出现了以下错误： 在electron的文档中有说明setPosition()方法： 主进程可用的模块 - BrowserWindow - 《Electron 8.2.0 官方文档中文版》 - 书栈网 · BookStack 根据文档所示，设置的坐标值需要正数，而我的是浮点数，因此需要将浮点数转为正数，如下所示： var configure_win_temp = remote.getCurrentWindow() ..
electron创建窗口常用配置参数
weixin_30756499的博客
08-07 1288
{ "width": 800,//指定窗口的宽度，单位: 像素值. 默认是 800 "height":600,//指定窗口的高度，单位: 像素值,. 默认是 600 "minWidth":400,//窗口的最小宽度，单位: 像素值, "minHeight":300,//窗口的最小高度，单位: 像素值, "title":"测试窗口",//窗口的默认标题 ...
Electron-窗口
qq_45903181的博客
12-23 1186
在新版本的 Electron 中，渲染进程无法直接操作窗口的放大、缩小和关闭功能。正确的做法是通过与主进程进行通信，在主进程中执行这些操作。// 渲染进程代码 (renderer.js)// 获取按钮元素// 绑定按钮点击事件});});});在上述代码中，我们使用对象来进行与主进程的通信。通过调用方法，我们向主进程发送指定的消息（‘window-action’），并传递相应的操作命令（‘maximize’、‘minimize’、‘close’）作为参数。
electron中使子窗口位于父窗口的正中间:getPosition(),setPosition()
fu_jian_ping的博客
11-02 2279
位置的计算公式如下： 代码如下： var parent_x = mainWindow.getPosition()[0] var parent_y = mainWindow.getPosition()[1] var parent_size_x = mainWindow.getSize()[0] var parent_size_y = mainWindow.getSize()[1] var settings_size_x = settingsWin.getSize()[0] .
electron 2 - 创建主窗口
ef_ef的博客
05-19 851
主进程,渲染进程的区别 主进程是控制整个软件的, 文件通常命名为main.js 一个窗口相当于一个网页, 渲染进程就是网页的JavaScript, 文件通常命名为renderer.js 创建窗口 软件大体都由主进程控制, 所以窗口要在main.js中创建 main.js const { app, BrowserWindow } = require('electron) app.on('ready', () => { const mainWindow = new Browse
electron-quick-start.rar
07-29
在这里，你可以设置应用启动时的行为，例如打开新窗口、监听事件等。 2. `index.html`：这是应用的用户界面，通常包含 HTML、CSS 和可能的 JavaScript 代码，用于展示“Hello world”文本。 3. `renderer.js`...
electron-quick-start-master.zip
01-18
3. `main.js`：Electron应用的主进程文件，负责创建浏览器窗口并管理应用生命周期。 4. `renderer.js`：运行在每个Web视图中的脚本，对应于浏览器进程，处理用户界面交互。 5. `preload.js`：预加载脚本，允许在渲染...
简单吸附窗口
12-02
一个简单吸附窗口
窗口靠边吸附隐藏模块
11-17
窗口靠边吸附隐藏模块 窗口靠边吸附隐藏模块 窗口靠边吸附隐藏模块
Electron-ffi-dll-master.rar
08-26
1. 主进程与渲染进程：Electron应用由主进程（基于Node.js）和多个渲染进程组成，主进程负责管理窗口和全局状态，渲染进程则处理用户界面和Web内容。 2. Node.js集成：Electron允许在浏览器环境中使用Node.js API，...
electron-nedb-todolist
05-25
1. `main.js`：这是Electron应用的主进程文件，负责创建浏览器窗口、与渲染进程通信以及管理应用生命周期。 2. `renderer.js`：渲染进程文件，用于处理用户界面和交互，通常包含React、Vue或Angular等前端框架的代码...
Electron窗口管理详解：使用BrowserWindow API打造个性化界面
与墨的编程成长历程
03-21 1777
总结而言，Electron 的 BrowserWindow API 是一个强大且灵活的工具，它涵盖了从窗口创建、属性配置、行为控制到事件监听等全方位的功能。深入理解和熟练运用此 API ，不仅能让开发者高效地构建稳定、高性能的桌面应用，更能帮助其实现对应用程序窗口的高度个性化定制，从而创造出独特且用户体验卓越的产品界面。随着对 BrowserWindow API 探索的深入，你会发现它所提供的可能性远超过你的想象。
vue3+electron开发桌面软件入门与实战（3）—— electron模块化改造+窗口位置工具+合并命令行工具
关注前端，关注原创
10-21 1440
vue3+electron的模块化改造，窗口位置记录工具，命令行合并工具，让你的应用更趋近于企业级
第4章：Electron主窗口与子窗口管理
一名全栈开发工程师
07-02 1367
Electron 中创建和管理主窗口及子窗口，包括如何进行窗口间通信、使用预加载脚本提高安全性、管理多个窗口以及显示和隐藏窗口的操作。在接下来的章节中，我们将进一步探讨如何实现更多高级功能和最佳实践，帮助你进一步掌握 Electron 开发。预加载脚本在渲染进程加载前执行，允许在渲染器上下文中暴露自定义 API，并提供与主进程安全通信的桥梁。主窗口是 Electron 应用启动后显示的第一个窗口，通常用来承载应用的主界面。通过 IPC 机制，主窗口和子窗口可以相互通信。
electron折腾记（二）——关于窗口
热门推荐
Daisy花园
05-15 3万+
这里讲一些关于electron中窗口的设置，主要是对原API的解读创建一个新的窗口const BrowserWindow = require('electron').remote.BrowserWindow const path = require('path')const newWindowBtn = document.getElementById('new-window')newWindowBt
electron实现百度网盘悬浮窗口教程：无-webkit-app-region问题
本篇文章是关于使用Electron框架实现在浏览器中创建一个悬浮窗口的功能，以实现百度网盘的类似操作。文章着重介绍了如何在Electron应用中避开内置的-webkit-app-region: drag属性，因为该特性存在一些限制，如事件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值