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 From fdeed8051c3af538d28ca3bc599121cea483c22c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 15:47:56 -0700 Subject: Squashed commit of the following GL integration Signed-off-by: Valerio Virgillito --- js/lib/geom/circle.js | 54 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 47 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 4b155b4c..d48bf98b 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -53,13 +53,13 @@ var Circle = function GLCircle() { if(strokeMaterial){ this._strokeMaterial = strokeMaterial; } else { - this._strokeMaterial = MaterialsModel.exportFlatMaterial(); + this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); } if(fillMaterial) { this._fillMaterial = fillMaterial; } else { - this._fillMaterial = MaterialsModel.exportFlatMaterial(); + this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); } this.exportMaterials(); @@ -598,7 +598,47 @@ var Circle = function GLCircle() { } }; - this.export = function() { + this.exportJSON = function() + { + var jObj = + { + 'type' : this.geomType(), + 'xoff' : this._xOffset, + 'yoff' : this._yOffset, + 'width' : this._width, + 'height' : this._height, + 'strokeWidth' : this._strokeWidth, + 'strokeColor' : this._strokeColor, + 'fillColor' : this._fillColor, + 'innerRadius' : this._innerRadius, + 'strokeStyle' : this._strokeStyle, + 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'materials' : this.exportMaterialsJSON() + }; + + return jObj; + }; + + this.importJSON = function( jObj ) + { + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterialsJSON( jObj.materials ); + }; + + + this.export = function() + { var rtnStr = "type: " + this.geomType() + "\n"; rtnStr += "xoff: " + this._xOffset + "\n"; @@ -627,7 +667,7 @@ var Circle = function GLCircle() { if (this._strokeMaterial) { rtnStr += this._strokeMaterial.getName(); } else { - rtnStr += "flatMaterial"; + rtnStr += MaterialsModel.getDefaultMaterialName(); } rtnStr += "\n"; @@ -636,7 +676,7 @@ var Circle = function GLCircle() { if (this._fillMaterial) { rtnStr += this._fillMaterial.getName(); } else { - rtnStr += "flatMaterial"; + rtnStr += MaterialsModel.getDefaultMaterialName(); } rtnStr += "\n"; @@ -675,7 +715,7 @@ var Circle = function GLCircle() { var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); if (!strokeMat) { console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.exportFlatMaterial(); + strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); } this._strokeMaterial = strokeMat; @@ -683,7 +723,7 @@ var Circle = function GLCircle() { var fillMat = MaterialsModel.getMaterial( fillMaterialName ); if (!fillMat) { console.log( "object material not found in library: " + fillMaterialName ); - fillMat = MaterialsModel.exportFlatMaterial(); + fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); } this._fillMaterial = fillMat; -- cgit v1.2.3