前端開(kāi)發(fā)利器 - - PxCook（像素大廚）

• 1、PxCook簡(jiǎn)述
• 2、PxCook安裝
• 3、PxCook基本操作
• • 3.1 通過(guò)軟件打開(kāi)設(shè)計(jì)圖
  • 3.2 常用快捷鍵
  • 3.3 常用工具
  • 3.4 從psd文件中直接獲取數(shù)據(jù)

---

1、PxCook簡(jiǎn)述

前端開(kāi)發(fā)軟件：

• PS（Photoshop）收費(fèi)、占用磁盤(pán)空間大
• PxCook本地免費(fèi)，輕量，高效

PxCook

高效易用的自動(dòng)標(biāo)注工具, 生成前端代碼, 設(shè)計(jì)研發(fā)協(xié)作利器

PxCook功能

• 代碼生成：包括 CSS, XML, Objective-C, Swift, ReactNative…
• 自動(dòng)標(biāo)注：在開(kāi)發(fā)模式下，可直接查看設(shè)計(jì)稿中元素的內(nèi)容，間距，尺寸和樣式等。同時(shí)會(huì)根據(jù)當(dāng)前所選擇的元素，在右側(cè)屬性欄中生成對(duì)應(yīng)的樣式代碼。
• 智能標(biāo)注：支持智能標(biāo)注出設(shè)計(jì)稿中，需要特殊注意的地方，以便加快工程師的開(kāi)發(fā)效率。
• 單位換算：支持 iOS, Android 和 H5 平臺(tái)的不同單位類(lèi)型和分辨率換算。
• 切圖協(xié)作：支持 iOS, Android 和 H5 三種平臺(tái)的 切圖協(xié)作 。導(dǎo)入到PxCook中的切圖種類(lèi)和命名，會(huì)根據(jù)當(dāng)前的設(shè)備類(lèi)型，自動(dòng)進(jìn)行換算。
• 主流設(shè)計(jì)工具跨平臺(tái)支持：支持 Photoshop，Sketch 和 Adobe XD 等設(shè)計(jì)工具，支持 macOS 和 Windows 兩個(gè)操作系統(tǒng)。
• 項(xiàng)目制管理設(shè)計(jì)稿：支持項(xiàng)目制管理您的設(shè)計(jì)稿中的每一個(gè)畫(huà)板，同時(shí)支持對(duì)畫(huà)板進(jìn)行分組。
• 協(xié)作項(xiàng)目的支持：支持云端協(xié)作項(xiàng)目，可以自由邀請(qǐng)項(xiàng)目的參與者到該項(xiàng)目中。
• 本地項(xiàng)目的支持： 支持本地項(xiàng)目，所有項(xiàng)目數(shù)據(jù)可以以 pxcp 文件格式保存到本地，隱私保護(hù)更加有效。

---

2、PxCook安裝

下載地址：PxCook - 高效易用的自動(dòng)標(biāo)注工具
)

---

3、PxCook基本操作

3.1 通過(guò)軟件打開(kāi)設(shè)計(jì)圖

打開(kāi)軟件

創(chuàng)建web項(xiàng)目

拖拽入設(shè)計(jì)圖，png用設(shè)計(jì)模式 psd用開(kāi)發(fā)模式

3.2 常用快捷鍵

放大設(shè)計(jì)圖：ctrl + +

縮小設(shè)計(jì)圖：ctrl - -

移動(dòng)設(shè)計(jì)圖：空格按住不放，鼠標(biāo)拖動(dòng)

3.3 常用工具

量尺寸

吸顏色

3.4 從psd文件中直接獲取數(shù)據(jù)

切換到開(kāi)發(fā)界面，直接點(diǎn)擊獲取數(shù)據(jù)

---

總結(jié)

以上是生活随笔為你收集整理的前端开发利器--PxCook（像素大厨）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。