Atelier 🎨
Expandable drawing component for React built by Cobalt, Inc.
:rocket: Getting started
npm install @cobaltinc/atelier
import React from 'react'
import { Atelier } from '@cobaltinc/atelier'
<Atelier />
Demo page: https://cobaltinc.github.io/atelier
Props
Prop | Description | Default |
---|
command | Set the name of registered plugin | pen |
color | Set the color of the line | #000000 |
lineWidth | Set the width of the line | 2 |
width | Set the width of the DOM | 800 |
height | Set the height of the DOM | 600 |
canvasWidth | Set the width of the canvas | |
canvasHeight | Set the height of the canvas | |
enableDraw | Set to true or false to enable or disable draw the canvas | true |
enablePressure | Set to true or false to enable or disable pressure the canvas | false |
plugins | Register the plugins to use | [PenPlugin] |
style | Add inline styles to the root element | |
className | Add className to the root element | |
onChange(e: AtelierChangeEvent) | Fired when an alteration to canvas is commited | |
Instance Methods
Use ref
to call instance methods. See the demo page for an example of this.
Prop | Description |
---|
draw(e: DrawingInterface) | Draw programmatically on the canvas |
clear() | Erase everything on the canvas |
🖋️ Default Plugins
PenPlugin | BrushPlugin (Support pressure) | ErasePlugin |
---|
| | |
HighlighterPlugin | LaserPlugin |
---|
| |
import React from 'react'
import {
Atelier,
PenPlugin,
BrushPlugin,
ErasePlugin,
HighlighterPlugin,
LaserPlugin
} from '@cobaltinc/atelier'
<Atelier plugins={[PenPlugin, BrushPlugin, ErasePlugin, HighlighterPlugin, LaserPlugin]} />
🖌️ Custom Plugin
If you want new plugin, you can make easily.
class DashPlugin extends Plugin {
name: string = 'dash';
prevX: number;
prevY: number;
draw(data: DrawingInterface) {
super.draw(data);
const { x, y, state } = data;
const context = this.canvas?.getContext('2d');
context.setLineDash([5, 30]);
const prevX = this.prevX || x;
const prevY = this.prevY || y;
if (state === 'draw-started' || state === 'drawing') {
context.beginPath();
context.moveTo(prevX, prevY);
context.lineTo(x, y);
context.stroke();
context.closePath();
Object.assign(this, {
lastX: x,
lastY: y,
});
}
}
}
<Atelier command="dash" plugins={[DashPlugin]} />
And the result:
:page_facing_up: License
Atelier is made available under the MIT License.