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>

• Returns: FreeDraw {Object}

• Usage:

const freeDraw = new FreeDraw({ canvas: document.getElementById('canvas') })

Object - freeDraw

• Attributes
  • canvas: DOM Element required
  • eventsCallBack: {Function} Events hook function
  • eventsReceive: {Array} <mouseenter|mouseleave|mousemove|keydown|drag>
  • model: {String} Current model <view|edit>
  • editingId: {String} Current editing shape id
  • shapeInCanvas: {Object} Shapes in cavas