electron学习2 --- 窗口设置

最新推荐文章于 2023-12-17 16:33:32 发布
最新推荐文章于 2023-12-17 16:33:32 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： electron学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wodecanmeng/article/details/117399006
版权

这次想要记录的问题是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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用electron实现百度网盘悬浮窗口功能!
weixin_34302561的博客
10-21 3639
相关依赖 里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态 展示 介绍说明 没有使用electron内置的-webkit-app-region: drag 因为使用他那个有很多问题比如事件无法使用 右键无法使用 以及不能使用手型等! 安装 安装的时候没有截图 所以就参考下我其他的...
electron如何让你窗口总是显示在最前面【mac解决全屏窗口alwaysOnTop参数不起作用】
最新发布
weixin_42429220的博客
06-08 763
你在main.js中添加了设置，这是在中定义的main部分。这个设置允许macOS在全屏模式下显示在顶部。由于Windows操作系统没有这个设置，所以在设置之前要检查是否是macOS。这个设置只适用于macOS。这个设置允许在Keynote演示模式下显示在顶部。BrowserWindow中有一项。当我设置为true时，其他应用程序会被覆盖在顶部，但Keynote演示模式下不行。所以我需要设置。这个设置允许在切换到其他工作区时显示。
electron实现类似QQ窗口靠边自动边缘隐藏
07-20
可以访问这篇文章有完整介绍： https://blog.csdn.net/lucky_fang/article/details/125264788 最近做了一个electron+vue的项目，需要实现类似QQ边缘自动隐藏的功能。 一开始想到的是通过页面的mouseout、mouseenter、mouseleave等方法实现，通过查找了很多资料，发现这几个方法只能实现一些比较简单的交互，局限性很大，难以实现鼠标hover显示，out就隐藏的效果。 后来发现通过监听鼠标在窗口的位置可以非常方便实现鼠标hover和out的判断，从而实现窗口自动隐现功能。
Electron 窗口吸附和模拟按键操作示例
weixin_37737765的博客
07-27 1710
模块来获取当前操作系统的活跃窗口信息，并通过判断活跃窗口的名称来决定是否需要进行窗口吸附操作。然后，我们通过遍历所有窗口，将当前主窗口移动到活跃窗口的旁边，实现窗口吸附效果。现在，我们已经成功实现了窗口吸附和模拟按键操作的功能。启动应用，你将看到窗口能够自动吸附在其他窗口的旁边，并且在输入框中可以通过粘贴按钮和发送按钮来实现模拟按键操作。应用程序窗口将会打开，你可以在输入框中输入文本，并通过点击粘贴按钮或发送按钮来触发相应的功能。中监听操作系统当前活跃窗口的信息，并判断是否需要进行窗口吸附。
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设置窗口背景透明
youyudexiaowangzi的专栏
09-17 1万+
1.创建BrowserWindow时指定transparent: true和frame: false和devTools: false 注意devTools可能会影响到transparent mainWindow = new BrowserWindow({ height: 960, width: 1820, transparent: true, resizable: false, frame: false, webPreferences: {
Electron那些事07：窗口定制
uikoo9的专栏
03-23 2356
【前言】 之前章节简单介绍了窗口，本节介绍一下窗口定制， Electron那些事03：渲染界面_uikoo9的博客-CSDN博客 【默认窗口】 接之前的例子，可以看到mac上默认窗口会有一个标题栏， 但是实际开发中基本没有这种默认的标题栏 【无边框窗口】 第一种方式是为window添加frame属性，设置为false，这样就是无边框窗口了 效果如下 【设置标题栏样式】 上述效果可以看到左上角的关闭按钮也没有了，这个不是想要的效果 另一个方式是设置标题...
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`：预加载脚本，允许在渲染...
electron-nedb-todolist
05-25
1. `main.js`：这是Electron应用的主进程文件，负责创建浏览器窗口、与渲染进程通信以及管理应用生命周期。 2. `renderer.js`：渲染进程文件，用于处理用户界面和交互，通常包含React、Vue或Angular等前端框架的代码...
窗口靠边吸附隐藏模块
11-17
窗口靠边吸附隐藏模块 窗口靠边吸附隐藏模块 窗口靠边吸附隐藏模块
Electron-ffi-dll-master.rar
08-26
1. 主进程与渲染进程：Electron应用由主进程（基于Node.js）和多个渲染进程组成，主进程负责管理窗口和全局状态，渲染进程则处理用户界面和Web内容。 2. Node.js集成：Electron允许在浏览器环境中使用Node.js API，...
Electron-typesrcipt-react测试demo
03-05
总的来说，"Electron-typescript-react测试demo"是一个学习和实践如何在Electron应用中整合TypeScript和React的好起点。通过这个项目，开发者可以深入了解这些技术的结合，为构建复杂的桌面应用奠定基础。
electron-basics:边做边学电子
04-28
2. **创建基本结构**：一个简单的Electron应用通常包含主进程和渲染进程。主进程是应用的控制中心，负责管理窗口、菜单和系统事件。渲染进程则处理用户界面和DOM交互。在项目中，通常会有`main.js`作为主进程文件，...
electron-quick-start-master.rar
07-16
通过学习和理解`electron-quick-start-master`项目，开发者能够掌握Electron的基础知识，包括如何创建窗口、如何处理用户输入、如何使用Electron的API以及如何组织一个基本的Electron应用结构。这个项目对于初学者来...
Electron 中创建透明窗口
qq_42062727的博客
12-17 1185
在开发 Electron 应用时，可能需要创建完全透明的窗口，比如我们要做一个屏幕内容共享的功能，在特定矩形区域内的内容才会被共享出来，而这个区域是一个透明且可被穿透的区域。首先我们需要再主进程上创建一个矩形窗口共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小，但不能最小化和最大化，也不能进入全屏状态，窗口也不能在程序坞中关闭。
Electron自定义窗口
dupha的博客
05-17 3123
1.Electron标题栏隐藏，2.Electron窗口控件隐藏或放大 3.Electron标题栏自定义，Electron标题栏样式允许隐藏浏览器窗口的大部分色彩，同时保持系统原生窗口控件完整无损，并可以在的构造器中使用选项来配置。应用 hidden 标题栏样式的结果是隐藏标题栏和全尺寸内容窗口。
Electron的使用笔记之自定义窗口
weixin_45740906的博客
01-18 1002
无边框窗口 要创建无边框窗口需要在构造函数中设置frame为false。 在主线程main文件夹index.js里面。 import { BrowserWindow} from 'electron'; const win = new BrowserWindow({ frame: false }) 设置自定义拖动区域 要使整个窗口可拖拽, 可以在需要拖拽的元素添加以下样式 -webkit-app-region: drag 如果在窗口的边缘元素添加上面的样式，此时边缘就不能用鼠标对窗口大小进行调节。 因此需
用electron，obs-studio-node ，创建一个获取电脑桌面的场景
05-28
要使用 Electron 和 obs-studio-node 创建一个获取电脑桌面的场景，可以按照以下步骤操作： 1. 安装 Electron 和 obs-studio-node ```bash npm install electron obs-studio-node ``` 2. 在 Electron 的主进程中引入 obs-studio-node 库 ```javascript const { OBSWebSocket } = require('obs-studio-node'); ``` 3. 创建一个 Electron 窗口 ```javascript const { app, BrowserWindow } = require('electron'); app.on('ready', () => { const mainWindow = new BrowserWindow({ width: 800, height: 600, }); mainWindow.loadFile('index.html'); }); ``` 4. 在渲染进程中编写 HTML 和 JavaScript 代码，使用 OBS WebSocket API 获取桌面场景 ```html <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Desktop Scene</title> </head> <body> <canvas id="canvas"></canvas> <script> const { OBSWebSocket } = require('obs-studio-node'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const obs = new OBSWebSocket(); obs.connect({ address: 'localhost:4444' }) .then(() => obs.send('GetSceneList')) .then(data => { const desktopScene = data.scenes.find(scene => scene.name === 'Desktop'); obs.send('SetCurrentScene', { 'scene-name': desktopScene.name }); obs.on('PreviewFrame', data => { const img = new Image(); img.src = `data:image/png;base64,${data.toString('base64')}`; img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; }); obs.send('StartStopStreaming'); }); </script> </body> </html> ``` 在这个示例中，我们使用 obs-studio-node 库连接到本地的 OBS Studio 实例，并使用 OBS WebSocket API 获取桌面场景。然后，我们在一个 Canvas 元素中绘制桌面场景的预览帧。需要注意的是，这个示例仅在 Windows 上进行测试，因为在 macOS 和 Linux 上，获取桌面场景可能需要特殊的配置和权限。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值