From 6d9f161c5fc0226ee3d0d41a07cdcd6c00688cb3 Mon Sep 17 00:00:00 2001 From: opherv Date: Wed, 15 Jun 2016 18:33:08 +0300 Subject: [PATCH] implemented pathRecognizer --- src/expose.js | 1 + src/recognizers/path.js | 168 +++++++++++++++++++++++++++++++ tests/manual/pathRecognizer.html | 120 ++++++++++++++++++++++ 3 files changed, 289 insertions(+) create mode 100644 src/recognizers/path.js create mode 100644 tests/manual/pathRecognizer.html diff --git a/src/expose.js b/src/expose.js index 1fe14db25..ac5d44269 100644 --- a/src/expose.js +++ b/src/expose.js @@ -39,6 +39,7 @@ assign(Hammer, { Pinch: PinchRecognizer, Rotate: RotateRecognizer, Press: PressRecognizer, + Path: PathRecognizer, on: addEventListeners, off: removeEventListeners, diff --git a/src/recognizers/path.js b/src/recognizers/path.js new file mode 100644 index 000000000..75ebc6698 --- /dev/null +++ b/src/recognizers/path.js @@ -0,0 +1,168 @@ +/** + * Path + * Recognized when the pointer is down and moves following a path. + * @constructor + * @extends AttrRecognizer + */ +function PathRecognizer() { + AttrRecognizer.apply(this, arguments); + + this.pathTotalLength = this.options.pathElement.getTotalLength(); + this.segmentLength = (this.pathTotalLength / this.options.resolution); + this.currentSegmentIndex = 0; //which segment should we match against next + this.pX = null; + this.pY = null; + + this.state = STATE_BEGAN; + +} + +inherit(PathRecognizer, AttrRecognizer, { + /** + * @namespace + * @memberof PathRecognizer + */ + defaults: { + event: 'path', + threshold: 5, + pointers: 1, + resolution: 10, //path will be quantizied to this amount of segments + maxDistanceFromSegment: 30 + }, + + attrTest: function(input) { + return AttrRecognizer.prototype.attrTest.call(this, input); + }, + + emit: function(input) { + this.pX = input.deltaX; + this.pY = input.deltaY; + + this._super.emit.call(this, input); + }, + + /** + * Process the input and return the state for the recognizer + * @memberof AttrRecognizer + * @param {Object} input + * @returns {*} State + */ + process: function(input) { + if (!this.attrTest(input)) { + return STATE_FAILED; + } + + var svgCoords = getSvgLocalPoint(this.options.svgElement, input.center.x, input.center.y); + + input.localX = svgCoords.x; + input.localY = svgCoords.y; + + var closestPoint = findClosestPoint(this.options.pathElement, svgCoords); + this.pathPercent = input.pathPercent = closestPoint.pathPercent; + this.pathLength = input.pathLength = closestPoint.pathLength; + + //veer too far from path - fail + if (closestPoint.distance > this.options.maxDistanceFromSegment) { + input.pathComplete = false; + return STATE_ENDED; + } + else if (input.distance === 0 && this.state != STATE_BEGAN) { + return STATE_BEGAN; + } + else if (this.currentSegmentIndex == this.options.resolution && (100 - this.pathPercent) < 0.9) { + input.pathComplete = true; + return STATE_RECOGNIZED; + } + else if (this.pathPercent / 100 > (this.currentSegmentIndex) * this.segmentLength / this.pathTotalLength && + this.pathPercent / 100 < (this.currentSegmentIndex + 1) * this.segmentLength / this.pathTotalLength) { + this.currentSegmentIndex++; + } + //start drawing path from middle or jump ahead - fail + else if (this.pathPercent / 100 > (this.currentSegmentIndex + 1) * this.segmentLength / this.pathTotalLength) { + input.pathComplete = false; + return STATE_ENDED; + } + //stop input before reaching end - fail + else if (input.eventType == INPUT_END) { + input.pathComplete = false; + return STATE_ENDED; + } + + return STATE_CHANGED; + + } +}); + +// var distance = function(p1, p2) { +// return Math.sqrt((p2.x -= p1.x) * p2.x + (p2.y -= p1.y) * p2.y); +// }; + +//adapted from https://bl.ocks.org/mbostock/8027637 +function findClosestPoint(pathNode, point) { + var pathLength = pathNode.getTotalLength(), + precision = 8, + best, + bestLength, + bestDistance = Infinity; + + // linear scan for coarse approximation + for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) { + if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) { + best = scan, bestLength = scanLength, bestDistance = scanDistance; + } + } + + // binary search for precise estimate + precision /= 2; + while (precision > 0.5) { + var before, + after, + beforeLength, + afterLength, + beforeDistance, + afterDistance; + if ((beforeLength = bestLength - precision) >= 0 && + (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) { + best = before, bestLength = beforeLength, bestDistance = beforeDistance; + } else if ((afterLength = bestLength + precision) <= pathLength && + (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) { + best = after, bestLength = afterLength, bestDistance = afterDistance; + } else { + precision /= 2; + } + } + + best = { + x: best.x, + y: best.y, + distance: Math.sqrt(bestDistance), + pathLength: bestLength, + pathPercent: (bestLength / pathLength * 100 * 100) / 100 + }; + + return best; + + function distance2(p) { + var dx = p.x - point.x, + dy = p.y - point.y; + return dx * dx + dy * dy; + } +} + +// Get point in global SVG space +var getSvgLocalPoint = (function() { + var pt = null; + + return function(svg, x, y) { + + if (pt == null) { + pt = svg.createSVGPoint(); + } + + pt.x = x; + pt.y = y; + return pt.matrixTransform(svg.getScreenCTM().inverse()); + + }; + + })(); diff --git a/tests/manual/pathRecognizer.html b/tests/manual/pathRecognizer.html new file mode 100644 index 000000000..9ff033b61 --- /dev/null +++ b/tests/manual/pathRecognizer.html @@ -0,0 +1,120 @@ + + + + + + + Hammer.js + + + + +
+ +
+
+ + + + +
+
+ + 

+
+    

+
+

+
+
+
+
+