ShareX屏幕标尺工具怎么用?像素级精准测量截图尺寸
很多用户不知道 ShareX 不仅是截图工具,还内置了 屏幕标尺、屏幕取色器、屏幕放大镜 等设计辅助功能。其中屏幕标尺特别适合设计师、前端开发者、UI 工程师使用,能在截图中精确测量像素距离、角度和尺寸。
本文详细讲解 ShareX 屏幕标尺的所有功能和使用技巧。
一、屏幕标尺的开启方法
1.1 通过截图工具栏打开
- 启动 ShareX
- 使用任意截图快捷键(如
Print Screen)触发截图 - 在截图工具栏中找到 标尺 图标(一个带刻度的尺子图案)
- 点击即可启用屏幕标尺功能
1.2 通过任务设置自定义
如果想用独立快捷键调用屏幕标尺:
- ShareX 主界面 → 任务设置 → 屏幕标尺
- 选择一个未被占用的快捷键(如
Ctrl + Shift + R) - 点击 确定 保存
- 之后按设置的快捷键即可随时调出标尺
1.3 屏幕标尺的两种模式
| 模式 | 用途 | 操作 |
|---|---|---|
| 单点测量 | 鼠标位置坐标显示 | 移动鼠标查看坐标 |
| 两点测量 | 测量距离、矩形、角度 | 鼠标拖拽起止点 |
二、屏幕标尺的核心功能详解
2.1 像素坐标显示
启用屏幕标尺后,鼠标所在的屏幕坐标会实时显示:
- X 坐标:距离屏幕左边缘的像素数
- Y 坐标:距离屏幕顶部的像素数
- 单位:默认像素(px),可切换为其他单位
对于需要精确定位某个元素位置的前端开发者非常有用。
2.2 距离和尺寸测量
按住鼠标左键拖拽,可以测量两点之间的:
- 水平距离(X 轴方向)
- 垂直距离(Y 轴方向)
- 直线距离(勾股定理计算)
- 矩形面积(测量矩形区域时显示)
测量结果会实时显示在屏幕上,方便对照目标尺寸。
2.3 角度测量
按住 Shift 键拖拽,标尺会自动测量两点与水平线之间的夹角:
- 显示度数(°)
- 显示弧度(rad)
- 可以测量图标倾斜角度、UI 元素旋转角度等
2.4 矩形框选测量
按住 Ctrl 键拖拽,可以拉出一个矩形选区,标尺会显示:
- 矩形的宽度和高度
- 矩形的面积(像素²)
- 矩形的对角线长度
适合测量 UI 元素的具体尺寸。
三、屏幕标尺的单位切换
ShareX 屏幕标尺支持多种单位:
| 单位 | 符号 | 适用场景 |
|---|---|---|
| 像素 | px | 默认单位,截图测量 |
| 厘米 | cm | 打印设计、屏幕物理尺寸 |
| 英寸 | inch | 显示器 PPI 估算 |
| 百分比 | % | 相对于屏幕分辨率 |
| 点 | pt | 字体设计 |
3.1 切换单位的方法
- 启用屏幕标尺后右键
- 在右键菜单中选择 单位
- 选择需要的单位
3.2 实际应用场景
场景 A:测量屏幕元素的真实物理尺寸
设置单位为 cm,假设屏幕 DPI 为 96,则:
- 100 px = 100/96 ≈ 1.04 cm
场景 B:计算图标在屏幕上的占比
设置单位为 %,假设屏幕分辨率为 1920×1080,则:
- 100 px 高度 = 100/1080 ≈ 9.26%
四、屏幕标尺的实用快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + C |
复制当前测量值 |
Shift + 拖拽 |
测量角度 |
Ctrl + 拖拽 |
测量矩形 |
Esc |
退出屏幕标尺 |
方向键 |
微调测量点位置(1 像素) |
Shift + 方向键 |
微调测量点位置(10 像素) |
Ctrl + Z |
撤销上一次测量 |
注意:以上快捷键在 ShareX 屏幕标尺激活状态下生效。
五、屏幕标尺与其他功能的联动
5.1 标尺 + 截图
- 启用屏幕标尺
- 测量到目标尺寸
- 使用矩形截图工具,参考测量结果精确框选
5.2 标尺 + 取色器
- 启用屏幕标尺定位某个 UI 元素
- 切换到取色器工具
- 在该元素上采样颜色
5.3 标尺 + 放大镜
- 启用屏幕标尺
- 同时打开放大镜(默认开启)
- 可以同时看坐标和像素细节
六、不同用户的使用场景
6.1 前端开发者
| 用途 | 操作 |
|---|---|
| 测量 DOM 元素尺寸 | 用矩形工具框选元素 |
| 对比设计稿 | 测量设计稿像素与实现像素的差异 |
| 检查图标大小 | 测量单个图标的边距和尺寸 |
| 定位 bug 位置 | 用坐标显示定位 UI 异常区域 |
6.2 设计师
| 用途 | 操作 |
|---|---|
| 测量真实物理尺寸 | 切换单位为 cm |
| 检查图标角度 | 用 Shift 键测角度 |
| 验证设计稿规范 | 批量测量间距和边距 |
| 检查图标对齐 | 用坐标对比不同图标的位置 |
6.3 测试工程师
| 用途 | 操作 |
|---|---|
| 报告 bug 位置 | 用坐标精确描述元素位置 |
| 测量界面元素间距 | 用矩形工具框选 |
| 验证响应式布局 | 在不同分辨率下测量 |
| 检查动画位移距离 | 用两点距离工具 |
6.4 普通用户
| 用途 | 操作 |
|---|---|
| 测量屏幕物理尺寸 | 切换单位为 cm/inch |
| 估算图片打印大小 | 用矩形工具框选图片 |
| 检查像素密度 | 用坐标对比物理尺寸 |
七、屏幕标尺的高级设置
7.1 校准屏幕 DPI
如果测量结果显示的物理尺寸不准确,可能需要校准屏幕 DPI:
- 打开 ShareX 主界面 → 任务设置 → 屏幕标尺
- 设置 像素每英寸 (PPI) 值
- 标准显示器 PPI 一般为 96,Retina 屏幕为 192,4K 显示器为 160+
7.2 标尺样式自定义
- 任务设置 → 屏幕标尺 → 外观
- 可调整:
- 标尺线条颜色
- 文字标签颜色
- 线宽
- 显示精度(小数位数)
7.3 透明度设置
如果觉得标尺遮挡视线:
- 设置 → 屏幕标尺 → 透明度
- 调整到 30-50%,既能看清测量值,又不遮挡屏幕内容
八、屏幕标尺的局限性
| 局限 | 解决方案 |
|---|---|
| 只能测量屏幕上看到的内容 | 用截图工具截屏后用第三方软件测量 |
| 多显示器需要分别校准 | 在每台显示器上单独设置 PPI |
| 高 DPI 屏幕测量有误差 | 手动校准 PPI |
| 不能保存测量结果 | 复制粘贴到笔记工具 |
九、与其他测量工具的对比
| 工具 | 价格 | 功能 | 推荐度 |
|---|---|---|---|
| ShareX 屏幕标尺 | 免费 | 基础测量 + 颜色 + 截图 | ★★★★ |
| Pixlr Measure | 免费 | 专业测量工具 | ★★★ |
| PixelSnap | 付费 | 设计师专用 | ★★★★ |
| Windows 屏幕截图工具 | 免费 | 截图为主 | ★★ |
ShareX 的屏幕标尺虽然没有专业测量工具功能全面,但作为内置功能已经够用,且与截图功能无缝集成。
十、常见问题 FAQ
Q1:屏幕标尺显示的坐标和实际不符? A:检查显示器缩放设置。如果显示器缩放设置为 150%,实际坐标需要 × 1.5。
Q2:怎么测量某个不可点击的元素? A:先用截图工具截屏,然后用第三方软件打开图片测量,或临时禁用元素拦截层。
Q3:屏幕标尺能不能保存为图片? A:测量过程不能直接保存。可以截图后用第三方标注工具补充测量线。
Q4:高 DPI 屏幕(4K、Retina)测量不准? A:在任务设置中校准 PPI 值,或使用「百分比」单位避免物理尺寸误差。
Q5:屏幕标尺占用 CPU 高吗? A:极低,ShareX 的标尺工具几乎没有性能开销。
十一、实用技巧汇总
11.1 快速测量一个矩形区域
- 启用屏幕标尺
- 按住 Ctrl 键
- 拖拽鼠标框选目标区域
- 屏幕显示矩形宽、高、对角线、面积
11.2 测量图标倾斜角度
- 启用屏幕标尺
- 按住 Shift 键
- 沿着图标倾斜方向画一条线
- 屏幕显示角度值
11.3 测量两个元素的距离
- 启用屏幕标尺
- 在第一个元素边缘按下鼠标
- 拖拽到第二个元素边缘
- 屏幕显示水平、垂直、直线距离
十二、总结
ShareX 的屏幕标尺是常被低估的内置功能,对于需要频繁测量屏幕像素距离的用户来说,是完全免费且高效的解决方案。核心使用技巧:
- 矩形测量用 Ctrl + 拖拽
- 角度测量用 Shift + 拖拽
- 精确微调用方向键
- 跨屏幕测量用百分比单位
- 高 DPI 屏幕记得校准 PPI
掌握这些技巧后,日常设计、开发、测试中的尺寸测量问题都能快速解决。建议把屏幕标尺快捷键设为容易按到的组合(如 Ctrl + Shift + R),日常工作中随时调用。
这篇教程有帮助吗?立即下载ShareX 中文下载站试试吧!
全平台支持 · 安全无毒 · 官方最新版