文章目录
- 引入
- 实现效果
- 思路
- 声明通用的定位对象
- 主进程模块
- 渲染进程
- 测试效果
引入
demo项目地址
窗口工具类系列文章：
封装窗口工具类【1】雏形
封装窗口工具类【2】窗口组，维护窗口关系
很多时候，我们想直接让某个窗口移动到边角，例如居中、左上、右下等位置，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
声明通用的定位对象
- 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参数快速控制窗口定向移动
- 输入偏移量微调窗口
