A simple selection of area in JavaScript

Table of contents

• Main
• Getting started
• Options
• Methods
• Events
• Development
• License

Main

dist/
├── garea.min.js    (UMD)
├── garea.common.js (CommonJS, default)
└── garea.esm.js    (ES Module)

Getting started

Installation

npm install garea.js

or

yarn add garea.js

In browser:

<script src="garea.min.js"></script>

Usage

Syntax

new Core(idCanvas);

Example

<div style="position: relative">
    <img id="image" src="image.jpg" alt="image">
    <canvas id="crop" width="600" height="400"></canvas>
</div>

#image {
    width: 600px;
    height: 400px;
    user-select: none;
    position: absolute;
}

#crop {
    z-index: 9;
    position: absolute;
}

With js example:

import { Core as Manager } from 'garea.js';

const manager = new Manager('crop');
manager.addDraw('area');
const area = manager.getDraw('area');
area.onListener('onchange', points => {
    console.log(points);
});
manager.setEdit('area');
manager.create();

Options

You may set garea options with crop.addDraw(name, config). If you want to change the global default options, You may use draw.config = config.

Exemple:

const crop = new Core('crop');
crop.addDraw('area', {
    radius: 6,
    margin: 20,
    stroke: 5,
    type: 'area'
});

radius

• Type: Number
• Default: 5

Description: Size of the points that will be created.

margin

• Type: Number
• Default: 30

Description: Starting margin of points if not entered.

stroke

• Type: Number
• Default: 30

Description: Size of the connecting line between the points.

type

• Type: String
• Default: area
• Options:
  • 'area'
  • 'line'

Methods

Methods for core

addDraw(name, config): void

Add a new draw

• name
  • Type: String
• config
  • Type: Object

const crop = new Core('crop');
crop.addDraw('area', {});

getDraw(name): Draw

Get draw by name.

• name
  • Type: String

const crop = new Core('crop');
crop.addDraw('area', {});
const area = crop.getDraw('area');

removeDraw(name): void

Remove draw by name.

• name
  • Type: String

const crop = new Core('crop');
crop.addDraw('area', {});
crop.removeDraw('area');

setEdit(name): void

Set area for edit layer

• name
  • Type: String

const crop = new Core('crop');
crop.addDraw('area', {});
crop.setEdit('area');

Methods for draw

getName(): string

Return name for area.

const area = crop.getDraw('area');
area.getName(); // return 'area'

setColor(key, value): Draw

Change color

• key:
  • Type: String'
  • Options:
    • 'area'
    • 'points'
    • 'stroke'
    • 'background'
• value
  • Type: String

const area = crop.getDraw('area');
area.setColor('area', 'rgba(47, 175, 255, .5)');

setConfig(key, value): Draw

Set config for area.

• key
  • Type: Object
  • Options:
    • 'radius'
    • 'margin'
    • 'stroke'
• value
  • Type: Number

const area = crop.getDraw('area');
area.setConfig('radius', 6);

setDisable(state): Draw

Set disable draggable area.

• state
  • Type: Boolean

const area = crop.getDraw('area');
area.setDisable(true);

isDisabled(): boolean

Return state draggable of area.

const area = crop.getDraw('area');
area.isDisable(); // default false

getPoints(): Array

Return points for area.

const area = crop.getDraw('area');
area.getPoints(); // return [{ x, y }]

setPoints(points): Draw

Set points for area;

• points
  • Type: Array

const area = crop.getDraw('area');
area.setPoints([{ x, y }]);

Events

onListener(event, callback)

Listen to the actions of the area.

const area = crop.getDraw('area');
area.onListener('onchange', () => {});

• events:
  • Type: String'
  • Options:
    • 'onchange': when the value of some of the points changes
    • 'onmousedown': when you click on one of the points
    • 'onmouseup': when you release the clicked point

Development

License

MIT © Giovane Santos