合图引擎基于json数据 解析，比较与htmltocanvas 先生成html再生成canva的解决方案， 渲染过程更可控，定制化成都高。
import Dev from '@ali/hetuCanva/dist/dev';
const data = {
"name": "draw edit action",
"width": 375,
"height": 850,
"layers": [
{
"name": "bg-layer",
"materials": [
{
"type": "IMAGE",
"style": {
"x": 0,
"y": 0,
"width": 375,
"height": 850,
"src": "https://img.alicdn.com/tfs/TB1Itzu4AL0gK0jSZFtXXXQCXXa-1500-3400.png"
}
}
]
},
{
"name": "items-bg-list-layer",
"materials": [
{
"type": "RECTANGLE",
"style": {
"x": 15,
"y": 143,
"width": 170,
"height": 170,
"color": "#f0f0f0"
}
},
{
"type": "RECTANGLE",
"style": {
"x": 190,
"y": 143,
"width": 170,
"height": 170,
"color": "#f0f0f0"
}
},
{
"type": "RECTANGLE",
"style": {
"x": 15,
"y": 318,
"width": 170,
"height": 170,
"color": "#f0f0f0"
}
},
{
"type": "RECTANGLE",
"style": {
"x": 190,
"y": 318,
"width": 170,
"height": 170,
"color": "#f0f0f0"
}
},
{
"type": "RECTANGLE",
"style": {
"x": 15,
"y": 493,
"width": 170,
"height": 170,
"color": "#f0f0f0"
}
},
{
"type": "RECTANGLE",
"style": {
"x": 190,
"y": 493,
"width": 170,
"height": 170,
"color": "#f0f0f0"
}
}
]
},
{
"name": "items",
"materials": [
{
"type": "IMAGE",
"style": {
"x": 15,
"y": 143,
"width": 170,
"height": 170,
"src": "https://img.alicdn.com/tfs/TB1u75srIVl614jSZKPXXaGjpXa-580-335.png",
"size": "contain",
"position": "top",
}
},
{
"type": "IMAGE",
"style": {
"x": 190,
"y": 143,
"width": 170,
"height": 170,
"src": "https://img.alicdn.com/tfs/TB1u75srIVl614jSZKPXXaGjpXa-580-335.png",
"size": "contain",
"position": "bottom",
}
},
{
"type": "IMAGE",
"style": {
"x": 15,
"y": 318,
"width": 170,
"height": 170,
"src": "https://img.alicdn.com/tfs/TB1rf72rggP7K4jSZFqXXamhVXa-352-614.png",
"size": "contain",
"position": "left",
}
},
{
"type": "IMAGE",
"style": {
"x": 190,
"y": 318,
"width": 170,
"height": 170,
"src": "https://img.alicdn.com/tfs/TB1rf72rggP7K4jSZFqXXamhVXa-352-614.png",
"size": "contain",
"position": "right",
}
},
{
"type": "IMAGE",
"style": {
"x": 15,
"y": 493,
"width": 170,
"height": 170,
"src": "https://img.alicdn.com/tfs/TB1rf72rggP7K4jSZFqXXamhVXa-352-614.png",
"size": "contain",
"position": "center",
}
},
{
"type": "IMAGE",
"style": {
"x": 190,
"y": 493,
"width": 170,
"height": 170,
"src": "https://img.alicdn.com/tfs/TB1u75srIVl614jSZKPXXaGjpXa-580-335.png",
"size": "contain",
"position": "center",
}
}
]
}
]
}
const engine = new Dev({
data: data,
});
engine.render(document.querySelector('#example'))
draw任务流：
概念： 多个 元件合并 成一个图层， 多个图层合并成 一张图片
- 元件（图片，文本，业务组件）
- 图层
- 图片
使用koa-compose函数，入参是单个绘制处理任务（包括图层、元素），将多个图层||元件合并成一个任务来处理
export function compose(middleware: Function[]): Function {
return function (context: any, next: Function): Promise<any> {
let index = -1;
return dispatch(0);
function dispatch(i: number): Promise<any> {
if (i <= index) {
return Promise.reject()
}
index = i;
let fn: Function = middleware[i];
if (i === middleware.length) {
fn = next;
}
if (!fn) {
return Promise.resolve();
}
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}