无需登录 数据私有 本地保存

屏幕标尺量角器 - 叠加元素测量长宽角度

10
0
0
0
坐标: — , — | 尺寸: — × —
W: 320 px
H: 240 px
∠ 45.0°
使用说明
  • 拖动测量框：鼠标按住框体中间区域即可拖动，测量屏幕上任意元素。
  • 调整大小：拖动四角或四边的圆形手柄来改变测量框的宽高。
  • 标尺读数：框体上方和左侧有像素标尺，精确到1px刻度。
  • 角度测量：两条从中心发出的射线，拖动末端圆点旋转，夹角实时显示。
  • 锁定参考线：将角度参考线锁定在水平0°方向，便于测量相对角度。
  • 复制尺寸：一键复制当前宽高数据到剪贴板。
  • 网格背景：可切换明暗网格，方便在不同背景下观察标尺。
  • 移动端适配：支持触摸拖动，手柄在移动端自动放大便于手指操作。
常见问题
本工具的标尺精度为1像素(px)，标尺刻度细化到1px级别。每5px有一个中等刻度，每10px有一个长刻度并标注数字。测量框的宽高数值实时精确到整数像素。角度测量精确到小数点后1位（0.1°）。需要注意的是，测量精度依赖于屏幕的物理像素密度（DPI），在标准96 DPI屏幕上1px对应实际约0.26mm。
使用步骤：① 将测量框拖动到目标元素上方；② 拖动四角手柄调整框的大小，使框的边缘与元素边缘对齐；③ 框中央会实时显示宽度(W)和高度(H)的像素值。标尺刻度在框的上边缘和左边缘，可以帮助你精确定位。提示：可以使用网格背景（20px间距）辅助对齐。
量角器从测量框的中心点发出两条射线。拖动每条射线末端的圆形手柄可以旋转射线。两条射线之间的夹角（取较小的角，范围0°~180°）实时显示在框中央。默认蓝色线为参考线（可锁定在水平0°），橙色线为测量线。角度弧线直观展示夹角范围，精确到0.1°。
可以。本工具完全支持触摸操作，在手机和平板上均可使用。移动端会自动放大拖动手柄（从14px增大到22px），方便手指精确操作。测量画布支持触摸拖动、双指缩放等手势。在较小屏幕上，标尺和刻度会自动调整大小以保持清晰可读。
屏幕标尺测量的是CSS像素，而非物理长度（毫米/英寸）。CSS像素与物理尺寸的对应关系取决于屏幕的DPI设置。在标准96 DPI下，1 CSS像素约等于0.26mm。对于UI设计和网页开发来说，像素测量是最实用的，因为所有网页元素的尺寸都以CSS像素为单位。如果需要物理尺寸测量，建议使用专门的硬件工具或已知DPI的参考物进行校准。
提高精度的小技巧：① 利用20px间距的网格背景辅助对齐边缘；② 先粗调位置，再用边手柄微调单个维度；③ 观察标尺刻度确认边缘对齐情况；④ 使用角手柄可同时调整宽高；⑤ 测量框中心有十字准线标记，帮助精确定位目标元素的中心点。
相关知识点
📐 CSS像素 vs 设备像素

CSS像素是网页布局的基本单位，与设备物理像素不同。在Retina屏幕上，1个CSS像素可能对应2×2或更多的物理像素。本工具测量的是CSS像素。

📏 标尺刻度设计原理

标尺采用三级刻度系统：长刻度(10px)+数字、中刻度(5px)、短刻度(1px)。这种设计模仿真实尺子，让读数快速而准确，减少视觉疲劳。

📐 角度测量：反正切函数

角度计算使用atan2(y, x)函数，它根据坐标差值返回弧度值，再转换为角度。atan2能正确处理四个象限，比atan更稳定可靠。

🔧 相关工具