add docs, change tests

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Added
+
+* new methods `path.getLength()` and `path.getPointAtLength(val)`
+
 ## [2.2.2][2018-08-21]
 
 ### Changed

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.2.2
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Tue Aug 21 2018
+ * Date: Thu Aug 30 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -15287,7 +15287,7 @@
       return this.textWidth;
     },
     /**
-     * get text height
+     * get height of one line text
      * @method
      * @memberof Konva.Text.prototype
      * @returns {Number}
@@ -16635,8 +16635,16 @@
       this.className = 'Path';
 
       this.dataArray = Konva.Path.parsePathData(this.getData());
+      this.pathLength = 0;
+      for (var i = 0; i < this.dataArray.length; ++i) {
+        this.pathLength += this.dataArray[i].pathLength;
+      }
       this.on('dataChange.konva', function() {
         that.dataArray = Konva.Path.parsePathData(this.getData());
+        this.pathLength = 0;
+        for (var i = 0; i < this.dataArray.length; ++i) {
+          this.pathLength += this.dataArray[i].pathLength;
+        }
       });
 
       this.sceneFunc(this._sceneFunc);
@@ -16717,6 +16725,103 @@
         width: Math.round(maxX - minX),
         height: Math.round(maxY - minY)
       };
+    },
+    /**
+     * Return length of the path.
+     * @method
+     * @memberof Konva.Path.prototype
+     * @returns {Number} length
+     * @example
+     * var length = path.getLength();
+     */
+    getLength: function() {
+      return this.pathLength;
+    },
+    /**
+     * Get point on path at specific length of the path
+     * @method
+     * @memberof Konva.Path.prototype
+     * @param {Number} length length
+     * @returns {Object} point {x,y} point
+     * @example
+     * var point = path.getPointAtLength(10);
+     */
+    getPointAtLength: function(length) {
+      var point,
+        i = 0,
+        ii = this.dataArray.length;
+
+      if (!ii) {
+        return null;
+      }
+
+      while (i < ii && length > this.dataArray[i].pathLength) {
+        length -= this.dataArray[i].pathLength;
+        ++i;
+      }
+
+      if (i === ii) {
+        point = this.dataArray[i - 1].points.slice(-2);
+        return {
+          x: point[0],
+          y: point[1]
+        };
+      }
+
+      if (length < 0.01) {
+        point = this.dataArray[i].points.slice(0, 2);
+        return {
+          x: point[0],
+          y: point[1]
+        };
+      }
+
+      var cp = this.dataArray[i];
+      var p = cp.points;
+      switch (cp.command) {
+        case 'L':
+          return Konva.Path.getPointOnLine(
+            length,
+            cp.start.x,
+            cp.start.y,
+            p[0],
+            p[1]
+          );
+        case 'C':
+          return Konva.Path.getPointOnCubicBezier(
+            length / cp.pathLength,
+            cp.start.x,
+            cp.start.y,
+            p[0],
+            p[1],
+            p[2],
+            p[3],
+            p[4],
+            p[5]
+          );
+        case 'Q':
+          return Konva.Path.getPointOnQuadraticBezier(
+            length / cp.pathLength,
+            cp.start.x,
+            cp.start.y,
+            p[0],
+            p[1],
+            p[2],
+            p[3]
+          );
+        case 'A':
+          var cx = p[0],
+            cy = p[1],
+            rx = p[2],
+            ry = p[3],
+            theta = p[4],
+            dTheta = p[5],
+            psi = p[6];
+          theta += dTheta * length / cp.pathLength;
+          return Konva.Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
+      }
+
+      return null;
     }
   };
   Konva.Util.extend(Konva.Path, Konva.Shape);

src/shapes/Path.js

@@ -125,11 +125,30 @@
         height: Math.round(maxY - minY)
       };
     },
-    getLength: function () {
+    /**
+     * Return length of the path.
+     * @method
+     * @memberof Konva.Path.prototype
+     * @returns {Number} length
+     * @example
+     * var length = path.getLength();
+     */
+    getLength: function() {
       return this.pathLength;
     },
-    getPointAtLength: function (length) {
+    /**
-      var point, i = 0, ii = this.dataArray.length;
+     * Get point on path at specific length of the path
+     * @method
+     * @memberof Konva.Path.prototype
+     * @param {Number} length length
+     * @returns {Object} point {x,y} point
+     * @example
+     * var point = path.getPointAtLength(10);
+     */
+    getPointAtLength: function(length) {
+      var point,
+        i = 0,
+        ii = this.dataArray.length;
 
       if (!ii) {
         return null;
@@ -160,19 +179,48 @@
       var p = cp.points;
       switch (cp.command) {
         case 'L':
-          return Konva.Path.getPointOnLine(length, cp.start.x, cp.start.y, p[0], p[1]);
+          return Konva.Path.getPointOnLine(
+            length,
+            cp.start.x,
+            cp.start.y,
+            p[0],
+            p[1]
+          );
         case 'C':
-          return Konva.Path.getPointOnCubicBezier(length / cp.pathLength, cp.start.x, cp.start.y, p[0], p[1], p[2], p[3], p[4], p[5]);
+          return Konva.Path.getPointOnCubicBezier(
+            length / cp.pathLength,
+            cp.start.x,
+            cp.start.y,
+            p[0],
+            p[1],
+            p[2],
+            p[3],
+            p[4],
+            p[5]
+          );
         case 'Q':
-          return Konva.Path.getPointOnQuadraticBezier(length / cp.pathLength, cp.start.x, cp.start.y, p[0], p[1], p[2], p[3]);
+          return Konva.Path.getPointOnQuadraticBezier(
+            length / cp.pathLength,
+            cp.start.x,
+            cp.start.y,
+            p[0],
+            p[1],
+            p[2],
+            p[3]
+          );
         case 'A':
-          var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6];
+          var cx = p[0],
+            cy = p[1],
+            rx = p[2],
+            ry = p[3],
+            theta = p[4],
+            dTheta = p[5],
+            psi = p[6];
           theta += dTheta * length / cp.pathLength;
           return Konva.Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
       }
 
       return null;
-
     }
   };
   Konva.Util.extend(Konva.Path, Konva.Shape);

src/shapes/Text.js

@@ -280,7 +280,7 @@
       return this.textWidth;
     },
     /**
-     * get text height
+     * get height of one line text
      * @method
      * @memberof Konva.Text.prototype
      * @returns {Number}

test/unit/shapes/Path-test.js

@@ -1002,12 +1002,15 @@ suite('Path', function() {
     var path = new Konva.Path({
       stroke: 'red',
       strokeWidth: 3,
-      data: 'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150'
+      data:
+        'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150'
     });
     layer.add(path);
 
+    var points = [];
     for (var i = 0; i < path.getLength(); i += 20) {
       var p = path.getPointAtLength(i);
+      points.push(p);
       var circle = new Konva.Circle({
         x: p.x,
         y: p.y,
@@ -1018,6 +1021,37 @@ suite('Path', function() {
       layer.add(circle);
     }
 
+    assert.deepEqual(points, [
+      { x: 300, y: 10 },
+      { x: 290.2871413779118, y: 27.48314552325543 },
+      { x: 280.57428275582356, y: 44.96629104651086 },
+      { x: 270.86142413373534, y: 62.4494365697663 },
+      { x: 261.1485655116471, y: 79.93258209302172 },
+      { x: 251.43570688955887, y: 97.41572761627717 },
+      { x: 230.89220826660141, y: 87.23996356219386 },
+      { x: 207.0639321224534, y: 74.08466390481559 },
+      { x: 182.87529785963875, y: 63.52674972743341 },
+      { x: 159.56025996483157, y: 56.104820499018956 },
+      { x: 138.30820744216845, y: 52.197497135977514 },
+      { x: 120.20328854394192, y: 52.00410710518156 },
+      { x: 106.16910423342256, y: 55.53451596967142 },
+      { x: 96.92159177720502, y: 62.60862410865827 },
+      { x: 92.93250205472883, y: 72.86555428606191 },
+      { x: 94.40533374670959, y: 85.78206137467119 },
+      { x: 101.26495209131289, y: 100.69922508568548 },
+      { x: 113.1614217949117, y: 116.85606400569954 },
+      { x: 129.4878585660311, y: 133.42835616090537 },
+      { x: 149.41138859764925, y: 149.5706857234721 },
+      { x: 157.23649735164412, y: 135.43198059754286 },
+      { x: 171.63472376239991, y: 124.16936108372946 },
+      { x: 191.0783332798296, y: 116.67529781728555 },
+      { x: 213.53990876948748, y: 112.94979079821127 },
+      { x: 236.99203309692777, y: 112.99284002650663 },
+      { x: 259.4072891277046, y: 116.80444550217156 },
+      { x: 278.75825972737204, y: 124.3846072252061 },
+      { x: 293.0175277614844, y: 135.7333251956102 }
+    ]);
+
     stage.add(layer);
   });