需调用pxcook内置测量工具获取像素间距与尺寸:一、点击标尺图标或按ctrl+shift+m启用测量模式;二、悬停图层0.5秒显示宽高,单击锁定;三、拖拽测两点间距,shift限正交;四、alt悬停显对齐线及间距;五、文件→导出→测量标注(csv)存档数据。

如果您在使用PxCook进行UI设计稿测量时,需要精确获取图层间或元素间的像素间距与尺寸数值,则需调用其内置的测量工具。以下是实现该目标的具体操作步骤:
一、启用测量模式
PxCook默认处于选中/缩放模式,必须手动切换至测量模式才能触发距离与尺寸识别功能。该模式会自动检测鼠标悬停位置附近的图层边界,并实时显示数值。
1、打开PxCook并加载PSD或Sketch源文件。
2、在顶部工具栏中,点击标尺图标(Ruler),或按快捷键Ctrl+Shift+M(Windows)/Cmd+Shift+M(Mac)激活测量模式。
3、此时鼠标指针变为十字线样式,且界面右上角出现“测量中”提示。
二、单点尺寸测量
此方法适用于获取单个图层的宽高像素值,系统将自动识别当前选中图层的边界框尺寸。
1、确保测量模式已开启。
2、将鼠标悬停在目标图层上,不点击,等待约0.5秒。
3、当图层边缘出现蓝色高亮边框时,右侧信息面板即显示该图层的Width × Height 像素值。
4、若需锁定显示,可单击该图层,此时数值将固定在面板中且不随鼠标移动而消失。
三、两点间距测量
该方式用于量取任意两个图层之间或同一图层内两个锚点之间的直线距离,支持水平、垂直及斜向像素值读取。
1、保持测量模式开启状态。
2、将鼠标移至第一个参考点(如图层左上角),按住左键不放并拖动。
3、拖动过程中,会出现一条带刻度数字的虚线,实时显示当前长度(单位:px)。
4、松开鼠标于第二个目标点(如相邻图层右下角),虚线终点处弹出精确到小数点后一位的像素值。
5、若需仅获取水平或垂直距离,可在拖动起始后按住Shift键限制方向为正交。
四、多段对齐辅助测量
当需验证多个图层是否等距排列,或确认一组元素间的相对偏移关系时,可借助对齐参考线叠加比对。
1、进入测量模式后,按住Alt键(Windows)/Option键(Mac)。
2、将鼠标移至任一图层边缘,出现红色对齐线的同时,界面顶部状态栏显示“对齐:左/右/顶/底/中心”字样。
3、继续移动鼠标至另一图层对应边缘,两条红色线重合时,状态栏将显示“间距:XX px”。
4、若存在多个同向图层,依次悬停可连续查看各相邻对之间的独立间距数值。
五、导出测量标注数据
对于需存档或协作复核的测量结果,PxCook支持将当前画布所有已识别间距与尺寸生成结构化文本记录。
1、完成全部测量操作后,点击顶部菜单栏“文件 > 导出 > 测量标注(CSV)”。
2、在弹出窗口中勾选“包含坐标信息”与“导出所有图层尺寸”选项。
3、指定保存路径并确认,生成的CSV文件中每行含图层名、X/Y坐标、Width、Height及相邻图层Delta X / Delta Y 值。











