fd
free-draw
npm i free-draw
fd

free-draw

Easy draw with canvas

by Stone Shi

1.1.15 (see all)License:ISCTypeScript:Not Found
npm i free-draw
Readme

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

Downloads/wk

1

GitHub Stars

10

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

0

OPEN PRs

17
VersionTagPublished
1.1.15
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate