基于canvas实现合图引擎 设计思路

 合图引擎基于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)
      }
    }
  }

}