electron+vue3全家桶+vite项目搭建【29】封装窗口工具类【3】控制窗口定向移动

文章目录

    • 引入
    • 实现效果
    • 思路
    • 声明通用的定位对象
    • 主进程模块
    • 渲染进程
    • 测试效果

引入

demo项目地址
窗口工具类系列文章:
封装窗口工具类【1】雏形
封装窗口工具类【2】窗口组,维护窗口关系
封装窗口工具类【3】控制窗口定向移动

很多时候,我们想直接让某个窗口移动到边角,例如居中、左上、右下等位置,electron没有提供直接的api来实现这种操作,我们不妨基于electron的位置移动api进行封装,实现窗口灵活的定向移动

实现效果

  • 输入key可以操作指定窗口,不输入则操作本窗口
  • 可以直接根据position参数快速控制窗口定向移动
  • 输入偏移量微调窗口
    electron+vue3控制窗口定向移动柜

思路

electron位置相关api

electron获取某个窗口所在屏幕的显示对象

首先electron的窗口位置也是有(x,y)坐标,对应横轴和纵轴,我们可以使用窗口移动api设置x和y,左上角就是[0,0],然后我们可以通过screen.getDisplayMatching(rect)来获取窗口所在屏幕的展示对象,从中可获取屏幕的长宽和x,y等信息,接着咱们直接用这两个数据做差即可:

假如屏幕用s表示,窗口用w表示,窗口居中计算如下:

x = s.x + (s.width - w.width) / 2
y = s.y + (s.height - w.height) / 2

声明通用的定位对象

  • types\global.d.ts
/** 一些全局的对象补充声明 */
export {};
declare global {....../*** ================= 窗口定位相关参数 ================*//** 自定义定位类型 */type MyPosition =| "center" // 居中| "bottom-left" // 左下| "bottom-right" // 右下| "top-right" // 右上| "top-left"; // 左上/*** 注意,这里指的屏幕是当前窗口所在的屏幕【存在多个屏幕的情况下】*/interface IWindowPosition {windowKey?:string; // 窗口的key,不传就是修改本窗口的位置x?: number; // 屏幕左上角开始x轴位置y?: number; // 屏幕左上角开始y轴位置relativeWindowId?: number; // 相对于某个窗口的位置/默认相对于屏幕position?: MyPosition; // 相对于屏幕或窗口的位置offsetX?: number; // X轴偏移量offsetY?: number; // Y轴偏移量}
}

主进程模块

1.我们在窗口工具类中补充一个修改窗口位置的方法

  • electron\main\windowUtils.ts
  • 这里还补充了一个横纵轴的偏移量offsetX,offsetY,用于需要微调定位的情况
  • 这里我们把window作为参数传入,而不是在方法内部直接通过key去获取,是为了方便后续其他在工具类中的位置修改操作方便调用
import {screen} from "electron";export class WindowUtils {...
/*** 修改窗口的位置* @param window 窗口对象* @param windowPosition 位置参数对象*/changeWindowPostion(window: BrowserWindow, windowPosition: IWindowPosition) {// xy轴值let x = windowPosition.x;let y = windowPosition.y;if (x != null && y != null) {// 偏移量const offsetX = windowPosition.offsetX || 0;const offsetY = windowPosition.offsetY || 0;x = windowPosition.x + offsetX;y = windowPosition.y + offsetY;// 如果是相对于某个窗口的话,加上相对窗口的x、y坐标if (windowPosition.relativeWindowId) {const relativeWin = BrowserWindow.fromId(windowPosition.relativeWindowId);if (relativeWin) {x += relativeWin.getPosition()[0];y += relativeWin.getPosition()[1];}}window.setPosition(x, y);}// 如果有定位if (windowPosition.position) {// 偏移量const offsetX = windowPosition.offsetX || 0;const offsetY = windowPosition.offsetY || 0;const winBounds = window.getBounds();let relativeBounds = screen.getDisplayMatching(winBounds).bounds;if (windowPosition.relativeWindowId) {const relativeWin = BrowserWindow.fromId(windowPosition.relativeWindowId);if (relativeWin) {relativeBounds = relativeWin.getBounds();}}// 计算坐标switch (windowPosition.position) {case "center":window.setPosition(relativeBounds.x +(relativeBounds.width - winBounds.width) / 2 +offsetX,relativeBounds.y +(relativeBounds.height - winBounds.height) / 2 +offsetY);break;case "bottom-left":window.setPosition(relativeBounds.x + offsetX,relativeBounds.y +relativeBounds.height -winBounds.height +offsetY);break;case "bottom-right":window.setPosition(relativeBounds.x + relativeBounds.width - winBounds.width + offsetX,relativeBounds.y +relativeBounds.height -winBounds.height +offsetY);break;case "top-left":window.setPosition(relativeBounds.x + offsetX,relativeBounds.y + offsetY);break;case "top-right":window.setPosition(relativeBounds.x + relativeBounds.width - winBounds.width + offsetX,relativeBounds.y + offsetY);break;}}}
}

2.接着我们补充两个获取窗口的方法

  • electron\main\windowUtils.ts
export class WindowUtils {.../*** 通过窗口事件获取发送者的窗口* @param event ipc发送窗口事件*/getWindowByEvent(event: Electron.IpcMainInvokeEvent): BrowserWindow {const webContentsId = event.sender.id;for (const currentWin of BrowserWindow.getAllWindows()) {if (currentWin.webContents.id === webContentsId) {return currentWin;}}return null;}/*** 通过传入的key获取指定的窗口* @param key 窗口唯一key*/getWindowByKey(key: string): BrowserWindow {return BrowserWindow.fromId(this.group.get(key).windowId);}   
}

3.接着我们在listen方法中补充handle监听,来处理渲染进程的事件

  • electron\main\windowUtils.ts
export class WindowUtils {...listen() {...// 窗口位置修改监听ipcMain.handle(CustomChannel.window_position_change,(_, windowPosition: IWindowPosition) => {// 假如传了窗口的key,则获取对应窗口,假如没传,则用发送事件的窗口const windowKey = windowPosition.windowKey;const cureentWin =windowKey && windowKey.length > 0? this.getWindowByKey(windowKey): this.getWindowByEvent(_);this.changeWindowPostion(cureentWin, windowPosition);});}
}

渲染进程

1.工具类中补充窗口位置修改方法调用

  • src\utils\electronUtils.ts
/*** 修改当前窗口的位置* @param windowPosition 窗口位置修改参数*/
export function changeWindowPosition(windowPosition: IWindowPosition) {ipcRenderer.invoke(CustomChannel.window_position_change, windowPosition);
}

2.写一个功能展示的demo

  • src\components\demo\WindowPositionDemo.vue
<template><div class="mockDemo"><GoBack></GoBack><ul><li><el-input v-model="windowKey"></el-input></li><li><el-form inline><el-form-item label="距离左边距离"><el-input v-model="x"></el-input></el-form-item><el-form-item label="距离上边距离"><el-input v-model="y"></el-input></el-form-item><el-form-item label="距离左边偏移量"><el-input v-model="offsetX"></el-input></el-form-item><el-form-item label="距离上边偏移量"><el-input v-model="offsetY"></el-input></el-form-item><el-form-item><el-button@click="changeWindowPosition({x: Number.parseFloat(x),y: Number.parseFloat(y),offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})">移动位置</el-button></el-form-item></el-form></li><li><el-button@click="changeWindowPosition({position: 'top-left',offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})">左上</el-button><el-button@click="changeWindowPosition({position: 'top-right',offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})">右上</el-button></li><li><el-button@click="changeWindowPosition({position: 'center',offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})">居中</el-button></li><li><el-button@click="changeWindowPosition({position: 'bottom-left',offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})">左下</el-button><el-button@click="changeWindowPosition({position: 'bottom-right',offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})">右下</el-button></li></ul></div>
</template><script setup lang="ts">
import { changeWindowPosition } from "@/utils/electronUtils";
import { ref } from "vue";
const x = ref("0");
const y = ref("0");
const offsetX = ref("0");
const offsetY = ref("0");
const windowKey = ref("");
</script><style scoped>
ul {list-style: none;
}
</style>

测试效果

可以随心所欲的控制任何窗口到处定向移动了,是不是很酷 _三└(┐卍 ˘ω˘)卍

  • 输入key可以操作指定窗口,不输入则操作本窗口
  • 可以直接根据position参数快速控制窗口定向移动
  • 输入偏移量微调窗口
    electron+vue3控制窗口定向移动柜

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/720462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt 运行一个实例进程

QLocalSocket QLocalServer 逻辑&#xff1a;首先一个新的实例启动时&#xff0c;将尝试连接到同一个本地服务器&#xff0c;如果连接失败&#xff0c;则表示第一个实例进程&#xff0c;创建一个本地服务器&#xff1b;否则&#xff0c;拉起已打开的实例进程。 main.cpp #i…

【学习心得】网站运行时间轴(爬虫逆向)

一、网站运行时间轴 掌握网站运行时间轴&#xff0c;有助于我们对“请求参数加密”和“响应数据加密”这两种反爬手段的深入理解。 二、从网站运行的时间轴角度来理解两种反爬手段 1、加载HTML&#xff1a; 这是浏览器访问网站时的第一步&#xff0c;服务器会返回基础…

C#双向链表:只用泛型节点类ListNode<T>设计的最短的双向链表包含初始化链表数据和遍历链表各节点

目录 一、涉及到的知识点&#xff1a; 1.ListNode 类使用自动属性设计 2. 泛型节点类设计的误区 二、仅仅定义泛型节点类&#xff0c;实现最短的双向链表 一、涉及到的知识点&#xff1a; 1.ListNode 类使用自动属性设计 public class ListNode {public object Object { …

javascrip几种基本的设计模式

单例模式 ES5 function Duck1(name:string){this.namenamethis.instancenull }Duck1.prototype.getNamefunction(){console.log(this.name) }Duck1.getInstancefunction(name:string){if(!this.instance){this.instance new Duck1(name)} } const aDuck1.getInstance(a) const…

【系统架构设计师考试大纲】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱考试目标考试要求考试题目题型分析计算机基础知识&#xff08;20%&#xff09;信息化战略与规划&#xff08;9%&#xff09;软件工程&#xff08;25%&#xff09;系统架构设计&#xff08;35%&#xff09;信…

Qt在windows编译hiredis依赖库

目录 0 前言1 Qt安装遇到的问题2 hiredis源码下载2.0 redis源码下载2.1 hiredis源码下载2.2 编译hiredis源码2.3 遇到的问题列表参考资料0 前言 当前参与的项目需要用Qt对redis进行操作,以前没玩过这块,顺手记下笔记梳理起来~ 1 Qt安装 安装版本下载:https://download.qt…

算法D36 | 贪心算法5 | 435. 无重叠区间 763.划分字母区间 56. 合并区间

今天的三道题目&#xff0c;都算是 重叠区间 问题&#xff0c;大家可以好好感受一下。 都属于那种看起来好复杂&#xff0c;但一看贪心解法&#xff0c;惊呼&#xff1a;这么巧妙&#xff01; 还是属于那种&#xff0c;做过了也就会了&#xff0c;没做过就很难想出来。 不过大…

⭐北邮复试刷题2369. 检查数组是否存在有效划分__DP (力扣每日一题)

2369. 检查数组是否存在有效划分 给你一个下标从 0 开始的整数数组 nums &#xff0c;你必须将数组划分为一个或多个 连续 子数组。 如果获得的这些子数组中每个都能满足下述条件 之一 &#xff0c;则可以称其为数组的一种 有效 划分&#xff1a; 子数组 恰 由 2 个相等元素…

初学arp欺骗

首先准备一台靶机这里用虚拟机的win10 已知网关与ip地址&#xff08;怕误伤&#xff09; 现在返回kali从头开始 首先探测自己的网关 然后扫内网存活的ip 发现有3台 用nmap扫一下是哪几台 成功发现我们虚拟机的ip 现在虚拟机可以正常访问网络 接下来直接开梭 ip网关 返回虚拟机…

win11部署自己的privateGpt(2024-0304)

什么是privateGpt? privategpt开源项目地址 https://github.com/imartinez/privateGPT/tree/main 官方文档 https://docs.privategpt.dev/overview/welcome/welcome PrivateGPT是一个可投入生产的人工智能项目&#xff0c;利用大型语言模型&#xff08;LLMs&#xff09;的…

智能通用平台(Intelligent General-purpose Platform)

根据2024年的最新人工智能技术发展趋势&#xff0c;我为您提出的项目需求表如下&#xff1a; 项目名称&#xff1a;智能通用平台&#xff08;Intelligent General-purpose Platform&#xff09;项目概述&#xff1a;结合最新的生成式人工智能、多模态学习和量子计算技术&#…

Windows Docker 部署 Jenkins

一、简介 今天介绍一下在 Windows Docker 中部署 Jenkins 软件。在 Windows Docker 中&#xff0c;分为两种情况 Linux 容器和 Windows 容器。Linux 容器是通常大多数使用的方式&#xff0c;Windows 容器用于 CI/CD 依赖 Windows 环境的情况。 二、Linux 容器 Linux 容器内部…

Linux系统宝塔面板搭建Typecho博客并实现公网访问本地网站【内网穿透】

文章目录 前言1. 安装环境2. 下载Typecho3. 创建站点4. 访问Typecho5. 安装cpolar6. 远程访问Typecho7. 固定远程访问地址8. 配置typecho 前言 Typecho是由type和echo两个词合成的&#xff0c;来自于开发团队的头脑风暴。Typecho基于PHP5开发&#xff0c;支持多种数据库&#…

Vue.js中的diff算法:让虚拟DOM更高效

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

516. 最长回文子序列【leetcode】/动态规划

516. 最长回文子序列 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&#xff1a; 输入&#xff1a;s …

【2024.03.05】定时执行专家V7.1最新版GUI界面 - 基于wxWidgets 3.2.4 + CodeBlocks + GCC9.2.0

《定时执行专家》是一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件。软件具有 25 种【任务类型】、12 种【触发器】触发方式&#xff0c;并且全面支持界面化【Cron表达式】设置。软件采用多线程并发方式检测任务触发和任务执行&#xff0c;能够达到毫秒级的执行精…

Windows C++:深入理解Windows API:用户身份验证、访问令牌获取和权限管理

目录 CreateProcessAsUser介绍 函数原型 参数详解 返回值 使用注意 代码实例 代码解释&#xff1a; 注意事项&#xff1a; 用户身份验证和令牌管理 进程创建和管理 会话和桌面管理 权限和安全 用户身份验证、访问令牌获取和权限管理代码示例 步骤概述 注意事项…

【深度学习笔记】5_5 LeNet

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 5.5 卷积神经网络&#xff08;LeNet&#xff09; 在3.9节&#xff08;多层感知机的从零开始实现&#xff09;里我们构造了一个含单隐藏…

c# 连接oracle 及对应获取数据集

1、数据库配置xml&#xff0c;首先连接成功后会自动创建xml并保存到对应xml&#xff0c;如下 static string ConnPath AppDomain.CurrentDomain.BaseDirectory "ConnOrcle.xml"; 声明xml名称&#xff0c;便于后续写入对应数据库参数 2、创建xml /// <summar…

182基于matlab的半监督极限学习机进行聚类

基于matlab的半监督极限学习机进行聚类&#xff0c;基于流形正则化将 ELM 扩展用于半监督&#xff0c;三聚类结果可视化输出。程序已调通&#xff0c;可直接运行。 182matlab ELM 半监督学习 聚类 模式识别 (xiaohongshu.com)