anywhere-paint is a library to create painting apps.
Sample is here!
npm install --save anywhere-paint
Create an AnywherePaint obj:
const container = document.getElementById('container'); //The aspect ratio of the container should be equal to the resolution.
const width = 600; //width resolution
const height = 400; //height resolution
const awPaint = new AnywherePaint(container, width, height);
now you can draw lines.
Create a ColorCircle obj:
const container = document.getElementById('cc-container'); //The aspect ratio of the container should be 1:1
awPaint.createColorCircle(container);
color is automatically picked when you draw lines.
awPaint.undo(): void;
awPaint.redo(): void;
This library supports layer. You can only draw on selected layer. Unique number is assigned to each layer.
awPaint.addLayer(layerNum?: undefined | number): number;
If no arguments are specified, a new layer is added at the top. Otherwise, a new layer is added on top of the layerNum. Returns unique number which is assigned to new layer.
awPaint.removeLayer(layerNum: number): number | null;
Remove specified layer. Returns newly selected layer number. If there is not any layers, this function returns null.
awPaint.renameLayer(layerNum: number, layerName: string): void;
You can assign layer name to each layer.
awPaint.getLayerNames(): Map<number, string>;
Returns Map<layerNum, layerName>.
awPaint.selectLayer(layerNum: number): void;
Select layer which you want to draw.
awPaint.getLayerImages(): Map<number, string>;
Returns Map<layerNum, DataURI>.
awPaint.getSortOrder(): number[];
Returns an array of layerNum sorted by layer overlap order.
awPaint.setSortOrder(sortOrder: number[]): boolean;
sortOrder is an array which includes layerNums.
Example ) [0, 2, 1]. At this time, 0 is the top and 1 is the buttom.
If argument is valid, layers are sorted by input.
Returns argument is valid or not.
awPaint.setColor(r: number, g: number, b: number): void;
Set line color by r (0-255), g (0-255), b (0-255).
awPaint.setLineWidth(px: number): void;
Set line width(px).
awPaint.getIntegratedImage(): string;
Returns DataURI with a layer-integrated image. (png)
awPaint.changeMode(style: "Pencil" | "Eraser" | "Fill"): void;
Change drawing mode. style is "Pencil", "Eraser" or "Fill".
awPaint.addEventListener(callback: (history: History) => void);
Add callback that will be called when canvas is edited. The parameter of callback is command object of canvas operation. Returns listenerID.
awPaint.removeEventListener(listener: number): void;
Remove eventListener.
awPaint.drawByHistory(history: History): void;
Operate canvas using history.
awPaint.selectingLayer
layerNum which is selecting.
Write this in tsconfig.json.
{
"compilerOptions": {
"moduleResolution": "node",
"esModuleInterop": true,
}
}
MIT