diff --git a/1st_encode/example_new.json b/1st_encode/example_new.json index 0997f4f..79495b3 100644 --- a/1st_encode/example_new.json +++ b/1st_encode/example_new.json @@ -118,13 +118,14 @@ "type": "round", "data": { "x-axis": 30, - "y-axis": 40, - "angle": 60 + "y-axis": 40 } }, { "type": "group", - "reference-layer": "0.0" + "data": { + "reference-layer": "0.0" + } } ], "root-layer": { @@ -155,66 +156,42 @@ ], "effects": [ { - "type": "iteration", + "type": "iterate", "data": { - "times": 5, + "time": 5, "operations": [ - [ - { - "type": "move", - "data": { - "dx": 5, - "dy": 6 + { + "type": "move", + "data": { + "offset": { + "x": 5, + "y": 6 } - }, - { - "type": "rotate", - "data": { - "center": { - "dx": 0, - "dy": 0 - }, - "dθ": 60 - } - }, - { - "type": "zoom", - "data": { - "zoom": 1.5 - } - }, - { - "type": "flip" } - ], - [ - { - "type": "move", - "data": { - "dx": 5, - "dy": 6 - } - }, - { - "type": "rotate", - "data": { - "center": { - "dx": 0, - "dy": 0 - }, - "dθ": 60 - } - }, - { - "type": "zoom", - "data": { - "zoom": 1.5 - } - }, - { - "type": "flip" + }, + { + "type": "rotate", + "data": { + "center-offset": { + "x": 0, + "y": 0 + }, + "angle": 60 } - ] + }, + { + "type": "zoom", + "data": { + "zoom": 1.5 + } + }, + { + "type": "flip", + "data": { + "k": 1.2, + "b": 3 + } + } ] } } diff --git a/1st_encode/example_new.md b/1st_encode/example_new.md new file mode 100644 index 0000000..7852cce --- /dev/null +++ b/1st_encode/example_new.md @@ -0,0 +1,205 @@ +# example_new.json 各字段详解 + +- [example\_new.json 各字段详解](#example_newjson-各字段详解) + - [JSON Root](#json-root) + - [Element](#element) + - [Element: type \& data](#element-type--data) + - [path: 路径](#path-路径) + - [polygon: 多边形](#polygon-多边形) + - [round: 椭圆](#round-椭圆) + - [group: 组图元](#group-组图元) + - [Layer](#layer) + - [公共父类字段](#公共父类字段) + - [FolderLayer](#folderlayer) + - [LeafLayer](#leaflayer) + - [PathOperation](#pathoperation) + - [PathOperation: type \& data](#pathoperation-type--data) + - [line: 直线](#line-直线) + - [cubic: 三阶贝塞尔曲线](#cubic-三阶贝塞尔曲线) + - [cubic-smooth: 平滑三阶贝塞尔曲线](#cubic-smooth-平滑三阶贝塞尔曲线) + - [quadratic: 二阶贝塞尔曲线](#quadratic-二阶贝塞尔曲线) + - [quadratic-smooth: 平滑二阶贝塞尔曲线](#quadratic-smooth-平滑二阶贝塞尔曲线) + - [arc: 圆弧](#arc-圆弧) + - [zeal: 直线封口](#zeal-直线封口) + - [Point](#point) + - [Effect](#effect) + - [Effect: type \& data](#effect-type--data) + - [iterate: 迭代](#iterate-迭代) + - [IterateOperation](#iterateoperation) + - [IterateOperation: type \& data](#iterateoperation-type--data) + - [move: 平移](#move-平移) + - [rotate: 旋转](#rotate-旋转) + - [zoom: 缩放](#zoom-缩放) + - [flip: 翻转](#flip-翻转) +--- + +## JSON Root +| 属性名 | 类型 | 备注 | +| ---------- | ------------------- | ------------------------------- | +| height | int | 画布高度 | +| width | int | 画布宽度 | +| elements | list<Element> | 图元列表(见[Element](#element)) | +| root-layer | Layer | 根图层节点(见[Layer](#layer)) | + +## Element +| 属性名 | 类型 | 备注 | +| ------ | ------ | -------- | +| type | string | 元素类型 | +| data | Object | 详细属性 | + +### Element: type & data +#### path: 路径 +> 注: path都是以(0,0)为起点的 + +| 属性名 | 类型 | 备注 | +| ---------- | ------------------------- | ----------------------------------------------- | +| operations | list<PathOperation> | 路径绘制操作(见[PathOperation](#pathoperation)) | + +#### polygon: 多边形 +> 注: polygon都是以(0,0)为起点的 + +| 属性名 | 类型 | 备注 | +| ------ | ----------------- | ------------------------ | +| points | list<Point> | 逆时针排列的各点坐标列表 | + +#### round: 椭圆 +> 注: round的(minX, minY) = (0,0) + +| 属性名 | 类型 | 备注 | +| ------ | ------ | ------- | +| x-axis | double | x轴长度 | +| y-axis | double | y轴长度 | + +#### group: 组图元 +> 注: group的(minX, minY) = (0,0) + +| 属性名 | 类型 | 备注 | +| --------------- | ------ | --------------------------------------------------------------------------------- | +| reference-layer | string | 该组图元所引用的**文件夹**图层的路径,如"0.1.0",代表根图层的第1个孩子的第0个孩子 | + +## Layer +> Layer有两个子类,分别为FolderLayer和LeafLayer + +### 公共父类字段 +| 属性名 | 类型 | 备注 | +| -------------- | ------------------ | ------------------------------ | +| name | string | 图层名,要求全局唯一 | +| offset | Point | 该图层相对于父亲节点的偏移坐标 | +| transformation | int[9] | 二维变换矩阵 | +| effects | list<Effect> | 效果(见[Effect](#effect)) | +| is-folder | boolean | 是否为FolderLayer | + +### FolderLayer +| 属性名 | 类型 | 备注 | +| ------------- | ----------------- | ------------------------------------------ | +| referenced-by | int | 被组图元引用的图元索引,若未被引用则为null | +| children | list<Layer> | 孩子节点 | + +### LeafLayer +| 属性名 | 类型 | 备注 | +| ------- | ---- | -------------------- | +| element | int | 该图层引用的图元索引 | + +## PathOperation +| 属性名 | 类型 | 备注 | +| ------ | ------ | ------------ | +| tyoe | string | 绘制操作类型 | +| data | Object | 详细属性 | + +### PathOperation: type & data +#### line: 直线 +| 属性名 | 类型 | 备注 | +| ------ | ----- | ---- | +| target | Point | 终点 | + +#### cubic: 三阶贝塞尔曲线 +| 属性名 | 类型 | 备注 | +| ------- | ----- | ---------- | +| target | Point | 终点 | +| control | map | 控制点 | +| > start | Point | 起点控制点 | +| > end | Point | 终点控制点 | + +#### cubic-smooth: 平滑三阶贝塞尔曲线 +> 即当前起点控制点、起点与上一条线的终点控制点三个点在同一条直线上,且当前起点控制点到起点与起点到上一条线的终点控制点是同一个向量 + +| 属性名 | 类型 | 备注 | +| ------- | ----- | ---------- | +| target | Point | 终点 | +| control | Point | 终点控制点 | + +#### quadratic: 二阶贝塞尔曲线 +| 属性名 | 类型 | 备注 | +| ------- | ----- | ---------- | +| target | Point | 终点 | +| control | Point | 终点控制点 | + +#### quadratic-smooth: 平滑二阶贝塞尔曲线 +> 与平滑三阶贝塞尔曲线类似 + +| 属性名 | 类型 | 备注 | +| ------ | ----- | ---- | +| target | Point | 终点 | + +#### arc: 圆弧 +| 属性名 | 类型 | 备注 | +| ------ | ------ | ------------------------ | +| center | Point | 圆弧圆心 | +| x-axis | double | x轴长度 | +| y-axis | double | y轴长度 | +| angle | double | 从起点起的逆时针旋转角度 | + +#### zeal: 直线封口 +> 等价于line(0,0),无data + + + +## Point +| 属性名 | 类型 | 备注 | +| ------ | ------ | ---- | +| x | double | | +| y | double | | + +## Effect +| 属性名 | 类型 | 备注 | +| ------ | ------ | -------- | +| type | string | 效果类型 | +| data | Object | 详细属性 | + +### Effect: type & data +> 其他的还处于待定状态 + +#### iterate: 迭代 +| 属性名 | 类型 | 备注 | +| ---------- | ---------------------------- | ------------------------------------------------- | +| time | int | 迭代次数 | +| operations | list<IterateOperation> | 迭代操作(见[IterateOperation](#iterateoperation)) | + +## IterateOperation +| 属性名 | 类型 | 备注 | +| ------ | ------ | ------------ | +| type | string | 迭代操作类型 | +| data | Object | 详细属性 | + +### IterateOperation: type & data +#### move: 平移 +| 属性名 | 类型 | 备注 | +| ------ | ----- | -------------- | +| offset | Point | 平移坐标偏移量 | + +#### rotate: 旋转 +| 属性名 | 类型 | 备注 | +| ------------- | ------ | ---------------------------- | +| center-offset | Point | 圆心相对于当前点的坐标偏移量 | +| angle | double | 从起点起的逆时针旋转角度 | + +#### zoom: 缩放 +| 属性名 | 类型 | 备注 | +| ------ | ------ | ------ | +| zoom | double | 缩放量 | + +#### flip: 翻转 +| 属性名 | 类型 | 备注 | +| ------ | ------ | ----------------------- | +| k | double | 翻转轴斜率 | +| b | double | 翻转轴相对于当前点的b值 | \ No newline at end of file