garea.js v1.0.3
A simple selection of area in JavaScript
Table of contents
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
- Type:
- config
- Type:
Object
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
getDraw(name): Draw
Get draw by name.
- name
- Type:
String
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
const area = crop.getDraw('area');
removeDraw(name): void
Remove draw by name.
- name
- Type:
String
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
crop.removeDraw('area');
setEdit(name): void
Set area for edit layer
- name
- Type:
String
- Type:
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'
- Type:
- value
- Type:
String
- Type:
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'
- Type:
- value
- Type:
Number
- Type:
const area = crop.getDraw('area');
area.setConfig('radius', 6);
setDisable(state): Draw
Set disable draggable area.
- state
- Type:
Boolean
- Type:
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
- Type:
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
- Type:
Development
License
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago