html和sketch文件转换,GitHub - 332065255/sketch-to-html: 从 sketch 转换成 html，我开始更新了.....

使用

安装：

$ npm install sketch-to-html --save

引入并解析：

const source = './xxx.sketch';

const parser = require('sketch-to-html');

parser(source);

// 会输出一个网站资源文件夹到当前文件夹下的 output 文件夹中，并且尝试用系统的 chrome 打开页面。

这个库刚开发出来，用起来还不太优雅，呵呵，这里只是提供一种演示，后续会开拓一些实用功能

运行示例：

$ git clone https://github.com/xinyu198736/sketch-to-html.git

$ cd sketch-to-html

$ npm install

$ npm run example

在线查看生成的 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": 49.99999999999998,

"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": 49.99999999999998,

"width": 196.9999999999999,

"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": 153.8478260869566,

"x": 21.15217391304342,

"y": 6.999999999999989

},

"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": "斩获无数大奖"

}

]

}