在线尺子

别再靠猜测来判断屏幕上物体的大小和角度了!在线尺子 是一款专业的工具,旨在将您的屏幕变成真实的物理度量参考。

🎉 v2.2.0 更新:网页尺子键盘操作与像素级微调支持。

在线尺子

在屏幕上测量现实世界的尺寸

使用在线尺子,以厘米、毫米或英寸为单位测量屏幕上的长度。通过已知尺寸的参照物进行校准,即可实现精确的 1:1 测量。

立即在线体验 →

在线量角器

使用虚拟量角器测量角度

将在线量角器放置在图片、图表或设计稿中的角度上方。将量角器的中心对准角的顶点,即可通过刻度读取角度——无需安装任何扩展程序。

立即在线体验 →

三点式角度测量工具

利用两个可调节臂测量角度

确定顶点位置,然后拖动两个臂,使其与角的两条边对齐。该工具会自动计算出它们之间的角度,让您能够更轻松地测量图像、图表及设计稿中各种不规则的角度。

立即在线体验 →
在线尺子

核心功能

✨

物理级别校准

通过信用卡、A4纸或硬币等标准实物进行对齐校准,自动计算屏幕精准 PPI。支持 +/- 按钮进行 1 像素级的微调。

📏

三大测量工具

屏幕尺子:支持公制与英制刻度,可在页面中测量长度、间距与元素尺寸。
标准量角器:支持在任意网页添加半透明量角器,基于 PPI 校准数据渲染真实物理尺寸,可 360° 自由旋转。
三点式动态量角器:通过一个顶点和两个动态端点测量任意夹角,支持实时角度显示、测量臂延长、半透明扇形区域、颜色切换与扇形透明度调节。

⌨️

键盘像素微调与焦点切换

精准位移:点击选中网页尺子后,支持通过方向键以 1 像素步进微调位置,按住 Shift + 方向键以 10 像素步进移动,消除鼠标拖拽抖动。
多尺切换:多尺并存时,尺子获焦后按 Tab 或 Shift + Tab 即可循环切换当前控制的尺子。

🧩

多工具并存

支持在同一页面添加多把尺子、标准量角器或三点式动态量角器,满足复杂的对比测量与几何定位需求。

📏

双模式测量

独立窗口模式:打开一个干净、置顶的尺子窗口,支持自由缩放和横竖切换。
页面注入模式:在任意网页上浮动显示尺子或量角器,支持透明度调节。

🔄

旋转、吸附与角度对齐

摆脱横竖限制,通过旋转手柄实时调整角度。尺子与标准量角器支持 45°/90° 等关键角度吸附,并提供实时数值显示。
三点式量角器的每条臂也支持按 45° 整数倍方向独立吸附,便于快速对齐网页中的水平、垂直与斜向边缘。

📐

尺子零点偏移与归零

模拟实体尺子的前端保护端,允许设置自定义起始空白。提供一键“归零”功能,快速恢复基准测量。

🎨

材质、颜色与透明度

尺子支持木质、塑料、金属等多种材质。使用 SVG 动态纹理滤镜生成,兼顾专业感与阅读舒适度。塑料材质支持多种颜色切换。
量角器与三点式量角器支持多种半透明颜色方案,确保在不同网页背景下都清晰可见。
三点式量角器支持单独调节扇形区域透明度,线条、端点与中心点保持清晰。

📏

全能刻度支持

公制:厘米 (CM) 与 毫米 (MM) 刻度。
英制:英寸 (Inch),细分至 1/16 英寸的高精度刻度。

🔄

自由交互逻辑

全边缘缩放:在注入模式下,拖拽尺子末端的任何位置即可调整长度。
精准协作:鼠标拖拽与键盘方向键像素级微调无缝协作。
实时同步:Popup 设置、材质/颜色切换、偏移量等改动会即时应用。

💾

隐私与本地存储

所有校准数据(PPI、单位偏好、偏移量)均保存在本地浏览器中,不上传任何数据。

使用指南与技巧

界面预览

在线尺子使用教程 - 第一步
在线尺子使用教程 - 第二步
在线尺子使用教程 - 第三步
在线尺子使用教程 - 第四步
在线尺子使用教程 - 第五步

使用方法

1

首次使用

点击插件图标,进入“校准模式”。

2

对齐校准

选择一个参考物(如信用卡),将实物贴在屏幕上,调整滑块使屏幕红框与实物完全重合。

3

开始测量

点击“在当前页添加尺子”或“添加量角器”开始使用。

4

切换样式

点击尺子/量角器工具栏上的图标,可快速切换材质、颜色或调整透明度。

5

调整位置与角度

拖拽主体移动位置,拖拽旋转手柄调整角度。

常见问题

基础入门

安装后怎么打开 在线尺子?

点击浏览器右上角的拼图图标 🧩,找到“在线尺子”并点击旁边的图钉图标将其固定到工具栏。之后点击图标即可随时调出尺子。

这个插件真的能把屏幕变成真正的尺子吗?和普通尺子一样准吗?

是的。由于不同电脑屏幕的分辨率不同,普通的显示图片是不准的。但本插件通过“物理校准”技术,让您用信用卡或 A4 纸比对一次,它就能记住您屏幕的实际尺寸,从而实现 1:1 的精确测量。

我没有信用卡,还能校准吗?

可以。系统支持多种参考物,您可以使用 A4 纸或硬币进行对齐校准。未来我们还会增加更多参考标准,如 A5 纸或常见手机屏幕尺寸。

使用操作

“独立窗口”和“页面注入”这两种模式有什么区别?

“独立窗口”会弹出一个干净的尺子小窗口,您可以把它拖到屏幕任何地方,甚至叠在其他软件上面看;“页面注入”则是把尺子“贴”在当前的网页上,它支持透明度调节,不会遮挡您阅读网页内容。

我可以在同一个页面添加多把尺子吗?

可以!在 v2.0.0 版本中,我们支持多尺子与量角器并存。您可以多次点击“在当前页添加尺子”或“添加量角器”,每一个工具都可以独立移动、旋转、缩放和设置材质/颜色,非常适合对比测量与几何定位。

怎么更换尺子的材质和颜色?

您可以在尺子末端的工具栏或插件 Popup 菜单中找到材质切换选项。目前支持木质、塑料和金属材质。选择“塑料”材质后,您还可以切换不同的清新配色以适配网页背景。

我想量一个有边框的物体,尺子最前端挡住了怎么办?

您可以使用“尺子零点偏移”功能。它能模拟实体尺子的前端保护端,让您设置一段起始空白(毫米级),并支持一键“归零”恢复原状。

这把尺子怎么拉长或缩短?

非常简单。在网页模式下,您不需要寻找细小的角落,直接拖拽尺子末端的任何位置都可以随意调整长度。

我可以旋转尺子来测量斜向或倾斜的物体吗?

可以!只需拖动尺子末端的旋转抓手即可。它还支持 45°、90° 和 180° 的精准吸附,方便快速调整。

除了直尺,我现在可以添加量角器吗?

可以!在 v2.0.0 版本中,我们新增了“全能量角器”功能。您可以通过点击“添加量角器”在页面中插入一个 1:1 精确的量角器。它同样支持 360° 旋转、多种配色切换以及基于物理校准的 PPI 同步。

量角器有哪些特殊功能?

全能量角器不仅支持基于 PPI 的尺寸同步校准,还支持 360° 自由旋转和多种半透明颜色方案(如经典蓝、科技绿等),方便在各种网页背景下使用。

什么是三点式动态量角器?它和标准量角器有什么区别?

三点式动态量角器是通过一个顶点和两个端点来测量夹角的。与标准量角器相比,它不需要对齐刻度,而是通过直接拖动三个控制点来匹配网页上的元素。它特别适合测量非标准夹角、设计稿边缘或图片中的几何角度。

三点式动态量角器的测量臂可以增长吗?

可以。您可以直接拖动两个端点,测量臂会随之无限延长,非常适合测量跨度较大的网页元素、长斜线或复杂的几何图形。

我可以调整三点式量角器中间扇形区域的透明度吗?

可以。三点式量角器支持单独调节中间扇形区域的透明度。这样您既能直观地看到当前的测量范围,又不会因为扇形遮挡而看不清底部的网页文字或细节。

设置与数据

我换了一个网页,校准好的数据会丢失吗?

不会。您的校准数据(如 PPI)、单位偏好和偏移量都会实时同步并保存。无论您是在 Popup 菜单里改动,还是切换页面,设置都会即时应用。

它支持英寸吗?我想买国外的衣服/零件。

支持。本插件提供公制(厘米 CM、毫米 MM)和英制(英寸 Inch)双重刻度,英制高精度可细分至 1/16 英寸。

安全与隐私

它会读取我的网页浏览记录或个人隐私吗?

不会。所有校准数据和偏好设置均保存在您的本地浏览器中,绝不上传任何数据到服务器,您可以放心使用。

这些材质纹理是真的吗?会不会很卡?

所有的材质(木质、塑料、金属)均使用 SVG 技术动态生成的拟真效果,既美观清晰,又非常轻量化,完全不会拖慢您的网页速度。

更新记录

开源

本扩展程序已开源,代码托管于 GitHub。欢迎社区贡献代码!

前往 GitHub 查看源码

打造您的工具箱

查看我开发的更多 Chrome 效率工具。

🚀
浏览更多插件