pxcook中获取圆角半径需通过图层属性面板查看、测量工具推算、导出json解析或切换源文件格式重载解析四种方法。

如果您在使用PxCook进行UI设计稿测量时,需要获取某个元素的圆角半径值(即CSS中的border-radius),但发现软件未直接显示该参数,则可能是由于图层未正确识别为带圆角的形状或未启用样式读取功能。以下是获取圆角值的具体操作方法:
一、通过图层属性面板查看圆角值
PxCook会自动解析Sketch或Photoshop源文件中图层的矢量路径与样式属性,若该图层为矩形并设置了圆角,其border-radius数值通常以像素形式显示在右侧属性面板中。
1、在PxCook左侧图层面板中,单击目标圆角矩形图层(确保其为独立形状图层,非栅格化图像)。
2、观察右侧“属性”面板,查找“圆角”或“CornerRadius”字段,其后跟随的数值即为该图层统一设置的圆角半径(单位:px)。
3、若图层为不等角矩形(如左上/右下圆角不同),PxCook可能显示为四个数值(如“8, 4, 6, 2”),此时需按“左上、右上、右下、左下”顺序对应解读。
二、通过测量工具辅助推算圆角半径
当图层被合并、栅格化或PxCook未能识别原始圆角属性时,可借助内置测量工具结合视觉参考反向估算圆角大小。
1、选择顶部工具栏中的“测量”工具(快捷键M),将光标悬停于圆角区域边缘。
2、沿圆角弧线边缘拖动测量线,使起点与终点分别落在水平与垂直相邻边的交点延长线上。
3、观察测量结果中出现的直角三角形斜边提示及邻边差值,该差值即近似等于圆角半径(适用于标准四分之一圆弧)。
三、导出为JSON并解析样式数据
PxCook支持将当前画板导出为结构化JSON文件,其中包含图层的完整样式描述,border-radius作为关键样式字段被保留。
1、点击右上角菜单按钮,选择“导出 → 导出为JSON”,保存文件至本地。
2、用文本编辑器打开该JSON文件,搜索目标图层名称或ID,定位到“style.borderRadius”或“cornerRadius”键名。
3、其对应值即为原始设计稿中设置的圆角数值,支持单值(如8)、双值(如"8 / 4")或四值数组格式。
四、切换设计源文件格式重载解析
某些PSD文件因图层混合模式或智能对象嵌套导致圆角信息丢失;Sketch文件若使用Symbol嵌套过深也可能影响属性读取。更换源文件格式可触发更完整的样式解析流程。
1、在Sketch中选中圆角图层,执行“Layer → Convert to Outlines”,消除文字或矢量蒙版干扰。
2、另存为Sketch 48+兼容版本,或导出为SVG后重新导入PxCook。
3、重新加载项目后,检查属性面板是否出现“borderRadius”字段且数值可交互编辑。











