aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-xjs/lib/geom/circle.js61
-rwxr-xr-xjs/lib/geom/geom-obj.js80
-rwxr-xr-xjs/lib/geom/line.js38
-rwxr-xr-xjs/lib/geom/rectangle.js64
4 files changed, 205 insertions, 38 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index dd82a4cc..8f9f54d1 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -442,16 +442,43 @@ var Circle = function GLCircle() {
442 var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); 442 var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI );
443 if (bezPts) { 443 if (bezPts) {
444 var n = bezPts.length; 444 var n = bezPts.length;
445 var gradient,
446 colors,
447 len,
448 j,
449 position,
450 cs,
451 c;
445 452
446 // set up the fill style 453 // set up the fill style
447 ctx.beginPath(); 454 ctx.beginPath();
448 ctx.lineWidth = 0; 455 ctx.lineWidth = 0;
449 if (this._fillColor) { 456 if (this._fillColor) {
450 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 457 if(this._fillColor.gradientMode) {
451 ctx.fillStyle = c; 458 if(this._fillColor.gradientMode === "radial") {
452 459 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
460 xCtr, yCtr, Math.max(yScale, xScale));
461 } else {
462 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
463 }
464 colors = this._fillColor.color;
465
466 len = colors.length;
467
468 for(j=0; j<len; j++) {
469 position = colors[j].position/100;
470 cs = colors[j].value;
471 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
472 }
473
474 ctx.fillStyle = gradient;
475
476 } else {
477 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
478 ctx.fillStyle = c;
479 }
453 // draw the fill 480 // draw the fill
454 ctx.beginPath(); 481// ctx.beginPath();
455 var p = MathUtils.transformPoint( bezPts[0], mat ); 482 var p = MathUtils.transformPoint( bezPts[0], mat );
456 ctx.moveTo( p[0], p[1] ); 483 ctx.moveTo( p[0], p[1] );
457 var index = 1; 484 var index = 1;
@@ -504,9 +531,29 @@ var Circle = function GLCircle() {
504 ctx.beginPath(); 531 ctx.beginPath();
505 ctx.lineWidth = lineWidth; 532 ctx.lineWidth = lineWidth;
506 if (this._strokeColor) { 533 if (this._strokeColor) {
507 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 534 if(this._strokeColor.gradientMode) {
508 ctx.strokeStyle = c; 535 if(this._strokeColor.gradientMode === "radial") {
509 536 gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale),
537 xCtr, yCtr, 0.5*Math.max(this._height, this._width));
538 } else {
539 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
540 }
541 colors = this._strokeColor.color;
542
543 len = colors.length;
544
545 for(j=0; j<len; j++) {
546 position = colors[j].position/100;
547 cs = colors[j].value;
548 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
549 }
550
551 ctx.strokeStyle = gradient;
552
553 } else {
554 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
555 ctx.strokeStyle = c;
556 }
510 // draw the stroke 557 // draw the stroke
511 p = MathUtils.transformPoint( bezPts[0], mat ); 558 p = MathUtils.transformPoint( bezPts[0], mat );
512 ctx.moveTo( p[0], p[1] ); 559 ctx.moveTo( p[0], p[1] );
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index c5880843..1ea74475 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() {
138 // Methods 138 // Methods
139 /////////////////////////////////////////////////////////////////////// 139 ///////////////////////////////////////////////////////////////////////
140 this.setMaterialColor = function(c, type) { 140 this.setMaterialColor = function(c, type) {
141 if (type == "fill") { 141 var i = 0,
142 this._fillColor = c.slice(0); 142 nMats = 0;
143 if(c.gradientMode) {
144 // Gradient support
145 if (this._materialArray && this._materialTypeArray) {
146 nMats = this._materialArray.length;
147 }
148
149 var stops = [],
150 colors = c.color;
151
152 var len = colors.length;
153 // TODO - Current shaders only support 4 color stops
154 if(len > 4) {
155 len = 4;
156 }
157
158 for(var n=0; n<len; n++) {
159 var position = colors[n].position/100;
160 var cs = colors[n].value;
161 var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
162 stops.push(stop);
163
164 if (nMats === this._materialTypeArray.length) {
165 for (i=0; i<nMats; i++) {
166 if (this._materialTypeArray[i] == type) {
167 this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) );
168 this._materialArray[i].setProperty( "colorStop"+(n+1), position );
169 }
170 }
171 }
172 }
173 if (type === "fill") {
174 this._fillColor = c;
175 } else {
176 this._strokeColor = c;
177 }
143 } else { 178 } else {
144 this._strokeColor = c.slice(0); 179 if (type === "fill") {
145 } 180 this._fillColor = c.slice(0);
181 } else {
182 this._strokeColor = c.slice(0);
183 }
146 184
147 if (this._materialArray && this._materialTypeArray) { 185 if (this._materialArray && this._materialTypeArray) {
148 var nMats = this._materialArray.length; 186 nMats = this._materialArray.length;
149 if (nMats === this._materialTypeArray.length) { 187 if (nMats === this._materialTypeArray.length) {
150 for (var i=0; i<nMats; i++) { 188 for (i=0; i<nMats; i++) {
151 if (this._materialTypeArray[i] == type) { 189 if (this._materialTypeArray[i] == type) {
152 this._materialArray[i].setProperty( "color", c.slice(0) ); 190 this._materialArray[i].setProperty( "color", c.slice(0) );
191 }
153 } 192 }
154 } 193 }
155 } 194 }
156 } 195 }
157 196
158 var world = this.getWorld(); 197 var world = this.getWorld();
159 if (world) { 198 if (world) {
@@ -171,14 +210,15 @@ var GeomObj = function GLGeomObj() {
171 210
172 if (strokeMaterial) { 211 if (strokeMaterial) {
173 strokeMaterial.init( this.getWorld() ); 212 strokeMaterial.init( this.getWorld() );
174 if(this._strokeColor) {
175 strokeMaterial.setProperty("color", this._strokeColor);
176 }
177 } 213 }
178 214
179 this._materialArray.push( strokeMaterial ); 215 this._materialArray.push( strokeMaterial );
180 this._materialTypeArray.push( "stroke" ); 216 this._materialTypeArray.push( "stroke" );
181 217
218 if(this._strokeColor) {
219 this.setStrokeColor(this._strokeColor);
220 }
221
182 return strokeMaterial; 222 return strokeMaterial;
183 }; 223 };
184 224
@@ -192,15 +232,15 @@ var GeomObj = function GLGeomObj() {
192 232
193 if (fillMaterial) { 233 if (fillMaterial) {
194 fillMaterial.init( this.getWorld() ); 234 fillMaterial.init( this.getWorld() );
195 //if(!this.getFillMaterial() && this._fillColor)
196 if (this._fillColor) {
197 fillMaterial.setProperty("color", this._fillColor);
198 }
199 } 235 }
200 236
201 this._materialArray.push( fillMaterial ); 237 this._materialArray.push( fillMaterial );
202 this._materialTypeArray.push( "fill" ); 238 this._materialTypeArray.push( "fill" );
203 239
240 if (this._fillColor) {
241 this.setFillColor(this._fillColor);
242 }
243
204 return fillMaterial; 244 return fillMaterial;
205 }; 245 };
206 246
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index da63b21c..51a6fa98 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
348 if (!ctx) return; 348 if (!ctx) return;
349 349
350 // set up the stroke style 350 // set up the stroke style
351 var lineWidth = this._strokeWidth; 351 var lineWidth = this._strokeWidth,
352 w = this._width,
353 h = this._height;
354
355 var c,
356 gradient,
357 colors,
358 len,
359 n,
360 position,
361 cs;
362
352 ctx.beginPath(); 363 ctx.beginPath();
353 ctx.lineWidth = lineWidth; 364 ctx