shibaobao/free-draw-ts

English | 简体中文

Free-Draw

Free draw with canvas! Rectangle, circle, ellipse and polygon. Support zoom and offset!

Installation

Using npm:

$ npm i -g npm
$ npm i free-draw

Usage

HTML:

<canvas id="canvas" width="800" height="600"></canvas>

JS:

<script>
import FreeDraw from 'free-draw'

const freeDraw = new FreeDraw({ canvas: document.getElementById('canvas') })
const rect = freeDraw.addShape({ id: 'rect-1', type: 'rect', startPoint: [50, 50], width: 100, height: 200 });

</script>

API Document

Class - FreeDraw(options)

Options {Object}:

• canvas: DOM Element required
• eventsCallBack: {Function} Events hook function
• eventsReceive: {Array} <mouseenter|mouseleave|mousemove|keydown|drag|doubleclick>
• Returns: FreeDraw {Object}

Example:

const freeDraw = new FreeDraw({
  canvas: document.getElementById('canvas'),
  eventsReceive: ['mouseenter', 'mouseleave', 'mousemove', 'keydown', 'drag', 'doubleclick'],
  eventsCallBack (event, key, eventType) => {
    console.log(event, key, eventType)
  }
})

Methods:

addShape(options): Add a shape to canvas

Options {Object}:

• id: