UNPKG

3.79 kBTypeScriptView Raw
1/**
2 * The main idea and some parts of the code (e.g. drawing variable width Bézier curve) are taken from:
3 * http://corner.squareup.com/2012/07/smoother-signatures.html
4 *
5 * Implementation of interpolation using cubic Bézier curves is taken from:
6 * https://web.archive.org/web/20160323213433/http://www.benknowscode.com/2012/09/path-interpolation-using-cubic-bezier_9742.html
7 *
8 * Algorithm for approximated length of a Bézier curve is taken from:
9 * http://www.lemoda.net/maths/bezier-length/index.html
10 */
11import { BasicPoint } from './point';
12import { SignatureEventTarget } from './signature_event_target';
13export interface SignatureEvent {
14 event: MouseEvent | TouchEvent | PointerEvent;
15 type: string;
16 x: number;
17 y: number;
18 pressure: number;
19}
20export interface FromDataOptions {
21 clear?: boolean;
22}
23export interface ToSVGOptions {
24 includeBackgroundColor?: boolean;
25}
26export interface PointGroupOptions {
27 dotSize: number;
28 minWidth: number;
29 maxWidth: number;
30 penColor: string;
31 velocityFilterWeight: number;
32 /**
33 * This is the globalCompositeOperation for the line.
34 * *default: 'source-over'*
35 * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
36 */
37 compositeOperation: GlobalCompositeOperation;
38}
39export interface Options extends Partial<PointGroupOptions> {
40 minDistance?: number;
41 backgroundColor?: string;
42 throttle?: number;
43 canvasContextOptions?: CanvasRenderingContext2DSettings;
44}
45export interface PointGroup extends PointGroupOptions {
46 points: BasicPoint[];
47}
48export default class SignaturePad extends SignatureEventTarget {
49 private canvas;
50 dotSize: number;
51 minWidth: number;
52 maxWidth: number;
53 penColor: string;
54 minDistance: number;
55 velocityFilterWeight: number;
56 compositeOperation: GlobalCompositeOperation;
57 backgroundColor: string;
58 throttle: number;
59 canvasContextOptions: CanvasRenderingContext2DSettings;
60 private _ctx;
61 private _drawingStroke;
62 private _isEmpty;
63 private _lastPoints;
64 private _data;
65 private _lastVelocity;
66 private _lastWidth;
67 private _strokeMoveUpdate;
68 constructor(canvas: HTMLCanvasElement, options?: Options);
69 clear(): void;
70 fromDataURL(dataUrl: string, options?: {
71 ratio?: number;
72 width?: number;
73 height?: number;
74 xOffset?: number;
75 yOffset?: number;
76 }): Promise<void>;
77 toDataURL(type: 'image/svg+xml', encoderOptions?: ToSVGOptions): string;
78 toDataURL(type?: string, encoderOptions?: number): string;
79 on(): void;
80 off(): void;
81 private _getListenerFunctions;
82 private _removeMoveUpEventListeners;
83 isEmpty(): boolean;
84 fromData(pointGroups: PointGroup[], { clear }?: FromDataOptions): void;
85 toData(): PointGroup[];
86 _isLeftButtonPressed(event: MouseEvent, only?: boolean): boolean;
87 private _pointerEventToSignatureEvent;
88 private _touchEventToSignatureEvent;
89 private _handleMouseDown;
90 private _handleMouseMove;
91 private _handleMouseUp;
92 private _handleTouchStart;
93 private _handleTouchMove;
94 private _handleTouchEnd;
95 private _handlePointerDown;
96 private _handlePointerMove;
97 private _handlePointerUp;
98 private _getPointGroupOptions;
99 private _strokeBegin;
100 private _strokeUpdate;
101 private _strokeEnd;
102 private _handlePointerEvents;
103 private _handleMouseEvents;
104 private _handleTouchEvents;
105 private _reset;
106 private _createPoint;
107 private _addPoint;
108 private _calculateCurveWidths;
109 private _strokeWidth;
110 private _drawCurveSegment;
111 private _drawCurve;
112 private _drawDot;
113 private _fromData;
114 toSVG({ includeBackgroundColor }?: ToSVGOptions): string;
115}