Electron Screen API 知识点

目录

• . 概述
• . 主要概念
• . 事件
• . 方法
• . Display 对象
• . Point 与 Rectangle
• . 实际使用示例
• . 坐标程序
• . 网站差异与注意事项
• 常用方法 & 常见错误回避
• 再看速查表。方法与事件

概述

screen 模块作用

在 Electron 中，screen 模块用来：

• 获取所有显示器信息并支持多显示器布局。
• 监听硬件变化。
• 获取鼠标当前位置，以便在窗口间移动时保持连贯体验。
• 帮助实现跨网站的一致窗口定位与尺寸计算。

User Pain Point: 开发者往往在不同程序下发现同一段代码行为不一致，特别是 DPI 缩放导致窗口出现模糊或偏移。

引入方式

const { screen } = require;// 在主进程中使用
// 渲染进程请使用 window.require 或 preload script
// 避免与浏览器内置的 window.screen 冲突
}
}

主要概念

Display对象结构示例

{
至于id。number,label: string,bounds: Rectangle,workArea: Rectangle,size: { width: number,height: number },workAreaSize: { width: number,height: number },scaleFactor: number,rotation: number,touchSupport?: 'available' | 'none',internal?: boolean,primary?老实说，: boolean
}
}
}

User Pain Point: 很多开发者不了解bounds vs workArea 的区别： bounds 是屏幕整体尺寸。包括任务栏，workArea 则去除了程序 UI，可直接用于窗口布局。

坐标系说明表格

物理像素 vs DIP 点对比图示

A 使用者常遇到的问题是：在高 DPI 显示器上手写坐标为 时看起来被拉伸到。这是因为代码默认使用 DIP 坐标，而程序会自动映射到物理像素。 若要精确控制，需要显式转换。

事件监听 & 使用者痛点方法

显卡/外接显示器连接/断开通知示例：

const { screen } = require;

screen.on => { console.log;话说回来，console.log;})，话说回来，

screen.on => { console.log;})，

User Pain Point: 在 Windows 上监听到 “display-added” 后有时会出现已连接但未立即可用的问题。建议在添加后再延迟一两秒重新调用 screen.getAllDisplays 来确保数据完整。

配置变更监听示例：

screen.on => {
console.log}):`,display.id);if){
// 在 DPI 改变时重绘 UI 或调整字体
}
});

User Pain Point: 在 macOS 上切换外接 Retina 显示后一些项目会出现模糊，需要手动更新 CSS 的 @media queries 或重新渲染 Web 内容。

Méthodes de base pour travailler avec les écrans et les fenêtres dans Electron 

Note下面展示常用方法与代码片段：

• getCursorScreenPoint – 获取鼠标当前位置。
• getPrimaryDisplay – 获取主显示器信息。
• getAllDisplays – 返回所有 Display 对象。其实，
• getDisplayNearestPoint – 根据点获取最近的 Display。其实，
• getDisplayMatching – 根据矩形匹配 Display。
• screenToDipPoint – 物理 → DIP。
• dipToScreenPoint – DIP →物理。
• screenToDipRect / dipToScreenRect – 矩形转换。

实际使用案例

创建全屏窗口