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": "斩获无数大奖"
}
]
}
html和sketch文件转换,GitHub - 332065255/sketch-to-html: 从 sketch 转换成 html,我开始更新了.....相关推荐
- Sketch文件用什么软件打开
现在,想要在线打开 Sketch 文件只需要 2 步就能搞定了! 第一步,访问Windows 也能用的「协作版 Sketch」--即时设计官网并点击免费使用,即可进入即时设计工作台. 第二步,进入即时 ...
- figma转换html,一份详细的从Sketch切换到Figma的迁移指南
越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋.但是这两个工具之间有差异,这篇文章我会为你分享一些无缝切换的技巧. 这篇文章来自 Buninux.com. 为什么要用这两款 ...
- lunacy怎么导出html,Sketch Windows版帮手:Lunacy让你Win系统操作Sketch文件
Sketch 是一款 MacOS 下非常知名的 UI 界面设计软件(矢量图形编辑器),效率高.但是苦苦没有Sketch的windows版,让大多数设计爱好者望而却步.还好Sketch的Windows版 ...
- 高版本sketch文件转成低版本的sketch
https://pan.baidu.com/s/1htmNERU 下载 该文件然后在放到高版本sketch文件的目录下,执行下面命令 chmod +x ./build.sh ./build.sh 文件 ...
- sketch 将动图转换为json_开源 | Picasso:sketch设计稿智能解析工具
开源二期项目专题系列(一) 1. 开源项目名称:Picasso 2. github地址: https://github.com/wuba/Picasso 3. 简介:Picasso是58同城推出的一款 ...
- sketch如何做设计稿交互_设计师用Sketch做设计稿时是用1倍图还是用2倍图做
相信很多人跟我一样一直在纠结到底用一倍图做ui设计还是二倍图?国外的设计师喜欢用一倍,国内的设计师比较多用二倍,实际上两种选择都有自己的好处,今天就打算给大家抛砖引玉一下. 375x667px :一倍 ...
- sketch 将动图转换为json_UI设计师如何创建sketch设计样式、库和UI套件
使用Sketch来创建UI风格设计的样式,将受益匪浅.使用本教程构建UI套件,并同时创建自定义(可重复使用)库,以提高设计效率与质量. 无论是Sketch专家还是Sketch的新手,设计师都会发现:S ...
- caj文件浏览器_caj文件怎么转换成pdf文件?试试这样操作,3步成功转换
诸位小伙伴用过caj文件吗?和pdf文件类似,也和电子书格式有点像,是我们办公中会用到的格式文件,不过假如你分享了一份caj格式的文档给别人,如果他们的电脑上没有安装对应的浏览器,则无法打开.阅读文件 ...
- 两种方法上传本地文件到github
自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...
最新文章
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- 以KNN为例用sklearn进行数据分析和预测
- 没学过编程能学python吗_我没学过编程,能否学会Python?
- spring的@ControllerAdvice注解
- 《算法与数据结构---C语言描述》优先队列
- mysql创建外键失败_mysql创建外键错误
- 拼团功能实现 php_PHP实现微信退款功能
- 我设想的可扩展结构(插件) (二)
- C++访问WebService(gSoap方式和com组件方式)
- (原文)基于甘特图的深度强化学习方法求解端到端在线重调度
- mac 设置锁屏快捷键
- 递归实现从1加到100
- 强化学习开发黑白棋、五子棋游戏
- html太极旋转css,前端CSS技巧之太极旋转图详解
- go[x]agent在windows和ubuntu下的安装步骤
- Windows XP 系统下使用宽带上网真方便
- 2014秋冬季校招时间表,持续更新
- ios 地图 省市轮廓_iOS 14中的新增功能:视觉轮廓检测
- 中央电大计算机网络试题,2017电大统考计算机试题及答案
- 单向链表的创建与遍历(先进先出和先进后出)
热门文章
- TensorFlow2 入门指南 | 04 分类问题实战之手写数字识别
- Open edX 学习、开发、运维相关链接整理
- Windows日志识别入侵痕迹
- 紧前关系绘图法(PDM)
- 驱动上升级固件和恢复默认值
- echarts初步使用
- 知识焦虑不可怕,可怕的是在焦虑中迷失方向
- 如何将日期格式转换为英文格式
- 发票专用驱动sjz_“数智企业财税云领”增值税专用发票主题交流会圆满举办| 从专票电子化开始 开启企业数智化之旅...
- SystemUI启动,及其SystemUIService启动