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

news2024/11/16 2:57:25

文章目录

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

引入

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

很多时候,我们想直接让某个窗口移动到边角,例如居中、左上、右下等位置,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.coloradmin.cn/o/1487445.html

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

相关文章

MySQL之索引详解

华子目录 索引概述优缺点 索引的原理索引的设计原则索引结构B-tree&#xff08;多路平衡查找树&#xff09;BtreeHash 为什么InnoDB存储引擎选择Btree&#xff1f;索引分类聚集索引选取规则 单列索引和多列索引前缀索引创建索引1.创建表时创建索引2.在已经存在的表上创建索引3.…

funasr VAD语音端点检测;sherpa VAD+STT识别

1、VAD 语音端点检测(funasr) Voice Activity Detection 语音活性检测(VAD)也被称为语音端点检测,基本原理是判断一个区间内的音频(区间被称为一个“语音帧”),是有效语音,还是无效语音。通过连续的检测多帧,就能判断出语音的“开头”(从无效到有效)和“结尾”(从…

【springboot】乡镇卫生院、二甲医院云HIS运维平台源码

目录 云HIS运营管理 ​编辑电子病历主模块&#xff1a;包括门诊电子病历、住院电子病历等子模块 &#xff08;1&#xff09;门诊电子病历功能简介 &#xff08;2&#xff09;住院电子病历功能简介 ▶患者列表主模块&#xff1a;包括患者信息子模块 &#xff08;1&#xf…

熔断降级 spring事务

如果有事务处理&#xff0c;会先把事务的自动提交给关闭

《一》在Vue中搭建Three.js环境(超详细、保姆级),创建场景、相机、渲染器

目录 Three.js简介创建vue项目引入Three.js实际操作环节文件目录创建初始化场景、相机 Three.js简介 Three.js 是一款基于 WebGL的 JavaScript 3D 库&#xff0c;它封装了 WebGL API&#xff0c;为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了…

青岛琛蓝健康集团正式发布多项科研合作项目

青岛琛蓝健康集团正式发布多项科研合作项目 科技创新是推动琛蓝健康产业集团持续发展的原动力。 一直以来&#xff0c;琛蓝健康集团高度重视科研合作&#xff0c;与众多专家团队和科研机构达成战略合作关系&#xff0c;深入实施产学研合作模式&#xff0c;成立多个协同创新中心…

经典思路!人参叶际微生物如何发8分文章?

中国中医科学院中药研究所在《Environmental Microbiome》期刊上(IF7.9)发表了关于叶际真菌微生态网络的文章&#xff0c;该研究通过对ITS测序结果和环境因子测定结果以及皂苷含量测定结果进行生信分析&#xff0c;提出了维持微生态网络的稳定性策略和影响皂苷含量的因素。 期刊…

【推荐算法系列十七】:GBDT+LR 排序算法

排序算法经典中的经典 参考 推荐系统之GBDTLR 极客时间 手把手带你搭建推荐系统 课程 逻辑回归&#xff08;LR&#xff09;模型 逻辑回归&#xff08;LR,Logistic Regression&#xff09;是一种传统机器学习分类模型&#xff0c;也是一种比较重要的非线性回归模型&#xff…

2024年短剧项目怎么做?教你搭建自己的短剧及cps分销平台app小程序

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、短剧系统 二、短剧cps分销平台 三、海外短剧系统 总结 前言 短剧系统分为三种&#xff1a; 短剧系统、短剧cps分销平台、海外短剧系统。今天简单介绍…

【C语言】剖析qsort函数的实现原理

主页&#xff1a;17_Kevin-CSDN博客 专栏&#xff1a;《C语言》 本文将从回调函数&#xff0c;qsort函数的应用&#xff0c;qsort函数的实现原理三个方面进行讲解&#xff0c;请自行跳转至相对位置进行阅读~ 目录 回调函数 qsort函数的应用 qsort函数实现原理 回调函数 什…

【推荐】免费AI论文写作神器-「智元兔 AI」

还在为写论文焦虑&#xff1f;免费AI写作大师来帮你三步搞定&#xff01; 智元兔AI是ChatGPT的人工智能助手&#xff0c;并且具有出色的论文写作能力。它能够根据用户提供的题目或要求&#xff0c;自动生成高质量的论文。 不论是论文、毕业论文、散文、科普文章、新闻稿件&…

远程控制从未如此简单

在这个科技日新月异的时代&#xff0c;我们的生活被各种手机软件所包围。几乎每个人都有一个甚至多个手机&#xff0c;你是否也有遇到过需要远程操作自己某一台手机的场景呢&#xff1f;今天&#xff0c;我要向大家推荐一款神奇的手机远程操作神器&#xff0c;让你可以随时随地…

网络学习:MPLS技术基础知识

目录 一、MPLS技术产生背景 二、MPLS网络组成&#xff08;基本概念&#xff09; 1、MPLS技术简介&#xff1a;Multiprotocol Lable Switching&#xff0c;多协议标签交换技术 2、MPLS网络组成 三、MPLS的优势 四、MPLS的实际应用 一、MPLS技术产生背景 1、IP采用最长掩码…

故障诊断 | 一文解决,XGBoost极限梯度提升树的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | 一文解决,XGBoost极限梯度提升树的故障诊断(Matlab) 模型描述 XGBoost通过集成多个决策树来建立一个强大的预测模型。它采用了一种特殊的梯度提升技术,称为极限梯度提升(Extreme Gradient Boosting),以提高模型的性能和鲁棒性。 极限梯度…

亚马逊Revie的作用有哪些?

Review在亚马逊的重要性不言而喻&#xff0c;好的Review可以给潜在的顾客以购买的信心&#xff0c;很多的卖家都会通过测评&#xff0c;来增加商品的Review来美化商品&#xff0c;进而带来更多的曝光量和流量&#xff0c;产生更多的订单&#xff0c;所以&#xff0c;对于任何一…

【anget应用入门】coze国际版agent应用discord快速部署及使用

1、coze agent配置 1.1 coze介绍 概述 Coze 是新一代一站式AI Bot开发平台&#x1f680;。无论你是否有编程基础&#xff0c;都可以在 Coze 平台上快速搭建基于 AI 模型的各类问答 Bot&#xff0c;从解决简单的问答到处理复杂逻辑的对话。你可以将搭建的 Bot 发布到各类社交…

Vue3:使用 Composition API 不需要 Pinia

在 Vue.js 开发的动态环境中&#xff0c;在单个组件中处理复杂的业务逻辑可能会导致笨重的文件和维护噩梦。虽然 Pinia 提供集中式状态管理&#xff0c;但仅依赖它来处理复杂的业务逻辑可能会导致代码混乱。本文探讨了使用 Composition API 的替代方法&#xff0c;说明开发人员…

2024高频前端面试题 JavaScript 和 ES6 篇

HTML和CSS篇&#xff1a; 2024高频前端面试题 HTML 和 CSS 篇-CSDN博客 一. JavaScript篇 1. 数据类型有哪些 1) 基本数据类型 数值(Number)、字符串(String)、布尔值(Boolean)、Undefined、Null、Symbol、BigInt 2) 引用数据类型 对象(Object)、数组(Array)、函数(Funct…

给孩子买台灯注意什么?多款热门护眼台灯测评体验总结

现在的青少年很多都是存在视力问题的&#xff0c;而大多数的原因都是因为长时间的用眼和不合适的光源环境导致的&#xff0c;因此家长们为了娃的眼睛健康&#xff0c;基本都会入手护眼台灯。不过市面上台灯种类繁杂&#xff0c;其中还包括了不专业的产品&#xff0c;这类台灯往…

机器学习周报第31周

目录 一、论文阅读1.1 论文标题1.2 论文摘要1.3 论文背景1.4 提出的系统&#xff1a;MAER1.4.1 基于Asyncio的预处理1.4.2 多模态信号下的情感识别1.4.3 针对情感不匹配情况的自适应融合 一、论文阅读 1.1 论文标题 Beyond superficial emotion recognition: Modality-adapti…