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 818582d389f504c915be0c9052fafa33e3e76c92 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 7 Mar 2012 16:48:48 -0800 Subject: File IO --- 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 81b385b3..f91e830c 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -218,7 +218,6 @@ var Rectangle = function GLRectangle() { } else { rtnStr += "flatMaterial"; } - rtnStr += "\n"; rtnStr += "fillMat: "; @@ -227,9 +226,10 @@ var Rectangle = function GLRectangle() { } else { rtnStr += "flatMaterial"; } - rtnStr += "\n"; + rtnStr += this.exportMaterials(); + return rtnStr; }; -- cgit v1.2.3 From 7b6e8194b91168abdeb94702eb350d14f147858b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 8 Mar 2012 17:29:18 -0800 Subject: Canvas IO --- js/lib/geom/rectangle.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index f91e830c..370bb257 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -79,6 +79,8 @@ var Rectangle = function GLRectangle() { } else { this._fillMaterial = MaterialsModel.exportFlatMaterial(); } + + this.exportMaterials(); }; /////////////////////////////////////////////////////////////////////// @@ -264,8 +266,9 @@ var Rectangle = function GLRectangle() { console.log( "object material not found in library: " + fillMaterialName ); fillMat = MaterialsModel.exportFlatMaterial(); } - this._fillMaterial = fillMat; + + this.importMaterials( importStr ); }; this.buildBuffers = function() { -- 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 From a0d23354802ebc6b437698acb4b18d3395d47cd1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 16 Mar 2012 12:26:30 -0700 Subject: Conversion to JSON based file IO for canvas2D and WebGL rendering --- js/lib/geom/rectangle.js | 87 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 12 deletions(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 370bb257..51fa3fd6 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -7,7 +7,6 @@ var GeomObj = require("js/lib/geom/geom-obj").GeomObj; var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var MaterialsModel = require("js/models/materials-model").MaterialsModel; -var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial; /////////////////////////////////////////////////////////////////////// // Class GLRectangle // GL representation of a rectangle. @@ -71,13 +70,13 @@ var Rectangle = function GLRectangle() { 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(); @@ -218,7 +217,7 @@ var Rectangle = function GLRectangle() { if (this._strokeMaterial) { rtnStr += this._strokeMaterial.getName(); } else { - rtnStr += "flatMaterial"; + rtnStr += MaterialsModel.getDefaultMaterialName(); } rtnStr += "\n"; @@ -226,7 +225,7 @@ var Rectangle = function GLRectangle() { if (this._fillMaterial) { rtnStr += this._fillMaterial.getName(); } else { - rtnStr += "flatMaterial"; + rtnStr += MaterialsModel.getDefaultMaterialName(); } rtnStr += "\n"; @@ -235,6 +234,71 @@ var Rectangle = function GLRectangle() { return rtnStr; }; + // JSON export + 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, + 'tlRadius' : this._tlRadius, + 'trRadius' : this._trRadius, + 'blRadius' : this._blRadius, + 'brRadius' : this._brRadius, + '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._tlRadius = jObj.tlRadius; + this._trRadius = jObj.trRadius; + this._blRadius = jObj.blRadius; + this._brRadius = jObj.brRadius; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterialsJSON( jObj.materials ); + + var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); + if (!strokeMat) { + console.log( "object material not found in library: " + strokeMaterialName ); + strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } + else + strokeMat = strokeMat.dup(); + this._strokeMaterial = strokeMat; + + var fillMat = MaterialsModel.getMaterial( fillMaterialName ); + if (!fillMat) { + console.log( "object material not found in library: " + fillMaterialName ); + fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } + else + fillMat = fillMat.dup(); + this._fillMaterial = fillMat; + }; + this.import = function( importStr ) { this._xOffset = Number( this.getPropertyFromString( "xoff: ", importStr ) ); this._yOffset = Number( this.getPropertyFromString( "yoff: ", importStr ) ); @@ -256,15 +320,14 @@ var Rectangle = function GLRectangle() { 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; 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; @@ -339,10 +402,10 @@ var Rectangle = function GLRectangle() { brRadius = -z*(r-l)/(2.0*zn)*brRadiusNDC; // stroke - var strokeMaterial = this.makeStrokeMaterial(); - var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); - this._primArray.push( strokePrim ); - this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); +// var strokeMaterial = this.makeStrokeMaterial(); +// var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); +// this._primArray.push( strokePrim ); +// this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); // fill tlRadius -= strokeSize; if (tlRadius < 0) tlRadius = 0.0; -- cgit v1.2.3 From 98a02c1ac6f189aba93d7cce64ba5bdbc0617f6c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 20 Mar 2012 16:26:52 -0700 Subject: Bug Fixes for Canvas & WebGL File IO --- js/lib/geom/rectangle.js | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index c6bc2d88..38e428bd 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -78,8 +78,6 @@ var Rectangle = function GLRectangle() { } else { this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); } - - this.exportMaterials(); }; /////////////////////////////////////////////////////////////////////// @@ -291,24 +289,6 @@ var Rectangle = function GLRectangle() { var strokeMaterialName = jObj.strokeMat; var fillMaterialName = jObj.fillMat; this.importMaterialsJSON( jObj.materials ); - - var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); - if (!strokeMat) { - console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); - } - else - strokeMat = strokeMat.dup(); - this._strokeMaterial = strokeMat; - - var fillMat = MaterialsModel.getMaterial( fillMaterialName ); - if (!fillMat) { - console.log( "object material not found in library: " + fillMaterialName ); - fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); - } - else - fillMat = fillMat.dup(); - this._fillMaterial = fillMat; }; this.import = function( importStr ) { @@ -430,10 +410,10 @@ var Rectangle = function GLRectangle() { brRadius = -z*(r-l)/(2.0*zn)*brRadiusNDC; // stroke -// var strokeMaterial = this.makeStrokeMaterial(); -// var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); -// this._primArray.push( strokePrim ); -// this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); + var strokeMaterial = this.makeStrokeMaterial(); + var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); + this._primArray.push( strokePrim ); + this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); // fill tlRadius -= strokeSize; if (tlRadius < 0) tlRadius = 0.0; -- cgit v1.2.3 From 86770d0dba6b137e651cbf5c8d240856be65857c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 23 Mar 2012 14:59:51 -0700 Subject: Fixed a problem switching from 3D to 2D and back to 3D. --- js/lib/geom/rectangle.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/lib/geom/rectangle.js') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 38e428bd..e511d5f4 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -187,7 +187,8 @@ var Rectangle = function GLRectangle() { /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - this.export = function() { + /* + this.export = function() { var rtnStr = "type: " + this.geomType() + "\n"; ///////////////////////////////////////////////////////////////////////// @@ -243,6 +244,7 @@ var Rectangle = function GLRectangle() { return rtnStr; }; + */ // JSON export this.exportJSON = function() -- cgit v1.2.3