A simple selection of area in JavaScript
dist/
├── garea.min.js (UMD)
├── garea.common.js (CommonJS, default)
└── garea.esm.js (ES Module)
npm install garea.js
or
yarn add garea.js
In browser:
<script src="garea.min.js"></script>
new Core(idCanvas);
<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();
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'
});
- Type:
Number
- Default:
5
Description: Size of the points that will be created.
- Type:
Number
- Default:
30
Description: Starting margin of points if not entered.
- Type:
Number
- Default:
30
Description: Size of the connecting line between the points.
- Type:
String
- Default:
area
- Options:
- 'area'
- 'line'
Add a new draw
-
name
- Type:
String
- Type:
-
config
- Type:
Object
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
Get draw by name.
-
name
- Type:
String
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
const area = crop.getDraw('area');
Remove draw by name.
-
name
- Type:
String
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
crop.removeDraw('area');
Set area for edit layer
-
name
- Type:
String
- Type:
const crop = new Core('crop');
crop.addDraw('area', {});
crop.setEdit('area');
Return name for area.
const area = crop.getDraw('area');
area.getName(); // return 'area'
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)');
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);
Set disable draggable area.
-
state
- Type:
Boolean
- Type:
const area = crop.getDraw('area');
area.setDisable(true);
Return state draggable of area.
const area = crop.getDraw('area');
area.isDisable(); // default false
Return points for area.
const area = crop.getDraw('area');
area.getPoints(); // return [{ x, y }]
Set points for area;
-
points
- Type:
Array
- Type:
const area = crop.getDraw('area');
area.setPoints([{ x, y }]);
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: