From fc567223aded95c35982b1d1239f6d28a957a199 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 11:42:46 -0800 Subject: Gradient support for canvas-2d rectangle. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 64 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 57 insertions(+), 7 deletions(-) (limited to 'js/lib/geom/rectangle.js') 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 --- js/lib/geom/rectangle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 50271a13..d01d5b28 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -477,7 +477,7 @@ var Rectangle = function GLRectangle() { 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); + gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); } colors = this._fillColor.color; @@ -511,7 +511,7 @@ var Rectangle = function GLRectangle() { 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); + gradient = ctx.createLinearGradient(0, h/2, w, h/2); } colors = this._strokeColor.color; -- cgit v1.2.3 From b6288e1ffe4ffe29a595bb1e146feb388503e2c4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 15:31:20 -0800 Subject: gradient support for canvas-2d shapes. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index d01d5b28..f13f624d 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -475,7 +475,7 @@ var Rectangle = function GLRectangle() { 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); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2-inset); } else { gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); } @@ -509,7 +509,7 @@ var Rectangle = function GLRectangle() { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, h/2, w/2, h/2, h); + gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h/2); } else { gradient = ctx.createLinearGradient(0, h/2, w, h/2); } -- cgit v1.2.3 From 3f80251670e187377f9f8ae4547328c8bf344977 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 10:36:32 -0800 Subject: Fixing radial gradient for rectangle. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index f13f624d..81201a79 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -475,7 +475,7 @@ var Rectangle = function GLRectangle() { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2-inset); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); } else { gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); } @@ -509,7 +509,7 @@ var Rectangle = function GLRectangle() { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h/2); + gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); } else { gradient = ctx.createLinearGradient(0, h/2, w, h/2); } -- cgit v1.2.3 From 2ac9a855724cc4ccf147ce4130a733a84cc647c3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 16:19:44 -0700 Subject: Support import/export of gradient materials. This fixes the eyedropper not being able to sample gradient colors from WebGL shapes. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 38 +++++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 81201a79..6abaef2f 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -203,8 +203,20 @@ var Rectangle = function GLRectangle() { rtnStr += "width: " + this._width + "\n"; rtnStr += "height: " + this._height + "\n"; rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; - rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; - rtnStr += "fillColor: " + String(this._fillColor) + "\n"; + + if(this._strokeColor.gradientMode) { + rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n"; + rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n"; + } else { + rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; + } + + if(this._fillColor.gradientMode) { + rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n"; + rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n"; + } else { + rtnStr += "fillColor: " + String(this._fillColor) + "\n"; + } rtnStr += "tlRadius: " + this._tlRadius + "\n"; rtnStr += "trRadius: " + this._trRadius + "\n"; rtnStr += "blRadius: " + this._blRadius + "\n"; @@ -244,9 +256,25 @@ var Rectangle = function GLRectangle() { var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); - this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); - this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); - this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); + + if(importStr.indexOf("fillGradientMode: ") < 0) { + this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); + } else { + this._fillColor = {}; + this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr ); + this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr )); + } + + if(importStr.indexOf("strokeGradientMode: ") < 0) + { + this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); + } else { + this._strokeColor = {}; + this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr ); + this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr )); + } + + this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) ); this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) ); this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) ); -- cgit v1.2.3