support of globalCompositeOperation for Konva.Shape. close #228

CHANGELOG.md

@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+
+### Added
+- support of globalCompositeOperation for `Konva.Shape`
+
 ### Fixed
 - getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
 

konva.js

@@ -2111,6 +2111,12 @@
       this.setAttr('shadowBlur', blur * ratio * Math.min(scaleX, scaleY));
       this.setAttr('shadowOffsetX', offset.x * scaleX);
       this.setAttr('shadowOffsetY', offset.y * scaleY);
+    },
+    _applyGlobalCompositeOperation: function(shape) {
+      var globalCompositeOperation = shape.getGlobalCompositeOperation();
+      if (globalCompositeOperation !== 'source-over') {
+        this.setAttr('globalCompositeOperation', globalCompositeOperation);
+      }
     }
   };
   Konva.Util.extend(Konva.SceneContext, Konva.Context);
@@ -8421,8 +8427,10 @@
         var ratio = bufferCanvas.pixelRatio;
         if (hasShadow && !canvas.hitCanvas) {
           context.save();
+
           context._applyShadow(this);
           context._applyOpacity(this);
+          context._applyGlobalCompositeOperation(this);
           context.drawImage(
             bufferCanvas._canvas,
             0,
@@ -8433,6 +8441,7 @@
           context.restore();
         } else {
           context._applyOpacity(this);
+          context._applyGlobalCompositeOperation(this);
           context.drawImage(
             bufferCanvas._canvas,
             0,
@@ -8459,8 +8468,10 @@
           // apply shadow
           if (!caching) {
             context._applyOpacity(this);
+            context._applyGlobalCompositeOperation(this);
           }
           context._applyShadow(this);
+
           drawFunc.call(this, context);
           context.restore();
           // if shape has stroke we need to redraw shape
@@ -8473,6 +8484,7 @@
           context.save();
           if (!caching) {
             context._applyOpacity(this);
+            context._applyGlobalCompositeOperation(this);
           }
           context._applyShadow(this);
           drawFunc.call(this, context);
@@ -8480,6 +8492,7 @@
         } else {
           if (!caching) {
             context._applyOpacity(this);
+            context._applyGlobalCompositeOperation(this);
           }
           drawFunc.call(this, context);
         }
@@ -8877,6 +8890,27 @@
     Konva.Validators.alphaComponent
   );
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'globalCompositeOperation',
+    'source-over'
+  );
+
+  /**
+     * get/set globalCompositeOperation of a shape
+     * @name globalCompositeOperation
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Number} blur
+     * @returns {Number}
+     * @example
+     * // get shadow blur
+     * var globalCompositeOperation = shape.globalCompositeOperation();
+     *
+     * // set shadow blur
+     * shape.globalCompositeOperation('source-in');
+     */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
 
   /**

src/Context.js

@@ -634,6 +634,12 @@
       this.setAttr('shadowBlur', blur * ratio * Math.min(scaleX, scaleY));
       this.setAttr('shadowOffsetX', offset.x * scaleX);
       this.setAttr('shadowOffsetY', offset.y * scaleY);
+    },
+    _applyGlobalCompositeOperation: function(shape) {
+      var globalCompositeOperation = shape.getGlobalCompositeOperation();
+      if (globalCompositeOperation !== 'source-over') {
+        this.setAttr('globalCompositeOperation', globalCompositeOperation);
+      }
     }
   };
   Konva.Util.extend(Konva.SceneContext, Konva.Context);

src/Shape.js

@@ -323,8 +323,10 @@
         var ratio = bufferCanvas.pixelRatio;
         if (hasShadow && !canvas.hitCanvas) {
           context.save();
+
           context._applyShadow(this);
           context._applyOpacity(this);
+          context._applyGlobalCompositeOperation(this);
           context.drawImage(
             bufferCanvas._canvas,
             0,
@@ -335,6 +337,7 @@
           context.restore();
         } else {
           context._applyOpacity(this);
+          context._applyGlobalCompositeOperation(this);
           context.drawImage(
             bufferCanvas._canvas,
             0,
@@ -361,8 +364,10 @@
           // apply shadow
           if (!caching) {
             context._applyOpacity(this);
+            context._applyGlobalCompositeOperation(this);
           }
           context._applyShadow(this);
+
           drawFunc.call(this, context);
           context.restore();
           // if shape has stroke we need to redraw shape
@@ -375,6 +380,7 @@
           context.save();
           if (!caching) {
             context._applyOpacity(this);
+            context._applyGlobalCompositeOperation(this);
           }
           context._applyShadow(this);
           drawFunc.call(this, context);
@@ -382,6 +388,7 @@
         } else {
           if (!caching) {
             context._applyOpacity(this);
+            context._applyGlobalCompositeOperation(this);
           }
           drawFunc.call(this, context);
         }
@@ -779,6 +786,27 @@
     Konva.Validators.alphaComponent
   );
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'globalCompositeOperation',
+    'source-over'
+  );
+
+  /**
+     * get/set globalCompositeOperation of a shape
+     * @name globalCompositeOperation
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Number} blur
+     * @returns {Number}
+     * @example
+     * // get shadow blur
+     * var globalCompositeOperation = shape.globalCompositeOperation();
+     *
+     * // set shadow blur
+     * shape.globalCompositeOperation('source-in');
+     */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
 
   /**