Electron点击穿透不规则窗体的透明区域的实现

2024-09-28 17:46:34

实现一个不规则窗体

这里我们实现一个圆形窗体，实现其他形状的窗体与这个方法类似。

首先，把窗口的高度（height）和宽度（width）值修改为相同的值，使窗口成为一个正方形。

其次，把窗口的透明属性（transparent）设置为true，这样设置之后窗口还是正方形的，但只要我们控制好内容区域的Dom元素的形状，就可以让窗口看起来像一个不规则形状一样。

不规则窗口往往需要自定义边框和标题栏，所以frame也设置为false。

另外，透明的窗口不可调整大小。所以将resizable属性设置为false。

窗口显示后，为了防止双击窗口可拖拽区触发最大化事件，我们把maximizable属性也设置为false。

最终创建窗口的代码如下：

win = new BrowserWindow({
        width: 380,
        height: 380,
        transparent: true,
        frame: false,
        resizable: false,
        maximizable: false,
        //...
})

接下来再修改样式，使内容区域的Dom元素呈现一个圆形：

html,body {
  margin: 0px;
  padding: 0px;
  pointer-events: none;
}
#app {
 box-sizing: border-box;
 width: 380px;
 height: 380px;
 border-radius: 190px;
 border: 1px solid green;
 background: #fff;
 overflow: hidden;
 pointer-events: auto;
}

上面样式代码中通过border-radius样式把#app元素设置成了圆形。border-radius负责定义一个元素的圆角样式，如果圆角足够大，整个DIV就变成了一个圆形。

pointer-events样式，在后面会有讲解。

最终实现的窗口界面如图5-7：

如果你略微了解CSS，你会知道除了圆形，你还可以通过CSS样式控制这个窗口成为任意其他形状。

点击穿透透明区域

上面这个应用会有一点小问题，虽然窗口看起来是圆形的，但它其实还是一个正方形窗口，只不过正方形四个角是透明的，所以看起来像一个圆形的窗口。

当我点击下图中的①区域内的文本文件时，鼠标的点击事件还是发生在本窗口内，而不会点击到那个文件上。

作为开发者，我们知晓其中的道理，但作为用户来说，这就显得很诡异。为了达到更好的用户体验，我们需要让鼠标在这4个区域发生点击动作时，点击动作可以穿透本窗口，落在窗口后面的内容上。

Electron官方文档明确说“不能点击穿透透明区域”，这并没有难倒我们，有一个小trick来解决这个问题。

首先，需要用到窗口对象的setIgnoreMouseEvents方法，该方法可以使窗口忽略窗口内的所有鼠标事件，并且在此窗口中发生的所有鼠标事件都将被传递到此窗口背后的内容。

如果调用该方法时传递了forward参数，如：

setIgnoreMouseEvents(true, { forward: true })，

则只有点击事件会穿透窗口，鼠标移动事件仍会触发。

基于此，我们在页面中执行如下代码：

const remote = require("electron").remote;
  let win = remote.getCurrentWindow();
  window.addEventListener("mousemove", event => {
  let flag = event.target === document.documentElement;
  if (flag){
     win.setIgnoreMouseEvents(true, { forward: true });
  }
  else {
    win.setIgnoreMouseEvents(false);
  }
  });
  win.setIgnoreMouseEvents(true, { forward: true });

注意，这是实验代码，所以用了remote模块，关于remote模块的一些问题，我在“Electron团队为什么要干掉remote模块“有详细描述。

上面的代码中，设置窗口对象监听mousemove事件，当鼠标移入窗口圆形内容区的时候，不允许鼠标事件穿透。当鼠标移入透明区时，允许鼠标事件穿透。

接着我们为html,body元素增加样式：pointer-events: none，为#app元素增加样式pointer-events: auto。

设定pointer-events: none后，其所标志的元素就永远不会成为鼠标事件的target了。

为子元素#app设置了pointer-events: auto，说明子元素#app还是可以成为鼠标事件的target的。

也就是说除了圆形区域内可以接收鼠标事件外，其他部分将不再接收鼠标事件。

当鼠标在圆形区域外移动时，窗口对象的mousemove事件触发，event.target为document.documentElement对象（这个事件并不是在html或body元素上触发的，而是在窗口对象上触发的，document.documentElement就是DOM树中的根元素，也就是html节点所代表的元素）。

至此，上文代码中的判断成立，当鼠标在前文所述四个区域移动时，鼠标事件允许穿透。鼠标在圆形区域移动时，鼠标事件不允许穿透。

至此，上文所述判断成立，运行程序，鼠标在正方形四角区域内点击，鼠标事件具备了穿透效果。

到此这篇关于Electron点击穿透不规则窗体的透明区域的实现的文章就介绍到这了,更多相关Electron点击穿透内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

前端Electron新手入门教程详解

Electron 是什么定义 Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架.这里所说的桌面应用指的是在Windows.OSX及Linux系统上运行的程序. 历史 2013年的时候,Atom编辑器问世,作为实现它的底层框架Electron也逐渐被熟知,到2014年时被开源,那时它还是叫Atom Shell. 接下来的几年,Electron在不断的更新迭代,几乎每年都有一个重大的里程碑 2013年4月11日,
Electron 调用命令行(cmd)

因为最近的项目需求,需要在 Electron 客户端启动的时候启动 nginx 服务,所以研究了一下怎么在 Electron 调用命令行. 因为 Electron 基于 Chromium 和 Node.js,可以直接使用 Node.js 的 API 和一些包.目前研究有以下两种方法: child_process child_process是 Node.js 的内置模块,该模块提供了衍生子进程的能力. 实现代码: const exec = require('child_process').exe
详解Angular CLI + Electron 开发环境搭建

本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el
Electron + vue 打包桌面操作流程详解

提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好获取Electron的资源 git clone https://github.com/el
Electron 如何调用本地模块的方法

Electron 结合了 Chromium.Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口.通知.图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使用 Node.或者说:就好像构建一个 Node app,并通过 HTML 和 CSS 构建界面. 那么如何在页面中调用 Node API 呢? 碰到了一些坑- 先从页面加载方式说起,Electron 中加载页面的方式有两种: 一种是直接加载本地文件,另一种是通过 http 网络请求页面. //方法1
Electron vue的使用教程图文详解

下面详细给大家介绍Electron+vue的使用,具体内容如下所示: .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的
从零开始用electron手撸一个截屏工具的示例代码

最近在尝试利用 electron 将一个 web 版的聊天工具包装成一个桌面 APP.作为一个聊天工具,截屏可以说是一个必备功能了.不过遗憾的是没有找到很成熟的库来用,也可能是打开方式不对,总之呢没看到现成的,于是就想从头撸一个简单的截图工具.下面就进入正题吧! 思路 electron 提供了截取屏幕的 API,可以轻松的获取每个屏幕(存在外接显示器的情况)和每个窗口的图像信息. 把图片截取出来,然后创建一个全屏的窗口盖住整个屏幕,将截取的图片绘制在窗口上,然后再覆盖一层黑色半透明的元素,看起来
electron实现静默打印的示例代码

前言 electron+vuecli3 实现设置打印机,静默打印小票功能网上相关的资料比较少,这里给大家分享一下,希望大家可以少踩一些坑 github地址必须要强调一下的是electron的版本必须是3.0.0不能,我尝试了4和5都没有实现效果图使用 git clone https://github.com/sunnie1992/electron-vue-print-demo.git npm install npm run electron:serve 实现操作思路 1.用户点击打印
Electron点击穿透不规则窗体的透明区域的实现

目录实现一个不规则窗体点击穿透透明区域实现一个不规则窗体这里我们实现一个圆形窗体,实现其他形状的窗体与这个方法类似. 首先,把窗口的高度(height)和宽度(width)值修改为相同的值,使窗口成为一个正方形. 其次,把窗口的透明属性(transparent)设置为true,这样设置之后窗口还是正方形的,但只要我们控制好内容区域的Dom元素的形状,就可以让窗口看起来像一个不规则形状一样. 不规则窗口往往需要自定义边框和标题栏,所以frame也设置为false. 另外,透明的窗口不可调整
WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法

本文实例讲述了WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法.分享给大家供大家参考.具体方法如下: 这里首先说明一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的很多解决方案不能满足所有的情况,是有特定条件的,比如有一篇<WPF中不规则窗体与WebBrowser控件的兼容问题解决办法>(感兴趣的朋友可以自己百度一下这篇文章).该网友的解决办法也是别出心裁的,为什么这样说呢,他的webBrowser控件的是单独放在一个Form中
MFC绘制不规则窗体的方法

本文实例讲述了MFC 绘制不规则窗体的方法.分享给大家供大家参考.具体分析如下: 实现过程: 1.首先创建基于DLG的MFC应用程序,命名为:tryBGDlg,并将DLG的属性设置为:Title Bar :False ,其它设置不变 2.制作两幅图像,其中的一幅黑白图像,是根据播放器外观来制作的,其中白色区域是要保留的最终在桌面上显示的区域.将这两幅图像添加到工程中,第一个ID号设置为IDB_INTERFACE,第二个ID号设置为:IDB_MASK 3.在CtryBGDlg类中添加一个在函数:
C#创建不规则窗体的4种方式详解

现在,C#创建不规则窗体不是一件难事,下面总结一下: 一.自定义窗体一般为规则的图形,如圆.椭圆等. 做法:重写Form1_Paint事件(Form1是窗体的名字),最简单的一种情况如下: System.Drawing.Drawing2D.GraphicsPath shape = new System.Drawing.Drawing2D.GraphicsPath(); shape.AddEllipse(0,0,this.Height, this.Width); this.Region = ne
winform创建不规则窗体的方法

本文实例讲述了winform创建不规则窗体的方法.分享给大家供大家参考.具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using Microsoft.Win32; using System.Drawing
Qt实现部件透明阴影效果与不规则窗体详解

目录透明效果阴影效果不规则窗体效果透明效果原始效果设置整个窗体透明,调用setWindowOpacity( )方法,传入一个0~1之间的值来表示透明度:1表示不透明,0表示完全透明 setWindowOpacity(0.5);//0~1之间设置窗体透明,部件不透明 setWindowFlags(Qt::FramelessWindowHint);//无边框 setAttribute(Qt::WA_TranslucentBackground);//透明对单个部件设置透明 QGraph
使用electron制作满屏心特效的示例代码

本文介绍了使用electron制作满屏心特效的示例代码,分享给大家,具体如下: 图片被压缩了看起来很难看主进程代码 import {BrowserWindow, app, ipcMain} from 'electron' createWindow(); ipcMain.on('quitApp', () => { app.quit(); }); function createWindow() { const loginURL = process.env.NODE_ENV === 'develo
vue electron实现无边框窗口示例详解

目录一.前言二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件三.后记一.前言无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro
Winform实现鼠标可穿透的窗体镂空效果

今天找到一个名叫LICEcap的录屏软件,录制界面是这样的: 这个炫酷的空心窗口就是镜头,调整好大小,然后对准需要录制的地方按下Record就可以生成gif了. 卧槽太NB了我也要做一个! 根据StackOverflow站的提示(在这里),我们需要使用一个在Windows2000及之后平台可用的,用以实现不规则窗体的分层窗口API (SetLayerWindowAttributes).根据百度我们先需要使用一个名为SetWindowLong的Win32 API来把窗体设定为分层窗体. 为了在.N
winform异型不规则界面设计的实现方法

本文实例讲述了winform异型不规则界面设计的实现方法,用于界面设计时有不错的用户体验,非常实用.分享给大家供大家参考之用.具体方法如下: 一.不规则WINFORM窗体 Author:unknown From:Internet 在以前版本的Visual Basic或Visual C++中,创建不规则窗体和控件是一件很复杂的事,不仅需要调用大量API函数而且工作量也不小.不过,现在在Visual C#下,情况就完全不同了.运用Windows Forms你就可以很轻易地创建出一个不规则的窗体以及窗

Electron点击穿透不规则窗体的透明区域的实现

目录

实现一个不规则窗体

点击穿透透明区域

相关推荐

随机推荐