/free-draw

Easy draw with canvas

Primary LanguageJavaScriptMIT LicenseMIT

English | 简体中文

Free-Draw

Progress Build Status npm npm npm

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