PxCook切图区域标注方法详解

在PxCook中精准标注切图区域是设计师高效交付开发资源的关键环节，本文系统梳理了四种实用且互补的框选标记方法：通过选择工具一键标记图层或图层组、用矩形切片工具自由绘制自定义区域、借助@bounds命名法强制绑定标准化尺寸，以及利用智能标注反向推导并锁定切图范围；无论面对PSD/Sketch源稿中的独立图标、局部内容还是规范严格的UI组件，这些技巧都能帮助你告别模糊选区与反复调试，真正实现“所标即所得”的高精度切图输出。

如果您在PxCook中已导入PSD或Sketch设计稿，但无法准确标识需导出的图像区域，则可能是未正确使用框选功能划定切图范围。以下是实现精准框选标记切图区域的具体操作步骤：

一、使用选择工具框选单个图层或图层组

该方法适用于需将独立图层或整组图层作为单一切图输出的场景，PxCook会依据所选图层边界自动生成对应尺寸的切图区域。

1、在PxCook左侧工具栏中点击选择工具（箭头图标）。

2、在画布中单击目标图层缩略图，或按住Ctrl键（Windows）/ Cmd键（Mac）多选多个图层。

3、若需框选图层组，确保该图层组在PSD中已正确嵌套且未被合并，PxCook将识别其层级结构并以组边界为切图范围。

4、右键所选图层或图层组，在弹出菜单中选择“标记为切图”，此时图层名称旁将出现蓝色切图标识图标。

二、使用矩形切片工具手动绘制自定义切图区域

该方法适用于需对非图层边界区域（如局部内容、不规则视觉区块）进行精确裁切的情形，支持任意坐标与尺寸定义。

1、点击左侧工具栏中的矩形切片工具（方框图标）。

2、在画布上按住鼠标左键拖拽，绘制一个覆盖目标区域的矩形框，松开后即生成临时切片。

3、选中该切片框，在右侧属性面板中可手动输入X、Y坐标及宽高值（单位：px），确保数值与设计规范一致。

4、双击切片框名称，重命名为含语义的标识（如icon_home@2x），便于后续识别与导出。

三、通过@bounds命名法绑定固定尺寸切图区域

该方法用于强制将某图层或图层组导出为指定像素尺寸（如统一输出为200×200px），不受原始图层尺寸限制，常用于图标、按钮等标准化资源。

1、在Photoshop中新建一个纯色形状图层（如矩形），设置其大小为目标切图尺寸（如200×200px）。

2、将该形状图层重命名为@bounds，并将其置于目标图层或图层组的最顶层或最底层（二者必须同属一个图层组）。

3、将整个图层组拖入PxCook，或通过远程连接同步至PxCook界面。

4、在PxCook中选中该图层组，右键选择“标记为切图”，系统将自动按@bounds定义的尺寸生成切图，而非原始图层尺寸。

四、利用智能标注反向定位并锁定切图区域

该方法适用于已存在明确间距/尺寸标注的设计稿，可通过标注关系快速反推并框定待切区域，提升标注与切图的一致性。

1、先使用距离标注工具或区域标注工具对关键元素间距离、文字块宽高等进行标注。

2、观察标注线端点坐标，在画布空白处使用矩形切片工具按标注数值手动绘制相同宽高的区域框。

3、将该区域框与标注对象对齐后，右键选择“转换为切图区域”（部分版本显示为“设为切图锚点”）。

4、确认该区域框已显示切图标识，且右侧属性中“导出尺寸”字段与标注值完全一致。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。