thinkphp手机网站开发,东莞市人才服务中心官网,北京seo全网营销,玩游戏的网页文章目录 引入实现效果思路声明通用的定位对象主进程模块渲染进程测试效果 引入
demo项目地址 窗口工具类系列文章#xff1a; 封装窗口工具类【1】雏形 封装窗口工具类【2】窗口组#xff0c;维护窗口关系 封装窗口工具类【3】控制窗口定向移动
很多时候#xff0c;我们想… 文章目录 引入实现效果思路声明通用的定位对象主进程模块渲染进程测试效果 引入
demo项目地址 窗口工具类系列文章 封装窗口工具类【1】雏形 封装窗口工具类【2】窗口组维护窗口关系 封装窗口工具类【3】控制窗口定向移动
很多时候我们想直接让某个窗口移动到边角例如居中、左上、右下等位置electron没有提供直接的api来实现这种操作我们不妨基于electron的位置移动api进行封装实现窗口灵活的定向移动
实现效果
输入key可以操作指定窗口不输入则操作本窗口可以直接根据position参数快速控制窗口定向移动输入偏移量微调窗口
思路
electron位置相关api
electron获取某个窗口所在屏幕的显示对象
首先electron的窗口位置也是有(x,y)坐标对应横轴和纵轴我们可以使用窗口移动api设置x和y左上角就是[0,0]然后我们可以通过screen.getDisplayMatching(rect)来获取窗口所在屏幕的展示对象从中可获取屏幕的长宽和xy等信息接着咱们直接用这两个数据做差即可
假如屏幕用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这里还补充了一个横纵轴的偏移量offsetXoffsetY用于需要微调定位的情况这里我们把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
templatediv classmockDemoGoBack/GoBackulliel-input v-modelwindowKey/el-input/liliel-form inlineel-form-item label距离左边距离el-input v-modelx/el-input/el-form-itemel-form-item label距离上边距离el-input v-modely/el-input/el-form-itemel-form-item label距离左边偏移量el-input v-modeloffsetX/el-input/el-form-itemel-form-item label距离上边偏移量el-input v-modeloffsetY/el-input/el-form-itemel-form-itemel-buttonclickchangeWindowPosition({x: Number.parseFloat(x),y: Number.parseFloat(y),offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})移动位置/el-button/el-form-item/el-form/liliel-buttonclickchangeWindowPosition({position: top-left,offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})左上/el-buttonel-buttonclickchangeWindowPosition({position: top-right,offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})右上/el-button/liliel-buttonclickchangeWindowPosition({position: center,offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})居中/el-button/liliel-buttonclickchangeWindowPosition({position: bottom-left,offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})左下/el-buttonel-buttonclickchangeWindowPosition({position: bottom-right,offsetX: Number.parseFloat(offsetX),offsetY: Number.parseFloat(offsetY),windowKey,})右下/el-button/li/ul/div
/templatescript setup langts
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();
/scriptstyle scoped
ul {list-style: none;
}
/style
测试效果
可以随心所欲的控制任何窗口到处定向移动了是不是很酷 _三└(┐卍 ˘ω˘)卍
输入key可以操作指定窗口不输入则操作本窗口可以直接根据position参数快速控制窗口定向移动输入偏移量微调窗口
