@yunser/sketch-lib v0.0.6

npm run write 生成 sketch 文件，在 output/ui.sketch 就是 STD JSON 转 sketch

npm run read 读取 sketch 文件，生成 STD JSON

iframe 必须在 0， 0

入 JSON 校验

• 功能：读取、生成 sketch

• 封装

• 去掉注释
• 发布

• 测试

• TODO

  • blob 类型
  • 包大小

• 生成 Sketch

  • 进度：20%

  • 问题

    • 文本没显示
    • 路径不正常显示
    • 箭头没显示
    • 分组内的形状位置不对
    • 多重分组
    • 组件
    • 切片
    • 虚线
    • visible
    • 图片圆角
    • 复合形状
    • 路径 MLCZ
    • 字体迁入
    • 打开后的位置
    • console.log('translate')
    • 非闭合路径
    • sketch 模糊不能 visible

• 读取 Sketch

  • 进度：5%
  • 完成
    • 形状
      • rect
      • line
      • polygon
      • polyline
      • text
        • content
      • path
    • style
    • 生成 SVG
      • 暂不支持布尔运算（联合图形）
    • visible
  • TODO
    • 箭头
    • 多个外阴影
    • 内阴影
      • 多个
    • line height
    • fill
      • 多个填充
    • stroke
      • 多个
    • out of board
    • svg 大小
    • artboard name
    • page bg color
    • 兼容插件
    • 富文本
    • 混合模式
  • 问题
    • 联合图形卡住，原因：路径解析有问题
    • 不支持联合图形（布尔操作生成的图形）
    • 文字解析有问题（浏览器能力不足？不同字体的行高不一致，而浏览器无法获取行高？）

• 生成 Sketch

  • 进度？
  • 问题
    • 不支持 group。
    • 文字样式有问题。
    • 不支持阴影。
    • 不支持渐变。
    • 路径不支持端点类型（Sketch 不支持）。
    • 不支持图片圆角（Sketch 不支持）。
    • Sketch 本身的 bug
      • 导出的svg 与 图片阴影不一致。
      • 文本 100大小，140 行高时，导出的svg 与 图片阴影不一致。字体粗细不一致。
      • 边框颜色有透明度，且设置了边框位置时，导出的 SVG 与设计稿不一致。

• Sketch 知识
  • 直线不能翻转

Sketch 界面显示的 rotation 与代码里的不一致。

正常（代码）
//   90
//180  0
//  270



正常（界面）
//   -90
//180  0
//  90

上下翻转、左右翻转（界面）
//   90
//180  0
//  -90

翻转（代码）
//   90
//180  0
//  270

Update Log

• v0.0.5
  • Many functions.
• v0.0.4
  • 修改接口，兼容浏览器。

https://developer.sketch.com/reference/api/#introduction https://developer.sketchapp.boltdoggy.com/guides/first-plugin/ https://github.com/sketch-hq

zip -r -X sketch-single.sketch *

var sketch = require('sketch/dom') var async = require('sketch/async') var DataSupplier = require('sketch/data-supplier') var UI = require('sketch/ui') var Settings = require('sketch/settings')

// a more convenient require which exposes everything (might be a bit slower) var sketch = require('sketch')

Sketch 知识

• Artboard 里面的元素位置是相对坐标，相对于 Artboard。
• STD 里面元素的坐标是绝对坐标，相对于耶页面。