@idraw/renderer

Usage

Quick Start

npm i @idraw/renderer

import Renderer from '@idraw/renderer';

const renderer = new Renderer({
  width: 600,
  height: 400,
  contextWidth: 600,
  contextHeight: 400,
  devicePixelRatio: 1,
});

const canvas = document.querySelector('canvas');
renderer.render(canvas, {
  elements: [
    {
      name: "rect-001",
      x: 10,
      y: 10,
      w: 200,
      h: 100,
      type: "rect",
      detail: {
        bgColor: "#f0f0f0",
        borderRadius: 20,
        borderWidth: 10,
        borderColor: "#bd0b64",
      },
    },
  ]
})

Events

renderer.on('load', (e) => {
  // ...
})
renderer.on('loadComplete', (e) => {
  // ...
})

renderer.on('drawFrame', (e) => {
  // ...
})
renderer.on('drawFrameComplete', (e) => {
  // ...
})

Documents

• Documents | 中文文档
• Online Playground | 在线API示例