Skip to content

Commit ce6330b

Browse files
YanYuanFEYanYuanFE
authored
Merge pull request #173 from leneti/master
Added a new feature
2 parents 991afbd + 5530e4d commit ce6330b

File tree

5 files changed

+81
-97
lines changed

5 files changed

+81
-97
lines changed

‎README.md

+12-10
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ import SignatureScreen from 'react-native-signature-canvas';
7676
| onDraw | `function` | callback function when drawing is enabled |
7777
| onErase | `function` | callback function when erasing is enabled |
7878
| onChangePenColor | `function` | callback function after changing the pen color |
79+
| onChangePenSize | `function` | callback function after changing the pen size
7980
|overlayHeight|`number`|height of the overlay image|
8081
|overlayWidth|`number`|width of the overlay image|
8182
|overlaySrc|`string`|overlay image source uri (url) _must be .png with a transparent background_
@@ -89,16 +90,17 @@ import SignatureScreen from 'react-native-signature-canvas';
8990

9091
---
9192

92-
| Function | Description |
93-
| :-------------------- | :------------------------------------------------------------------------------------------ |
94-
| clearSignature() | Clear the current signature |
95-
| changePenColor(color) | Change pen color |
96-
| draw() | Enable drawing signature |
97-
| erase() | Enable erasing signature |
98-
|getData()| Triggers the `onGetData` callback with a single `data` JSON string |
99-
| readSignature() | Reads the current signature on the canvas and triggers either the `onOK` or `onEmpty` callbacks |
100-
| undo() | Undo last stroke |
101-
| redo() | Redo last stroke |
93+
| Function | Description |
94+
| :-------------------- | :-----------------------------------------------------------------------------------------------|
95+
| clearSignature() | Clear the current signature |
96+
| changePenColor(color) | Change pen color |
97+
| changePenSize(minW, maxW) | Change pen size |
98+
| draw() | Enable drawing signature |
99+
| erase() | Enable erasing signature |
100+
| getData() | Triggers the `onGetData` callback with a single `data` JSON string |
101+
| readSignature() | Reads the current signature on the canvas and triggers either the `onOK` or `onEmpty` callbacks |
102+
| undo() | Undo last stroke |
103+
| redo() | Redo last stroke |
102104

103105
To call the methods use the `useRef` hook:
104106

‎h5/js/app.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -50,26 +50,28 @@ export default `
5050
window.ReactNativeWebView.postMessage("REDO");
5151
}
5252
53-
function changePenColor(color){
53+
function changePenColor(color) {
5454
signaturePad.penColor = color;
5555
window.ReactNativeWebView.postMessage("CHANGE_PEN");
5656
}
57+
58+
function changePenSize(minW, maxW) {
59+
signaturePad.minWidth = minW;
60+
signaturePad.maxWidth = maxW;
61+
window.ReactNativeWebView.postMessage("CHANGE_PEN_SIZE");
62+
}
5763
5864
function getData () {
5965
var data = signaturePad.toData();
6066
window.ReactNativeWebView.postMessage(JSON.stringify(data));
6167
}
6268
6369
function draw() {
64-
//signaturePad.minWidth= 0.5;
65-
//signaturePad.maxWidth= 2.5;
6670
signaturePad.draw();
6771
window.ReactNativeWebView.postMessage("DRAW");
6872
}
6973
7074
function erase() {
71-
//signaturePad.minWidth= 5;
72-
//signaturePad.maxWidth= 10;
7375
signaturePad.erase();
7476
window.ReactNativeWebView.postMessage("ERASE");
7577
}

‎h5/js/signature_pad.js

+48-79
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ export default `
193193
this.throttle
194194
))
195195
: SignaturePad.prototype._strokeUpdate;
196-
this.dotSize = options.dotSize || (this.minWidth + this.maxWidth) / 2;
196+
this.dotSize = options.dotSize || function dotSize() {return (this.minWidth + this.maxWidth) / 2;};
197197
this.penColor = options.penColor || "black";
198198
this.backgroundColor = options.backgroundColor || "rgba(255,255,255,0)";
199199
this.onBegin = options.onBegin;
@@ -270,14 +270,8 @@ export default `
270270
this._isEmpty = false;
271271
if (!this._startingSignature) this._startingSignature = dataUrl;
272272
};
273-
SignaturePad.prototype.toDataURL = function (type, encoderOptions) {
274-
if (type === void 0) { type = 'image/png'; }
275-
switch (type) {
276-
case 'image/svg+xml':
277-
return this._toSVG();
278-
default:
279-
return this.canvas.toDataURL(type, encoderOptions);
280-
}
273+
SignaturePad.prototype.toDataURL = function (type = "image/png", encoderOptions) {
274+
return type === "image/svg+xml" ? this._toSVG() : this.canvas.toDataURL(type, encoderOptions);
281275
};
282276
SignaturePad.prototype.on = function () {
283277
this.canvas.style.touchAction = 'none';
@@ -315,7 +309,7 @@ export default `
315309
this._fromData(
316310
pointGroups,
317311
({ color, curve }) => _this._drawCurve({ color, curve }),
318-
({ color, point }) => _this._drawDot({ color, point })
312+
({ color, point, dotSize }) => _this._drawDot({ color, point, dotSize })
319313
);
320314
this._data = pointGroups;
321315
}
@@ -326,10 +320,10 @@ export default `
326320
SignaturePad.prototype._strokeBegin = function (event) {
327321
var newPointGroup = {
328322
color: this.penColor,
329-
dotSize: this.dotSize, // Enhance undo
330-
minWidth: this.minWidth, // Enhance undo
331-
maxWidth: this.maxWidth, // Enhance undo
332-
compositeOperation: this._ctx.globalCompositeOperation, // Fix undo problem
323+
dotSize: typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize,
324+
minWidth: this.minWidth,
325+
maxWidth: this.maxWidth,
326+
compositeOperation: this._ctx.globalCompositeOperation,
333327
points: [],
334328
};
335329
if (typeof this.onBegin === "function") {
@@ -392,7 +386,7 @@ export default `
392386
SignaturePad.prototype._reset = function () {
393387
this._lastPoints = [];
394388
this._lastVelocity = 0;
395-
this._lastWidth = (this.minWidth + this.maxWidth) / 2;
389+
this._lastWidth = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
396390
this._ctx.fillStyle = this.penColor;
397391
};
398392
SignaturePad.prototype._createPoint = function (x, y) {
@@ -403,24 +397,24 @@ export default `
403397
return new Point(x - rect.left, y - rect.top, new Date().getTime());
404398
}
405399
};
406-
SignaturePad.prototype._addPoint = function (point) {
400+
SignaturePad.prototype._addPoint = function (point, minWidth = this.minWidth, maxWidth = this.maxWidth) {
407401
var _lastPoints = this._lastPoints;
408402
_lastPoints.push(point);
409403
if (_lastPoints.length > 2) {
410404
if (_lastPoints.length === 3) {
411405
_lastPoints.unshift(_lastPoints[0]);
412406
}
413-
var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
407+
var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], minWidth, maxWidth);
414408
var curve = Bezier.fromPoints(_lastPoints, widths);
415409
_lastPoints.shift();
416410
return curve;
417411
}
418412
return null;
419413
};
420-
SignaturePad.prototype._calculateCurveWidths = function (startPoint, endPoint) {
414+
SignaturePad.prototype._calculateCurveWidths = function (startPoint, endPoint, minWidth = this.minWidth, maxWidth = this.maxWidth) {
421415
var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
422416
(1 - this.velocityFilterWeight) * this._lastVelocity;
423-
var newWidth = this._strokeWidth(velocity);
417+
var newWidth = this._strokeWidth(velocity, minWidth, maxWidth);
424418
var widths = {
425419
end: newWidth,
426420
start: this._lastWidth
@@ -429,8 +423,8 @@ export default `
429423
this._lastWidth = newWidth;
430424
return widths;
431425
};
432-
SignaturePad.prototype._strokeWidth = function (velocity) {
433-
return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
426+
SignaturePad.prototype._strokeWidth = function (velocity, minWidth = this.minWidth, maxWidth = this.maxWidth) {
427+
return Math.max(maxWidth / (velocity + 1), minWidth);
434428
};
435429
SignaturePad.prototype._drawCurveSegment = function (x, y, width) {
436430
var ctx = this._ctx;
@@ -467,15 +461,9 @@ export default `
467461
ctx.fill();
468462
};
469463
SignaturePad.prototype._drawDot = function (_a) {
470-
var color = _a.color,
471-
point = _a.point;
464+
var color = _a.color, point = _a.point;
472465
var ctx = this._ctx;
473-
//var width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
474-
var width = typeof _a.dotSize
475-
? _a.dotSize
476-
: typeof this.dotSize === "function"
477-
? this.dotSize()
478-
: this.dotSize; // Enhance undo
466+
var width = _a.dotSize ? _a.dotSize : typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
479467
ctx.beginPath();
480468
this._drawCurveSegment(point.x, point.y, width);
481469
ctx.closePath();
@@ -485,29 +473,20 @@ export default `
485473
SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
486474
for (var i = 0; i < pointGroups.length; i++) {
487475
var group = pointGroups[i];
488-
var color = group.color,
489-
points = group.points;
490-
var minWidth = group.minWidth,
491-
maxWidth = group.maxWidth; // Enhance undo
492-
var compositeOperation = group.compositeOperation; // Fix undo problem
476+
var color = group.color, points = group.points;
477+
var minWidth = group.minWidth, maxWidth = group.maxWidth, dotSize = group.dotSize;
478+
var compositeOperation = group.compositeOperation;
493479
this._reset();
480+
this._lastWidth = dotSize;
494481
if (points.length > 1) {
495482
for (var j = 0; j < points.length; j++) {
496-
var basicPoint = points[j];
497-
var point = new Point(
498-
basicPoint.x,
499-
basicPoint.y,
500-
basicPoint.time
501-
);
502-
// this.penColor = color;
503-
this.minWidth = minWidth; // Enhance undo
504-
this.maxWidth = maxWidth; // Enhance undo
505-
this._ctx.globalCompositeOperation = compositeOperation; // Fix undo problem
506-
var curve = this._addPoint(point);
483+
var point = new Point(points[j].x, points[j].y, points[j].time);
484+
this._ctx.globalCompositeOperation = compositeOperation;
485+
var curve = this._addPoint(point, minWidth, maxWidth);
507486
if (curve) drawCurve({ color, curve });
508-
}
509-
} else drawDot({ color, point: points[0] });
510-
}
487+
};
488+
} else drawDot({ color, point: points[0], dotSize });
489+
};
511490
this._ctx.globalCompositeOperation = this._isDrawing ? "source-over" : "destination-out";
512491
};
513492
SignaturePad.prototype._toSVG = function () {
@@ -523,38 +502,28 @@ export default `
523502
svg.setAttribute('height', this.canvas.height.toString());
524503
this._fromData(pointGroups, function (_a) {
525504
var color = _a.color, curve = _a.curve;
526-
var path = document.createElement('path');
527-
if (!isNaN(curve.control1.x) &&
528-
!isNaN(curve.control1.y) &&
529-
!isNaN(curve.control2.x) &&
530-
!isNaN(curve.control2.y)) {
531-
var attr = "M " + curve.startPoint.x.toFixed(3) + "," + curve.startPoint.y.toFixed(3) + " " +
532-
("C " + curve.control1.x.toFixed(3) + "," + curve.control1.y.toFixed(3) + " ") +
533-
(curve.control2.x.toFixed(3) + "," + curve.control2.y.toFixed(3) + " ") +
534-
(curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
535-
path.setAttribute('d', attr);
536-
path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
537-
path.setAttribute('stroke', color);
538-
path.setAttribute('fill', 'none');
539-
path.setAttribute('stroke-linecap', 'round');
540-
svg.appendChild(path);
505+
var path = document.createElement("path");
506+
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
507+
var attr = "M " + curve.startPoint.x.toFixed(3) + "," + curve.startPoint.y.toFixed(3) + " " + ("C " + curve.control1.x.toFixed(3) + "," + curve.control1.y.toFixed(3) + " ") + (curve.control2.x.toFixed(3) + "," + curve.control2.y.toFixed(3) + " ") + (curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
508+
path.setAttribute("d", attr);
509+
path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
510+
path.setAttribute("stroke", color);
511+
path.setAttribute("fill", "none");
512+
path.setAttribute("stroke-linecap", "round");
513+
svg.appendChild(path);
541514
}
542-
}, function (_a) {
543-
var color = _a.color,
544-
point = _a.point;
545-
var circle = document.createElement("circle");
546-
// var dotSize = typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
547-
var dotSize = typeof _a.dotSize
548-
? _a.dotSize
549-
: typeof _this.dotSize === "function"
550-
? _this.dotSize()
551-
: _this.dotSize; // Enhance undo
552-
circle.setAttribute("r", dotSize.toString());
553-
circle.setAttribute("cx", point.x.toString());
554-
circle.setAttribute("cy", point.y.toString());
555-
circle.setAttribute("fill", color);
556-
svg.appendChild(circle);
557-
});
515+
},
516+
function (_a) {
517+
var color = _a.color,point = _a.point;
518+
var circle = document.createElement("circle");
519+
var dotSize = _a.dotSize ? _a.dotSize : typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
520+
circle.setAttribute("r", dotSize.toString());
521+
circle.setAttribute("cx", point.x.toString());
522+
circle.setAttribute("cy", point.y.toString());
523+
circle.setAttribute("fill", color);
524+
svg.appendChild(circle);
525+
}
526+
);
558527
var prefix = 'data:image/svg+xml;base64,';
559528
var header = '<svg' +
560529
' xmlns="http://www.w3.org/2000/svg"' +

‎index.d.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ declare module "react-native-signature-canvas" {
44

55
type ImageType = "image/png" | "image/jpeg" | "image/svg+xml";
66

7-
type DataURL = "Base64";
7+
type DataURL = "Base64" | string;
88

99
type ForwardRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
1010

@@ -32,7 +32,8 @@ declare module "react-native-signature-canvas" {
3232
onDraw?: () => void;
3333
onErase?: () => void;
3434
onGetData?: () => void;
35-
onChangePenColo?: () => void;
35+
onChangePenColor?: () => void;
36+
onChangePenSize?: () => void;
3637
onBegin?: () => void;
3738
onEnd?: () => void;
3839
overlayHeight?: number;
@@ -49,6 +50,7 @@ declare module "react-native-signature-canvas" {
4950

5051
export type SignatureViewRef = {
5152
changePenColor: (color: string) => void;
53+
changePenSize: (minW: number, maxW: number) => void;
5254
clearSignature: () => void;
5355
cropWhitespace: (url: string) => void;
5456
draw: () => void;

‎index.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const SignatureView = forwardRef(({
2828
customHtml = null,
2929
dataURL = "",
3030
descriptionText = "Sign above",
31-
dotSize = 0,
31+
dotSize = null,
3232
imageType = "",
3333
minWidth = 0.5,
3434
maxWidth = 2.5,
@@ -41,6 +41,7 @@ const SignatureView = forwardRef(({
4141
onErase=()=>{},
4242
onGetData=()=>{},
4343
onChangePenColor=()=>{},
44+
onChangePenSize=()=>{},
4445
onBegin = () => {},
4546
onEnd = () => {},
4647
overlayHeight = 0,
@@ -123,6 +124,9 @@ const SignatureView = forwardRef(({
123124
case "CHANGE_PEN":
124125
onChangePenColor();
125126
break;
127+
case "CHANGE_PEN_SIZE":
128+
onChangePenSize();
129+
break;
126130
default:
127131
isJson(e.nativeEvent.data)? onGetData(e.nativeEvent.data): onOK(e.nativeEvent.data);
128132
}
@@ -164,6 +168,11 @@ const SignatureView = forwardRef(({
164168
webViewRef.current.injectJavaScript("changePenColor('"+color+"');true;");
165169
}
166170
},
171+
changePenSize: (minW, maxW) => {
172+
if (webViewRef.current) {
173+
webViewRef.current.injectJavaScript("changePenSize("+minW+','+maxW+");true;");
174+
}
175+
},
167176
getData: () => {
168177
if (webViewRef.current) {
169178
webViewRef.current.injectJavaScript("getData();true;");

0 commit comments

Comments
 (0)