摘要：起因作為前端工程師，日常開發(fā)離不開文件。對(duì)于來(lái)說(shuō)，市面上已經(jīng)有如，體驗(yàn)也很不錯(cuò)，但是需要下載同學(xué)提供的龐大的才能進(jìn)行標(biāo)注體驗(yàn)。而且有時(shí)候還是需要同學(xué)給龐大的文件，我們才能在中自動(dòng)標(biāo)注。

作為前端工程師，日常開發(fā)離不開 psd 文件。

但是日常開發(fā)的一個(gè)小彈窗頁(yè)面，它的 psd 居然需要 30+Mb，所以經(jīng)常得定期清理 psd...

對(duì)于我一個(gè) PS 小菜雞來(lái)說(shuō)，用 PSD 無(wú)非只是需要用來(lái)度量元素大?。ㄔ亻g距），查看屬性等簡(jiǎn)單的功能。

相對(duì)比于 sketch，sketch 具有 sketch-measure，設(shè)計(jì)師導(dǎo)出成靜態(tài)資源給前端即可。

對(duì)于 PSD 來(lái)說(shuō)，市面上已經(jīng)有如 pxcook / lanhuapp，體驗(yàn)也很不錯(cuò)，但是需要下載 U 同學(xué)提供的 (龐大的) psd 才能進(jìn)行標(biāo)注體驗(yàn)。

而且有時(shí)候還是需要 U 同學(xué)給(龐大的) PSD 文件，我們才能在 pxcook / lanhuapp 中自動(dòng)標(biāo)注。

于是鑒于以上，考慮做一個(gè)開源項(xiàng)目，類似于 sketch-measure， 定位為 psd-measure。

DEMO
源碼，歡迎 star

我們也可以使用命令行來(lái)導(dǎo)出頁(yè)面標(biāo)注

bash

npm i measure-export-cli -g
# 開啟服務(wù)，在線預(yù)覽 `path/to/psdDir` 下的 psd
measure-export start path/to/psdDir
# 構(gòu)建 `path/to/psdDir` 下的 psd 至 `dist` 文件目錄
measure-export build path/to/psdDir

提供 Chrome 插件，當(dāng)我們點(diǎn)擊 psd 鏈接時(shí)候跳出 Measure UI，而不是下載 PSD，當(dāng)然我們也可以點(diǎn)擊右上方的下載進(jìn)行下載。

下載擴(kuò)展，點(diǎn)擊下載

打開 Chrome 擴(kuò)展頁(yè)面： chrome://extensions/

拖拽下載的包至頁(yè)面中進(jìn)行安裝

出現(xiàn)該圖標(biāo)表示安裝完成

流程如下：

File Header（定長(zhǎng)） 主要包括這個(gè) psd 文件整體的數(shù)據(jù)，如版本，尺寸大小，圖片通道數(shù)，使用的顏色類別（rgb、cmyk...）

Color Mode Data Section（變長(zhǎng)） 主要是部分顏色類型圖片需要用到

Image Resources（變長(zhǎng)） 放置一些外部的圖片資源

Layer and Mask（變長(zhǎng)） 放置圖層和蒙層的各種信息，大小位置，字體，描邊等等

Image Data（變長(zhǎng)） 放置圖像像素?cái)?shù)據(jù)

使用 psd.js 便是解析上述文件結(jié)構(gòu)，得到可讀的數(shù)據(jù)結(jié)構(gòu)。
其中 psd.js 使用 getter 得到懶解析數(shù)據(jù)，即如下代碼：

const obj = Object.defineProperty({}, "someParsedVal", {
  get: function () {
    if (!this._someParsedVal) {
      const afterMs = Date.now() + 3000
      while (true) {
        if (Date.now() >= afterMs) {
          this._someParsedVal = "ok"
          break
        }
      }
    }
    return this._someParsedVal
  }
})

obj.someParsedVal // 3s 后出來(lái)
obj.someParsedVal // 很快

在 mobx3 中也有類似的設(shè)計(jì)（LazyInitializer）

將 PSD 解析為 HAST，進(jìn)而轉(zhuǎn)換為 HTML

如下 html：

對(duì)應(yīng) HAST 為

{
  "type": "element",
  "tagName": "a",
  "properties": {
    "href": "http://alpha.com",
    "id": "bravo",
    "className": ["bravo"],
    "download": true
  },
  "children": []
}

前后端同構(gòu)的意思：同時(shí)運(yùn)行在客戶端和服務(wù)端，具體便是同時(shí)執(zhí)行在瀏覽器環(huán)境和 nodejs 環(huán)境

實(shí)現(xiàn)前后端同構(gòu)的一些常用方式，借助構(gòu)建工具 browserify / rollup / webpack 來(lái)分別打包不同環(huán)境的 js

模擬環(huán)境

在 nodejs 環(huán)境，對(duì)于 nodejs built-in modules 不進(jìn)行打包

在 browser 環(huán)境，則將預(yù)設(shè)的 built-in modules 打包進(jìn)去，以及一些 global 變量（如 process.env / __dirname）也會(huì)進(jìn)行 mock

利用 變量替換 + treeshake 區(qū)分不同環(huán)境的代碼

如 webpack 配置 DefinePlugin

{
  plugins: [
    new webpack.DefinePlugin({
      "process.env.RUN_ENV": JSON.stringify("browser")
    })
  ]
}

在代碼中對(duì)不同環(huán)境打包進(jìn)行區(qū)分

module.exports =
  process.env.RUN_ENV === "browser"
    ? {
        psdToHtml,
        psdToHtmlFromBuffer,
        psdToHtmlFromURL,
        psdToHAST,
        psdToHASTFromBuffer
      }
    : {
        psdToHtml,
        psdToHtmlFromPath,
        psdToHtmlFromBuffer,
        psdToHAST,
        psdToHASTFromBuffer,
        psdToHASTFromPath
      }

最終打包出來(lái)的 js 則會(huì)剔除掉 psdToHASTFromPath 相關(guān)代碼

package.json 配置

如下：

{
  "main": "dist/psd-html.cjs.js",
  "browser": "dist/psd-html.browser.cjs.js",
  "cdn": "dist/psd-html.browser.umd.min.js",
  "unpkg": "dist/psd-html.browser.umd.min.js"
}

main: nodejs 環(huán)境加載的 js

browser: browser 環(huán)境加載的 js

cdn: 部分 cdn 服務(wù)加載的 js

unpkg: unpkg cdn 服務(wù)加載的 js （主要使用 UMD 規(guī)范打包）

直接訪問 https://unpkg.com/@moyuyc/psd... 則會(huì)重定向至 https://unpkg.com/@moyuyc/psd...{latest-version}/dist/psd-html.browser.umd.min.js

將 psd 導(dǎo)出成整個(gè)圖片，利用每一個(gè)圖層的定位和大小來(lái)自動(dòng)標(biāo)注。

2 個(gè) div，相對(duì)與同一個(gè)父級(jí)的絕對(duì)定位，如何判斷他們是否相交？

.
.
.
.
.
.
.
.
.
.

正面直接判斷是很費(fèi)力的，要考慮各種情況，這時(shí)候需要逆向思維，考慮不相交的情況。
這時(shí)候就簡(jiǎn)單了

不相交只要滿足下面四種情況之一就可以

function isIntersect(node1, node2) {
  const rect1 = node1.getBoundingClientRect()
  const rect2 = node2.getBoundingClientRect()
  return !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  )
}

輸入 psd / html 導(dǎo)出 meas-ui 靜態(tài)資源，流程如圖（區(qū)分 prod 和 dev 環(huán)境）

.svg)

[ ] 提供 chrome 插件：當(dāng)瀏覽器打開 psd 時(shí)候，渲染測(cè)量尺寸 UI

@moyuyc/psd.js - 解析 psd 文件，格式化 (Forked from psd.js)

@moyuyc/psd-html - psd -> hast -> html

html-measure - 標(biāo)注交互

meas-ui - 前端 UI 展示，包含標(biāo)注交互

measure-export(-cli) - 輸入 psd / html 導(dǎo)出 meas-ui 靜態(tài)資源

Adobe Photoshop File Formats Specification PS 文件格式官方標(biāo)準(zhǔn)

Photoshop Styles File Format

JS. 如何判斷兩個(gè)矩形是否相交

HAST