sketch to html
使用
安装:
$ npm install sketch-to-html --save
引入并解析:
const source = './xxx.sketch'; const parser = ;;// 会输出一个网站资源文件夹到当前文件夹下的 output 文件夹中,并且尝试用系统的 chrome 打开页面。
这个库刚开发出来,用起来还不太优雅,呵呵,这里只是提供一种演示,后续会开拓一些实用功能
运行示例:
$ git clone https://github.com/xinyu198736/sketch-to-html.git$ cd sketch-to-html$ npm install$ npm run example
在线查看生成的 html 示例:
https://xinyu198736.github.io/sketch-to-html/docs/index.html
优势
相比 github 上其他的库,特别支持以下特性:
- 更好的处理各种旋转变形属性
- 支持形状内填充图案
- 完整支持渐变色
- 支持 mask 蒙层
- 支持 icon 图片变色
- 支持渐变 mask 蒙层
- 生成的页面 css 和 html 分离
- 生成中间数据结构,可以支持转成其他框架视图
- 更完善处理文字排版
- 支持所有图层类型转换,不规则图形转成 svg
- 使用 rem 方案生成页面,支持自动缩放
已知问题(逐步修复中)
- 渐变色的角度算法有问题,算出来的值有偏差,并且横向的角度会算成无限大
- 对于 Group 的 shadow 处理有问题,css 不支持轮廓 shadow
- 蒙层在蒙层参照物是 不规则图形时 会失效。
todo
- 支持在 px 和 rem 之间切换
- 支持在设计稿中标注一些 html 属性,例如链接地址(可行性未评估好)
- 支持复用一些知名组件库,并且可以根据内容导出成组件的属性。
结构
.├── Makefile├── README.md├── example.js 示例├── index.js 入口├── layer 所有图层类型的样式和结构生成方法│ ├── Bitmap.js│ ├── Common.js│ ├── Group.js│ ├── LayerFactory.js 图层工厂方法,供外部调用│ ├── LayerProtocol.js 图层协议类,供图层继承│ ├── ShapeGroup.js│ ├── ShapePath.js│ └── Text.js├── parser 一些用来做解析的方法│ ├── NSArchiveParser.js 解析 sketch 内的样式编码│ ├── layerParser.js 解析图层结构│ ├── pathParser.js 解析 svg 图层│ └── styleParser.js 解析样式├── render 生成样式表和渲染html的方法│ ├── htmlRender.js│ └── styleRender.js├── store 全局的数据存储│ ├── StyleStore.js│ └── SymbolStore.js├── template 模板│ ├── assets│ ├── index.html│ ├── index.js│ └── template.js└── util.js 工具方法
中间转换的数据结构
转换原理是将 sketch 文件先转为一个大的数据结构,然后遍历此数据结构生成 html 和 css,以下是数据结构的示例,后续可以从此数据结构生成其他语言的代码。
"id": "E42E1F7C-C8AB-47F4-A131-22C31284ADC4" "frame": "_class": "rect" "constrainProportions": false "height": 50 "width": 197 "x": 250 "y": 876 "style": {} "path": null "isVisible": true "name": "Group_12" "type": "group" "isMask": false "childrens": "id": "B06A6329-E18B-4036-80EB-9E05384FB991" "frame": "_class": "rect" "constrainProportions": false "height": 4999999999999998 "width": 197 "x": 0 "y": 0 "style": "backgroundColor": "rgba(239,119,149,1)" "path": null "isVisible": true "name": "Rectangle_3_5" "type": "shapeGroup" "isMask": false "childrens": "id": "EBC7DA72-D642-42FF-8F46-DF6F96E47CEB" "frame": "_class": "rect" "constrainProportions": false "height": 4999999999999998 "width": 1969999999999999 "x": 0 "y": 0 "style": "borderRadius": 100 "path": "M0,0L197,0L197,50L0,50L0,0Z" "isVisible": true "name": "Path_19" "type": "rectangle" "isMask": false "isRect": true "id": "69C0B6EF-A15F-409F-B2BC-744B6F479D42" "frame": "_class": "rect" "constrainProportions": false "height": 33 "width": 1538478260869566 "x": 2115217391304342 "y": 6999999999999989 "style": "color": "rgba(255,254,254,1)" "fontSize": 24 "textAlign": 2 "text": "斩获无数大奖" "path": null "isVisible": true "name": "zhan_huo_wu_shu_da_jiang" "type": "text" "isMask": false "text": "斩获无数大奖"