• 周四. 12月 1st, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

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

admin

11月 28, 2021

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

}

  

         

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注