做爲前端工程師,平常開發離不開 psd 文件。javascript
可是平常開發的一個小彈窗頁面,它的 psd 竟然須要 30+Mb,因此常常得按期清理 psd...html
對於我一個 PS 小菜雞來講,用 PSD 無非只是須要用來度量元素大小(元素間距),查看屬性等簡單的功能。前端
相對比於 sketch,sketch 具備 sketch-measure,設計師導出成靜態資源給前端便可。java
對於 PSD 來講,市面上已經有如 pxcook / lanhuapp,體驗也很不錯,可是須要下載 U 同窗提供的 (龐大的) psd 才能進行標註體驗。node
並且有時候仍是須要 U 同窗給(龐大的) PSD 文件,咱們才能在 pxcook / lanhuapp 中自動標註。webpack
因而鑑於以上,考慮作一個開源項目,相似於 sketch-measure, 定位爲 psd-measure。git
DEMO
源碼,歡迎 stargithub
咱們也可使用命令行來導出頁面標註web
bashchrome
npm i measure-export-cli -g # 開啓服務,在線預覽 `path/to/psdDir` 下的 psd measure-export start path/to/psdDir # 構建 `path/to/psdDir` 下的 psd 至 `dist` 文件目錄 measure-export build path/to/psdDir
提供 Chrome 插件,當咱們點擊 psd 連接時候跳出 Measure UI,而不是下載 PSD,固然咱們也能夠點擊右上方的下載進行下載。
流程以下:
使用 psd.js 即是解析上述文件結構,獲得可讀的數據結構。
其中 psd.js 使用 getter 獲得懶解析數據,即以下代碼:
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 後出來 obj.someParsedVal // 很快
在 mobx3 中也有相似的設計(LazyInitializer)
將 PSD 解析爲 HAST,進而轉換爲 HTML
以下 html:
<a href="http://alpha.com" class="bravo" download></a>
對應 HAST 爲
{ "type": "element", "tagName": "a", "properties": { "href": "http://alpha.com", "id": "bravo", "className": ["bravo"], "download": true }, "children": [] }
先後端同構的意思:同時運行在客戶端和服務端,具體即是同時執行在瀏覽器環境和 nodejs 環境
實現先後端同構的一些經常使用方式,藉助構建工具 browserify / rollup / webpack 來分別打包不一樣環境的 js
process.env / __dirname
)也會進行 mock如 webpack 配置 DefinePlugin
{ plugins: [ new webpack.DefinePlugin({ 'process.env.RUN_ENV': JSON.stringify('browser') }) ] }
在代碼中對不一樣環境打包進行區分
module.exports = process.env.RUN_ENV === 'browser' ? { psdToHtml, psdToHtmlFromBuffer, psdToHtmlFromURL, psdToHAST, psdToHASTFromBuffer } : { psdToHtml, psdToHtmlFromPath, psdToHtmlFromBuffer, psdToHAST, psdToHASTFromBuffer, psdToHASTFromPath }
psdToHASTFromPath
相關代碼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 環境加載的 jsbrowser
: browser 環境加載的 jscdn
: 部分 cdn 服務加載的 jsunpkg
: unpkg cdn 服務加載的 js (主要使用 UMD 規範打包)直接訪問 https://unpkg.com/@moyuyc/psd... 則會重定向至 https://unpkg.com/@moyuyc/psd...{latest-version}/dist/psd-html.browser.umd.min.js
將 psd 導出成整個圖片,利用每個圖層的定位和大小來自動標註。
2 個 div,相對與同一個父級的絕對定位,如何判斷他們是否相交?
.
.
.
.
.
.
.
.
.
.
正面直接判斷是很費力的,要考慮各類狀況,這時候須要逆向思惟,考慮不相交的狀況。
這時候就簡單了
不相交只要知足下面四種狀況之一就能夠
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 導出 meas-ui
靜態資源,流程如圖(區分 prod 和 dev 環境)
.svg)
meas-ui
靜態資源