Gradient support for canvas-2d rectangle.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

2 files changed, 71 insertions, 15 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 7079fc7f..b6d97b14 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -301,22 +301,25 @@ exports.ShapesController = Montage.create(CanvasController, {
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
                             this.setShapeProperty(el, "fill", null);
                             this.setShapeProperty(el, "background", color);
-//                            el.elementModel.fill = null;
+                            el.elementModel.fill = null;
                             return;
                         case 'gradient':
-                            this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                            }
                             el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
                             el.elementModel.shapeModel.GLWorld.render();
                             this.setShapeProperty(el, "fill", color.color.css);
                             this.setShapeProperty(el, "background", color);
-//                            el.elementModel.fill = color;
+                            el.elementModel.fill = color;
                             break;
                         default:
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
                             this.setShapeProperty(el, "fill", webGl);
                             this.setShapeProperty(el, "background", color);
-//                            el.elementModel.fill = color;
+                            el.elementModel.fill = color;
                     }
                 }
             }
@@ -339,22 +342,25 @@ exports.ShapesController = Montage.create(CanvasController, {
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null);
                             this.setShapeProperty(el, "stroke", null);
                             this.setShapeProperty(el, "border", color);
-//                            el.elementModel.fill = null;
+                            el.elementModel.fill = null;
                             return;
                         case 'gradient':
-                            this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                            }
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops});
                             el.elementModel.shapeModel.GLWorld.render();
                             this.setShapeProperty(el, "stroke", color.color.css);
                             this.setShapeProperty(el, "border", color);
-//                            el.elementModel.fill = color;
+                            el.elementModel.fill = color;
                             break;
                         default:
                             webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
                             this.setShapeProperty(el, "stroke", webGl);
                             this.setShapeProperty(el, "border", color);
-//                            el.elementModel.fill = color;
+                            el.elementModel.fill = color;
                     }
                 }
             }
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81b385b3..50271a13 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -459,15 +459,44 @@ var Rectangle = function GLRectangle() {
                 var lw = this._strokeWidth;
                 var     w = world.getViewportWidth(),
                         h = world.getViewportHeight();
-                
+
+        var c,
+            inset,
+            gradient,
+            colors,
+            len,
+            n,
+            position,
+            cs;
                 // render the fill
                 ctx.beginPath();
                 if (this._fillColor) {
-                        var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";  
-                        ctx.fillStyle = c;
+            inset = Math.ceil( lw ) + 0.5;
+
+            if(this._fillColor.gradientMode) {
+                if(this._fillColor.gradientMode === "radial") {
+                    gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h-2*inset);
+                } else {
+                    gradient = ctx.createLinearGradient(inset, inset, w-inset, h-inset);
+                }
+                colors = this._fillColor.color;
+
+                len = colors.length;
+
+                for(n=0; n<len; n++) {
+                    position = colors[n].position/100;
+                    cs = colors[n].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                }
+
+                ctx.fillStyle = gradient;
+
+            } else {
+                c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                ctx.fillStyle = c;
+            }
 
                         ctx.lineWidth   = lw;
-                        var inset = Math.ceil( lw ) + 0.5;
                         this.renderPath( inset, ctx );
                         ctx.fill();
                         ctx.closePath();
@@ -476,11 +505,32 @@ var Rectangle = function GLRectangle() {
                 // render the stroke
                 ctx.beginPath();
                 if (this._strokeColor) {
-                        var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";  
-                        ctx.strokeStyle = c;
+            inset = Math.ceil( 0.5*lw ) + 0.5;
+
+            if(this._strokeColor.gradientMode) {
+                if(this._strokeColor.gradientMode === "radial") {
+                    gradient = ctx.createRadialGradient(w/2, h/2, h/2, w/2, h/2, h);
+                } else {
+                    gradient = ctx.createLinearGradient(0, 0, w, h);
+                }
+                colors = this._strokeColor.color;
+
+                len = colors.length;
+
+                for(n=0; n<len; n++) {
+                    position = colors[n].position/100;
+                    cs = colors[n].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                }
+
+                ctx.strokeStyle = gradient;
+
+            } else {
+                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                ctx.strokeStyle = c;
+            }
 
                         ctx.lineWidth   = lw;
-                        var inset = Math.ceil( 0.5*lw ) + 0.5;
                         this.renderPath( inset, ctx );
                         ctx.stroke();
                         ctx.closePath();