Skip a point if it's too close to the previous one

This does improve drawing quality a bit, but introduces more noticeable lag. The distance that defines is a point is too close or not can be configured using 'distanceThreshold' option.
szimek · Aug 20, 2017 · 88a9946 · 88a9946
1 parent 0c65cb3
commit 88a9946
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,10 @@
 
 ### master
 #### Bug Fixes
-*   Update demo to call `SignaturePad#clear` on window resize, to make sure that `SignaturePad#isEmpty` returns the correct value. Closes [#94](https://github.com/szimek/signature_pad/issues/94).
+*   Updated demo to call `SignaturePad#clear` on window resize, to make sure that `SignaturePad#isEmpty` returns the correct value. Closes [#94](https://github.com/szimek/signature_pad/issues/94).
+
+#### Features
+*   Added `minDistance` option to skip points that are too close to each other (in px). It improves drawing quality (especially when drawing slowly), but introduces small lag. The default value is set to `5`. To switch back to the old behavior, set it to `0`.
 
 ### 2.2.1
 #### Bug Fixes

diff --git a/example/js/signature_pad.js b/example/js/signature_pad.js
@@ -118,6 +118,7 @@ function SignaturePad(canvas, options) {
   this.minWidth = opts.minWidth || 0.5;
   this.maxWidth = opts.maxWidth || 2.5;
   this.throttle = 'throttle' in opts ? opts.throttle : 16; // in miliseconds
+  this.minDistance = opts.minDistance || 5;
 
   if (this.throttle) {
     this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
@@ -268,21 +269,27 @@ SignaturePad.prototype._strokeUpdate = function (event) {
   var y = event.clientY;
 
   var point = this._createPoint(x, y);
+  var lastPointGroup = this._data[this._data.length - 1];
+  var lastPoint = lastPointGroup && lastPointGroup[lastPointGroup.length - 1];
+  var isLastPointTooClose = lastPoint && point.distanceTo(lastPoint) < this.minDistance;
+
+  // Skip this point if it's too close to the previous one
+  if (!(lastPoint && isLastPointTooClose)) {
+    var _addPoint = this._addPoint(point),
+        curve = _addPoint.curve,
+        widths = _addPoint.widths;
+
+    if (curve && widths) {
+      this._drawCurve(curve, widths.start, widths.end);
+    }
 
-  var _addPoint = this._addPoint(point),
-      curve = _addPoint.curve,
-      widths = _addPoint.widths;
-
-  if (curve && widths) {
-    this._drawCurve(curve, widths.start, widths.end);
+    this._data[this._data.length - 1].push({
+      x: point.x,
+      y: point.y,
+      time: point.time,
+      color: this.penColor
+    });
   }
-
-  this._data[this._data.length - 1].push({
-    x: point.x,
-    y: point.y,
-    time: point.time,
-    color: this.penColor
-  });
 };
 
 SignaturePad.prototype._strokeEnd = function (event) {

diff --git a/src/signature_pad.js b/src/signature_pad.js
@@ -10,6 +10,7 @@ function SignaturePad(canvas, options) {
   this.minWidth = opts.minWidth || 0.5;
   this.maxWidth = opts.maxWidth || 2.5;
   this.throttle = 'throttle' in opts ? opts.throttle : 16; // in miliseconds
+  this.minDistance = opts.minDistance || 5;
 
   if (this.throttle) {
     this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
@@ -150,18 +151,25 @@ SignaturePad.prototype._strokeUpdate = function (event) {
   const y = event.clientY;
 
   const point = this._createPoint(x, y);
-  const { curve, widths } = this._addPoint(point);
+  const lastPointGroup = this._data[this._data.length - 1];
+  const lastPoint = lastPointGroup && lastPointGroup[lastPointGroup.length - 1];
+  const isLastPointTooClose = lastPoint && point.distanceTo(lastPoint) < this.minDistance;
 
-  if (curve && widths) {
-    this._drawCurve(curve, widths.start, widths.end);
-  }
+  // Skip this point if it's too close to the previous one
+  if (!(lastPoint && isLastPointTooClose)) {
+    const { curve, widths } = this._addPoint(point);
+
+    if (curve && widths) {
+      this._drawCurve(curve, widths.start, widths.end);
+    }
 
-  this._data[this._data.length - 1].push({
-    x: point.x,
-    y: point.y,
-    time: point.time,
-    color: this.penColor,
-  });
+    this._data[this._data.length - 1].push({
+      x: point.x,
+      y: point.y,
+      time: point.time,
+      color: this.penColor,
+    });
+  }
 };
 
 SignaturePad.prototype._strokeEnd = function (event) {