From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Tue, 15 May 2012 16:02:27 -0700
Subject: Gradient matching between WebGL and Canvas2D

---
 js/lib/geom/rectangle.js | 183 ++++++++++++++++++++++++-----------------------
 1 file changed, 92 insertions(+), 91 deletions(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 4415af43..8fc80c60 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, {
     },
 
     render: {
-        value: function() {
-            // get the world
-            var world = this.getWorld();
-            if (!world)  throw( "null world in rectangle render" );
-
-             // get the context
-            var ctx = world.get2DContext();
-            if (!ctx)  return;
-
-            // get some dimensions
-            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) {
-                inset = Math.ceil( lw ) - 0.5;
-
-                if(this._fillColor.gradientMode) {
-                    if(this._fillColor.gradientMode === "radial") {
+		value: function() {
+			// get the world
+			var world = this.getWorld();
+			if (!world)  throw( "null world in rectangle render" );
+
+			 // get the context
+			var ctx = world.get2DContext();
+			if (!ctx)  return;
+
+			// get some dimensions
+			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) {
+				inset = Math.ceil( lw ) - 0.5;
+
+				if(this._fillColor.gradientMode) {
+					if(this._fillColor.gradientMode === "radial") {
 						var ww = w - 2*lw,  hh = h - 2*lw;
-                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
-                    }
-                    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;
-                this.renderPath( inset, ctx );
-                ctx.fill();
-                ctx.closePath();
-            }
-
-            // render the stroke
-            ctx.beginPath();
-            if (this._strokeColor) {
-                inset = Math.ceil( 0.5*lw ) - 0.5;
-
-                if(this._strokeColor.gradientMode) {
-                    if(this._strokeColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-                    }
-                    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;
-                this.renderPath( inset, ctx );
-                ctx.stroke();
-                ctx.closePath();
-            }
-        }
-    },
+						//gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
+						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
+					} else {
+						gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
+					}
+					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;
+				this.renderPath( inset, ctx );
+				ctx.fill();
+				ctx.closePath();
+			}
+
+			// render the stroke
+			ctx.beginPath();
+			if (this._strokeColor) {
+				inset = Math.ceil( 0.5*lw ) - 0.5;
+
+				if(this._strokeColor.gradientMode) {
+					if(this._strokeColor.gradientMode === "radial") {
+						gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
+					} else {
+						gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+					}
+					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;
+				this.renderPath( inset, ctx );
+				ctx.stroke();
+				ctx.closePath();
+			}
+		}
+	},
 
     createStroke: {
         value: function(ctr,  width,  height,  strokeWidth,  tlRad, blRad, brRad, trRad, material) {
-- 
cgit v1.2.3