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/line.js | 38 ++++++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) (limited to 'js/lib/geom/line.js') diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index da63b21c..eaa26cf0 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -348,16 +348,46 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok if (!ctx) return; // set up the stroke style - var lineWidth = this._strokeWidth; + var lineWidth = this._strokeWidth, + w = this._width, + h = this._height; + + var c, + gradient, + colors, + len, + n, + position, + cs; + ctx.beginPath(); ctx.lineWidth = lineWidth; if (this._strokeColor) { - var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; - ctx.strokeStyle = c; + if(this._strokeColor.gradientMode) { + if(this._strokeColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2); + } else { + gradient = ctx.createLinearGradient(0, h/2, w, h/2); + } + colors = this._strokeColor.color; + + len = colors.length; + + for(n=0; n --- js/lib/geom/line.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/lib/geom/line.js') diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index eaa26cf0..51a6fa98 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -365,7 +365,7 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/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/line.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'js/lib/geom/line.js') diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index 51a6fa98..4a935de8 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -112,7 +112,14 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok rtnStr += "xAdj: " + this._xAdj + "\n"; rtnStr += "yAdj: " + this._yAdj + "\n"; rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; - rtnStr += "strokeColor: " + String(this._strokeColor) + "\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"; + } + rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; rtnStr += "slope: " + String(this._slope) + "\n"; @@ -145,7 +152,15 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); - this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", 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 )); + } var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); if (!strokeMat) { -- cgit v1.2.3