Merge branch 'add-stroke-gradient' of https://github.com/MaxGraey/konva into MaxGraey-add-stroke-gradient

CHANGELOG.md

@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * new `Konva.Filters.Contrast`.
 * new `Konva.Util.haveIntersection()` to detect collusion
 * add `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
+* add gradients for strokes
 
 ## Changed
 

konva.js

@@ -2033,6 +2033,20 @@
         this._fillRadialGradient(shape);
       }
     },
+    _strokeLinearGradient: function(shape) {
+      var start = shape.getStrokeLinearGradientStartPoint(),
+        end = shape.getStrokeLinearGradientEndPoint(),
+        colorStops = shape.getStrokeLinearGradientColorStops(),
+        grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
+
+      if (colorStops) {
+        // build color stops
+        for (var n = 0; n < colorStops.length; n += 2) {
+          grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        }
+        this.setAttr('strokeStyle', grd);
+      }
+    },
     _stroke: function(shape) {
       var dash = shape.dash(),
         // ignore strokeScaleEnabled for Text
@@ -2057,6 +2071,12 @@
         if (!shape.getShadowForStrokeEnabled()) {
           this.setAttr('shadowColor', 'rgba(0,0,0,0)');
         }
+
+        var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
+        if (hasLinearGradient) {
+          this._strokeLinearGradient(shape);
+        }
+
         shape._strokeFunc(this);
 
         if (!strokeScaleEnabled) {
@@ -9260,6 +9280,24 @@
    * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
    */
 
+   Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
+
+   /**
+     * get/set stroke linear gradient color stops
+     * @name strokeLinearGradientColorStops
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Array} colorStops
+     * @returns {Array} colorStops
+     * @example
+     * // get stroke linear gradient color stops
+     * var colorStops = shape.strokeLinearGradientColorStops();
+     *
+     * // create a linear gradient that starts with red, changes to blue
+     * // halfway through, and then changes to green
+     * shape.strokeLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+     */
+
   Konva.Factory.addGetterSetter(
     Konva.Shape,
     'fillRadialGradientStartRadius',
@@ -9480,6 +9518,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
+
   /**
    * get/set fill pattern offset x
    * @name fillPatternOffsetX
@@ -9496,6 +9535,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
+
   /**
    * get/set fill pattern offset y
    * @name fillPatternOffsetY
@@ -9537,6 +9577,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
+
   /**
    * get/set fill pattern scale x
    * @name fillPatternScaleX
@@ -9553,6 +9594,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
+
   /**
    * get/set fill pattern scale y
    * @name fillPatternScaleY
@@ -9594,11 +9636,38 @@
    * });
    */
 
+  Konva.Factory.addComponentsGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPoint',
+    ['x', 'y']
+  );
+
+  /**
+    * get/set stroke linear gradient start point
+    * @name strokeLinearGradientStartPoint
+    * @method
+    * @memberof Konva.Shape.prototype
+    * @param {Object} startPoint
+    * @param {Number} startPoint.x
+    * @param {Number} startPoint.y
+    * @returns {Object}
+    * @example
+    * // get stroke linear gradient start point
+    * var startPoint = shape.strokeLinearGradientStartPoint();
+    *
+    * // set stroke linear gradient start point
+    * shape.strokeLinearGradientStartPoint({
+    *   x: 20
+    *   y: 10
+    * });
+    */
+
   Konva.Factory.addGetterSetter(
     Konva.Shape,
     'fillLinearGradientStartPointX',
     0
   );
+
   /**
    * get/set fill linear gradient start point x
    * @name fillLinearGradientStartPointX
@@ -9614,11 +9683,33 @@
    * shape.fillLinearGradientStartPointX(20);
    */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPointX',
+    0
+  );
+
+  /**
+    * get/set stroke linear gradient start point x
+    * @name linearLinearGradientStartPointX
+    * @method
+    * @memberof Konva.Shape.prototype
+    * @param {Number} x
+    * @returns {Number}
+    * @example
+    * // get stroke linear gradient start point x
+    * var startPointX = shape.strokeLinearGradientStartPointX();
+    *
+    * // set stroke linear gradient start point x
+    * shape.strokeLinearGradientStartPointX(20);
+    */
+
   Konva.Factory.addGetterSetter(
     Konva.Shape,
     'fillLinearGradientStartPointY',
     0
   );
+
   /**
    * get/set fill linear gradient start point y
    * @name fillLinearGradientStartPointY
@@ -9634,6 +9725,26 @@
    * shape.fillLinearGradientStartPointY(20);
    */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPointY',
+    0
+  );
+  /**
+    * get/set stroke linear gradient start point y
+    * @name strokeLinearGradientStartPointY
+    * @method
+    * @memberof Konva.Shape.prototype
+    * @param {Number} y
+    * @returns {Number}
+    * @example
+    * // get stroke linear gradient start point y
+    * var startPointY = shape.strokeLinearGradientStartPointY();
+    *
+    * // set stroke linear gradient start point y
+    * shape.strokeLinearGradientStartPointY(20);
+    */
+
   Konva.Factory.addComponentsGetterSetter(
     Konva.Shape,
     'fillLinearGradientEndPoint',
@@ -9660,6 +9771,32 @@
    * });
    */
 
+  Konva.Factory.addComponentsGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPoint',
+    ['x', 'y']
+  );
+
+  /**
+     * get/set stroke linear gradient end point
+     * @name strokeLinearGradientEndPoint
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Object} endPoint
+     * @param {Number} endPoint.x
+     * @param {Number} endPoint.y
+     * @returns {Object}
+     * @example
+     * // get stroke linear gradient end point
+     * var endPoint = shape.strokeLinearGradientEndPoint();
+     *
+     * // set stroke linear gradient end point
+     * shape.strokeLinearGradientEndPoint({
+     *   x: 20
+     *   y: 10
+     * });
+     */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
   /**
    * get/set fill linear gradient end point x
@@ -9676,6 +9813,22 @@
    * shape.fillLinearGradientEndPointX(20);
    */
 
+  Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientEndPointX', 0);
+  /**
+     * get/set fill linear gradient end point x
+     * @name strokeLinearGradientEndPointX
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Number} x
+     * @returns {Number}
+     * @example
+     * // get stroke linear gradient end point x
+     * var endPointX = shape.strokeLinearGradientEndPointX();
+     *
+     * // set stroke linear gradient end point x
+     * shape.strokeLinearGradientEndPointX(20);
+     */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
   /**
    * get/set fill linear gradient end point y
@@ -9692,6 +9845,22 @@
    * shape.fillLinearGradientEndPointY(20);
    */
 
+  Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientEndPointY', 0);
+  /**
+     * get/set stroke linear gradient end point y
+     * @name strokeLinearGradientEndPointY
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Number} y
+     * @returns {Number}
+     * @example
+     * // get stroke linear gradient end point y
+     * var endPointY = shape.strokeLinearGradientEndPointY();
+     *
+     * // set stroke linear gradient end point y
+     * shape.strokeLinearGradientEndPointY(20);
+     */
+
   Konva.Factory.addComponentsGetterSetter(
     Konva.Shape,
     'fillRadialGradientStartPoint',

src/Context.js

@@ -584,6 +584,20 @@
         this._fillRadialGradient(shape);
       }
     },
+    _strokeLinearGradient: function(shape) {
+      var start = shape.getStrokeLinearGradientStartPoint(),
+        end = shape.getStrokeLinearGradientEndPoint(),
+        colorStops = shape.getStrokeLinearGradientColorStops(),
+        grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
+
+      if (colorStops) {
+        // build color stops
+        for (var n = 0; n < colorStops.length; n += 2) {
+          grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        }
+        this.setAttr('strokeStyle', grd);
+      }
+    },
     _stroke: function(shape) {
       var dash = shape.dash(),
         // ignore strokeScaleEnabled for Text
@@ -608,6 +622,12 @@
         if (!shape.getShadowForStrokeEnabled()) {
           this.setAttr('shadowColor', 'rgba(0,0,0,0)');
         }
+
+        var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
+        if (hasLinearGradient) {
+          this._strokeLinearGradient(shape);
+        }
+
         shape._strokeFunc(this);
 
         if (!strokeScaleEnabled) {

src/Factory.js

@@ -104,7 +104,10 @@
       };
     },
     addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
+      Konva.Util.error('Adding deprecated ' + attr);
+
       var method = GET + Konva.Util._capitalize(attr);
+
       var message =
         attr +
         ' property is deprecated and will be removed soon. Look at Konva change log for more information.';

src/Shape.js

@@ -173,7 +173,14 @@
      * @returns {Boolean}
      */
     hasStroke: function() {
-      return this.strokeEnabled() && !!this.stroke();
+      return (
+        this.strokeEnabled() &&
+        !!(
+          this.stroke() ||
+          this.getStrokeLinearGradientColorStops() ||
+          this.getStrokeRadialGradientColorStops()
+        )
+      );
     },
     /**
      * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
@@ -1022,6 +1029,24 @@
    * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
    */
 
+  Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
+
+  /**
+   * get/set stroke linear gradient color stops
+   * @name strokeLinearGradientColorStops
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Array} colorStops
+   * @returns {Array} colorStops
+   * @example
+   * // get stroke linear gradient color stops
+   * var colorStops = shape.strokeLinearGradientColorStops();
+   *
+   * // create a linear gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
+   */
+
   Konva.Factory.addGetterSetter(
     Konva.Shape,
     'fillRadialGradientStartRadius',
@@ -1242,6 +1267,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
+
   /**
    * get/set fill pattern offset x
    * @name fillPatternOffsetX
@@ -1258,6 +1284,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
+
   /**
    * get/set fill pattern offset y
    * @name fillPatternOffsetY
@@ -1299,6 +1326,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
+
   /**
    * get/set fill pattern scale x
    * @name fillPatternScaleX
@@ -1315,6 +1343,7 @@
    */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
+
   /**
    * get/set fill pattern scale y
    * @name fillPatternScaleY
@@ -1356,11 +1385,38 @@
    * });
    */
 
+  Konva.Factory.addComponentsGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPoint',
+    ['x', 'y']
+  );
+
+  /**
+   * get/set stroke linear gradient start point
+   * @name strokeLinearGradientStartPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get stroke linear gradient start point
+   * var startPoint = shape.strokeLinearGradientStartPoint();
+   *
+   * // set stroke linear gradient start point
+   * shape.strokeLinearGradientStartPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
+
   Konva.Factory.addGetterSetter(
     Konva.Shape,
     'fillLinearGradientStartPointX',
     0
   );
+
   /**
    * get/set fill linear gradient start point x
    * @name fillLinearGradientStartPointX
@@ -1376,11 +1432,33 @@
    * shape.fillLinearGradientStartPointX(20);
    */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPointX',
+    0
+  );
+
+  /**
+   * get/set stroke linear gradient start point x
+   * @name linearLinearGradientStartPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient start point x
+   * var startPointX = shape.strokeLinearGradientStartPointX();
+   *
+   * // set stroke linear gradient start point x
+   * shape.strokeLinearGradientStartPointX(20);
+   */
+
   Konva.Factory.addGetterSetter(
     Konva.Shape,
     'fillLinearGradientStartPointY',
     0
   );
+
   /**
    * get/set fill linear gradient start point y
    * @name fillLinearGradientStartPointY
@@ -1396,6 +1474,26 @@
    * shape.fillLinearGradientStartPointY(20);
    */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPointY',
+    0
+  );
+  /**
+   * get/set stroke linear gradient start point y
+   * @name strokeLinearGradientStartPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient start point y
+   * var startPointY = shape.strokeLinearGradientStartPointY();
+   *
+   * // set stroke linear gradient start point y
+   * shape.strokeLinearGradientStartPointY(20);
+   */
+
   Konva.Factory.addComponentsGetterSetter(
     Konva.Shape,
     'fillLinearGradientEndPoint',
@@ -1422,6 +1520,32 @@
    * });
    */
 
+  Konva.Factory.addComponentsGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPoint',
+    ['x', 'y']
+  );
+
+  /**
+   * get/set stroke linear gradient end point
+   * @name strokeLinearGradientEndPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get stroke linear gradient end point
+   * var endPoint = shape.strokeLinearGradientEndPoint();
+   *
+   * // set stroke linear gradient end point
+   * shape.strokeLinearGradientEndPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
   /**
    * get/set fill linear gradient end point x
@@ -1438,6 +1562,26 @@
    * shape.fillLinearGradientEndPointX(20);
    */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPointX',
+    0
+  );
+  /**
+   * get/set fill linear gradient end point x
+   * @name strokeLinearGradientEndPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient end point x
+   * var endPointX = shape.strokeLinearGradientEndPointX();
+   *
+   * // set stroke linear gradient end point x
+   * shape.strokeLinearGradientEndPointX(20);
+   */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
   /**
    * get/set fill linear gradient end point y
@@ -1454,6 +1598,26 @@
    * shape.fillLinearGradientEndPointY(20);
    */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPointY',
+    0
+  );
+  /**
+   * get/set stroke linear gradient end point y
+   * @name strokeLinearGradientEndPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient end point y
+   * var endPointY = shape.strokeLinearGradientEndPointY();
+   *
+   * // set stroke linear gradient end point y
+   * shape.strokeLinearGradientEndPointY(20);
+   */
+
   Konva.Factory.addComponentsGetterSetter(
     Konva.Shape,
     'fillRadialGradientStartPoint',

test/unit/Shape-test.js

@@ -279,9 +279,7 @@ suite('Shape', function() {
   });
 
   // ======================================================
-  test('set image fill to color then image then linear gradient then back to image', function(
+  test('set image fill to color then image then linear gradient then back to image', function(done) {
-    done
-  ) {
     var imageObj = new Image();
     imageObj.onload = function() {
       var stage = addStage();
@@ -341,6 +339,41 @@ suite('Shape', function() {
     imageObj.src = 'assets/darth-vader.jpg';
   });
 
+  test('stroke gradient', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var shape = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      fillLinearGradientColorStops: [0, 'yellow', 0.5, 'red', 1, 'white'],
+      fillLinearGradientStartPoint: {
+        x: 0,
+        y: 0
+      },
+      scaleX: 3,
+      fillLinearGradientEndPoint: {
+        x: 100,
+        y: 100
+      },
+      strokeLinearGradientColorStops: [0, 'red', 0.5, 'blue', 1, 'green'],
+      strokeLinearGradientStartPoint: {
+        x: 0,
+        y: 0
+      },
+      strokeLinearGradientEndPoint: {
+        x: 100,
+        y: 100
+      }
+    });
+    layer.add(shape);
+
+    layer.draw();
+  });
+
   // ======================================================
   test('test enablers and disablers', function() {
     var stage = addStage();
@@ -989,7 +1022,10 @@ suite('Shape', function() {
 
     assert.equal(rect.getY(), 50);
 
-    var trace = layer.getHitCanvas().getContext().getTrace(true);
+    var trace = layer
+      .getHitCanvas()
+      .getContext()
+      .getTrace(true);
     assert.equal(
       trace,
       'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'