介绍

iDraw.js 是什么

iDraw.js 是基于浏览器中 Canvas API 的绘图能力实现的一套画图框架。

可以直接由数据驱动去渲染图画的渲染，同时能可视化操控 图画元素 的位置、形状和布局等信息。

iDraw.js 目前基于 MIT 开源协议托管在GitHub 和 NPM，所有使用者就都可以免费地使用在自己的项目中。

起步使用

npm install idraw

import { iDraw } from 'idraw';
const data = {
  elements: [
    {
      name: 'rect-001',
      x: 160,
      y: 80,
      w: 200,
      h: 200,
      type: 'text',
      detail: {
        text: 'Hello World',
        color: '#3f51b5',
        fontSize: 60,
        textAlign: 'center',
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#3f51b5'
      }
    }
  ]
};

const app = document.querySelector('#app');
const idraw = new iDraw(app, {
  width: 600,
  height: 400,
  devicePixelRatio: 2
});
idraw.setData(data);