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

引入

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

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

实现效果

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

思路

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
1
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

主进程模块

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;
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

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);
  }   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

渲染进程

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

• src\utils\electronUtils.ts

/**
 * 修改当前窗口的位置
 * @param windowPosition 窗口位置修改参数
 */
export function changeWindowPosition(windowPosition: IWindowPosition) {
  ipcRenderer.invoke(CustomChannel.window_position_change, windowPosition);
}
1
2
3
4
5
6
7

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

测试效果

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

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