标签：canvas img style height width 引擎 思路 type 170

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。