Nuclear Pumpkin Mocha

    sketch-to-html2

    0.1.6 • Public • Published

    sketch to 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 示例:

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

    Keywords

    none

    Install

    npm i sketch-to-html2

    DownloadsWeekly Downloads

    0

    Version

    0.1.6

    License

    ISC

    Unpacked Size

    1.76 MB

    Total Files

    47

    Last publish

    Collaborators

    • wangyafei