前端开发利器 - - PxCook（像素大厨）
发布时间：2023-07-04 13:00
前端开发利器 - - PxCook（像素大厨）
1、PxCook简述
前端开发软件：
- PS（Photoshop）收费、占用磁盘空间大
- PxCook本地免费，轻量，高效
PxCook
高效易用的自动标注工具, 生成前端代码, 设计研发协作利器
PxCook功能
- 代码生成：包括 CSS, XML, Objective-C, Swift, ReactNative…
- 自动标注：在开发模式下，可直接查看设计稿中元素的内容，间距，尺寸和样式等。同时会根据当前所选择的元素，在右侧属性栏中生成对应的样式代码。
- 智能标注：支持智能标注出设计稿中，需要特殊注意的地方，以便加快工程师的开发效率。
- 单位换算：支持 iOS, Android 和 H5 平台的不同单位类型和分辨率换算。
- 切图协作：支持 iOS, Android 和 H5 三种平台的 切图协作 。导入到PxCook中的切图种类和命名，会根据当前的设备类型，自动进行换算。
- 主流设计工具跨平台支持：支持 Photoshop，Sketch 和 Adobe XD 等设计工具，支持 macOS 和 Windows 两个操作系统。
- 项目制管理设计稿：支持项目制管理您的设计稿中的每一个画板，同时支持对画板进行分组。
- 协作项目的支持：支持云端协作项目，可以自由邀请项目的参与者到该项目中。
- 本地项目的支持： 支持本地项目，所有项目数据可以以 pxcp 文件格式保存到本地，隐私保护更加有效。
2、PxCook安装
下载地址：PxCook - 高效易用的自动标注工具
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/d4d77193040a4d5f9d0e57653e617347.png#pic_center\")
)
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/b00af66c5aa841919b4516ee774448a5.png#pic_center\")
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/d9b7ba125a8c4adcb7a0cbebbf8bc579.png#pic_center\")
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/e7cdfcd779284d998e420984d9004614.png#pic_center\")
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/409bdf7118b94ba78fdbfa67ab497f9e.png#pic_center\")
3、PxCook基本操作
3.1 通过软件打开设计图
打开软件
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/3819a505fbcc4289b2912626f2306ba0.png#pic_center\")
创建web项目
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/d1d9f481f2444e5380c2eb3438a10459.png#pic_center\")
拖拽入设计图，png用设计模式 psd用开发模式
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/0971fd4c35574eda836d036115c66d0f.png#pic_center\")
3.2 常用快捷键
放大设计图：ctrl + +
缩小设计图：ctrl - -
移动设计图：空格按住不放，鼠标拖动
3.3 常用工具
-
量尺寸
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/eaf6c148733e47a0babf7c6523f2faff.png#pic_center\")
-
吸颜色
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/dca74ac5ef13437abf1482b61380613f.png#pic_center\")
3.4 从psd文件中直接获取数据
切换到开发界面，直接点击获取数据
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/0ea9482c396c4342896ea8d5c4265597.png#pic_center\")