From 2a8a41711052bb557271c27f82faba8dd13fd880 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 06:12:34 -0800 Subject: preliminary support for setting gradients on webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/geom-obj.js | 65 +++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 52 insertions(+), 13 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..726c3595 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() { // Methods /////////////////////////////////////////////////////////////////////// this.setMaterialColor = function(c, type) { - if (type == "fill") { - this._fillColor = c.slice(0); + if(c.gradientMode) { + var nMats = 0; + if (this._materialArray && this._materialTypeArray) { + nMats = this._materialArray.length; + } + + var stops = [], + colors = c.color; + + var len = colors.length; + // TODO - Current shaders only support 4 color stops + if(len > 4) { + len = 4; + } + + for(var n=0; n --- js/lib/geom/geom-obj.js | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 726c3595..1ea74475 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -138,8 +138,10 @@ var GeomObj = function GLGeomObj() { // Methods /////////////////////////////////////////////////////////////////////// this.setMaterialColor = function(c, type) { + var i = 0, + nMats = 0; if(c.gradientMode) { - var nMats = 0; + // Gradient support if (this._materialArray && this._materialTypeArray) { nMats = this._materialArray.length; } @@ -160,7 +162,7 @@ var GeomObj = function GLGeomObj() { stops.push(stop); if (nMats === this._materialTypeArray.length) { - for (var i=0; i --- js/lib/geom/rectangle.js | 64 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 57 insertions(+), 7 deletions(-) (limited to 'js/lib') 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') 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/circle.js | 61 ++++++++++++++++++++++++++++++++++++++++++------ js/lib/geom/line.js | 38 ++++++++++++++++++++++++++---- js/lib/geom/rectangle.js | 4 ++-- 3 files changed, 90 insertions(+), 13 deletions(-) (limited to 'js/lib') 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/drawing/world.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'js/lib') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 3d6c6fc4..04e4d96b 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -26,7 +26,7 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel; // Class GLWorld // Manages display in a canvas /////////////////////////////////////////////////////////////////////// -var World = function GLWorld( canvas, use3D ) { +var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// @@ -39,7 +39,11 @@ var World = function GLWorld( canvas, use3D ) { this._canvas = canvas; if (this._useWebGL) { - this._glContext = canvas.getContext("experimental-webgl"); + if(preserveDrawingBuffer) { + this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); + } else { + this._glContext = canvas.getContext("experimental-webgl"); + } } else { this._2DContext = canvas.getContext( "2d" ); } @@ -680,7 +684,7 @@ World.prototype.render = function() { var root = this.getGeomRoot(); this.hRender( root ); } else { - g_Engine.setContext( this._canvas.rdgeId ); + g_Engine.setContext( this._canvas.rdgeid ); //this.draw(); this.restartRenderLoop(); } -- cgit v1.2.3 From 7793b312ef9490c90c3d2332849ab41d56950437 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 10:28:40 -0800 Subject: Fixing radial gradients for line and circle. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/circle.js | 6 +++--- js/lib/geom/line.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'js/lib') 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); } 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 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') 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/circle.js | 34 ++++++++++++++++++++++++++++++---- js/lib/geom/geom-obj.js | 43 +++++++++++++++++++++++++++++++++++++++++++ js/lib/geom/line.js | 19 +++++++++++++++++-- js/lib/geom/rectangle.js | 38 +++++++++++++++++++++++++++++++++----- 4 files changed, 123 insertions(+), 11 deletions(-) (limited to 'js/lib') 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) { diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 1ea74475..fb1cb246 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -305,6 +305,49 @@ var GeomObj = function GLGeomObj() { return rtnStr; }; + // Gradient stops for rgba(255,0,0,1) at 0%; rgba(0,255,0,1) at 33%; rgba(0,0,255,1) at 100% will return + // 255,0,0,1@0;0,255,0,1@33;0,0,255,1@100 + this.gradientToString = function(colors) { + var rtnStr = ""; + if(colors && colors.length) { + var c = colors[0], + len = colors.length; + + rtnStr += String(c.value.r + "," + c.value.g + "," + c.value.b + "," + c.value.a + "@" + c.position); + for(var i=1; i