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/circle.js | 61 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 54 insertions(+), 7 deletions(-) (limited to 'js/lib/geom/circle.js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index dd82a4cc..70f608be 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -442,16 +442,43 @@ var Circle = function GLCircle() { var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); if (bezPts) { var n = bezPts.length; + var gradient, + colors, + len, + j, + position, + cs, + c; // set up the fill style ctx.beginPath(); ctx.lineWidth = 0; if (this._fillColor) { - var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; - ctx.fillStyle = c; - + if(this._fillColor.gradientMode) { + if(this._fillColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, + xCtr, yCtr, yScale); + } else { + gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + } + colors = this._fillColor.color; + + len = colors.length; + + for(j=0; j --- js/lib/geom/circle.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/lib/geom/circle.js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 70f608be..8f9f54d1 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -457,7 +457,7 @@ var Circle = function GLCircle() { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, yScale); + xCtr, yCtr, Math.max(yScale, xScale)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); } @@ -533,8 +533,8 @@ var Circle = function GLCircle() { if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, yScale, - xCtr, yCtr, 0.5*this._height); + gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + xCtr, yCtr, 0.5*Math.max(this._height, this._width)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/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/circle.js | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) (limited to 'js/lib/geom/circle.js') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 8f9f54d1..05501ec3 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -606,8 +606,20 @@ var Circle = function GLCircle() { rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; rtnStr += "innerRadius: " + this._innerRadius + "\n"; rtnStr += "strokeStyle: " + this._strokeStyle + "\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 += "strokeMat: "; if (this._strokeMaterial) { @@ -640,8 +652,22 @@ var Circle = function GLCircle() { this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); - this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); - this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", 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 )); + } var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); if (!strokeMat) { -- cgit v1.2.3