基于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'))

标签：canvas,img,style,height,width,引擎,思路,type,170
来源： https://www.cnblogs.com/breakdown/p/15086674.html