aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/rectangle.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-xjs/lib/geom/rectangle.js102
1 files changed, 90 insertions, 12 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 370bb257..a47295e0 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -205,8 +205,20 @@ var Rectangle = function GLRectangle() {
205 rtnStr += "width: " + this._width + "\n"; 205 rtnStr += "width: " + this._width + "\n";
206 rtnStr += "height: " + this._height + "\n"; 206 rtnStr += "height: " + this._height + "\n";
207 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 207 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
208 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 208
209 rtnStr += "fillColor: " + String(this._fillColor) + "\n"; 209 if(this._strokeColor.gradientMode) {
210 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
211 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
212 } else {
213 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
214 }
215
216 if(this._fillColor.gradientMode) {
217 rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n";
218 rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
219 } else {
220 rtnStr += "fillColor: " + String(this._fillColor) + "\n";
221 }
210 rtnStr += "tlRadius: " + this._tlRadius + "\n"; 222 rtnStr += "tlRadius: " + this._tlRadius + "\n";
211 rtnStr += "trRadius: " + this._trRadius + "\n"; 223 rtnStr += "trRadius: " + this._trRadius + "\n";
212 rtnStr += "blRadius: " + this._blRadius + "\n"; 224 rtnStr += "blRadius: " + this._blRadius + "\n";
@@ -246,9 +258,25 @@ var Rectangle = function GLRectangle() {
246 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 258 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
247 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); 259 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr );
248 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 260 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
249 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); 261
250 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 262 if(importStr.indexOf("fillGradientMode: ") < 0) {
251 this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); 263 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" );
264 } else {
265 this._fillColor = {};
266 this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr );
267 this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr ));
268 }
269
270 if(importStr.indexOf("strokeGradientMode: ") < 0)
271 {
272 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
273 } else {
274 this._strokeColor = {};
275 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
276 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
277 }
278
279 this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) );
252 this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) ); 280 this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) );
253 this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) ); 281 this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) );
254 this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) ); 282 this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) );
@@ -462,15 +490,44 @@ var Rectangle = function GLRectangle() {
462 var lw = this._strokeWidth; 490 var lw = this._strokeWidth;
463 var w = world.getViewportWidth(), 491 var w = world.getViewportWidth(),
464 h = world.getViewportHeight(); 492 h = world.getViewportHeight();
465 493
494 var c,
495 inset,
496 gradient,
497 colors,
498 len,
499 n,
500 position,
501 cs;
466 // render the fill 502 // render the fill
467 ctx.beginPath(); 503 ctx.beginPath();
468 if (this._fillColor) { 504 if (this._fillColor) {
469 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 505 inset = Math.ceil( lw ) + 0.5;
470 ctx.fillStyle = c; 506
507 if(this._fillColor.gradientMode) {
508 if(this._fillColor.gradientMode === "radial") {
509 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
510 } else {
511 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
512 }
513 colors = this._fillColor.color;
514
515 len = colors.length;
516
517 for(n=0; n<len; n++) {
518 position = colors[n].position/100;
519 cs = colors[n].value;
520 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
521 }
522
523 ctx.fillStyle = gradient;
524
525 } else {
526 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
527 ctx.fillStyle = c;
528 }
471 529
472 ctx.lineWidth = lw; 530 ctx.lineWidth = lw;
473 var inset = Math.ceil( lw ) + 0.5;
474 this.renderPath( inset, ctx ); 531 this.renderPath( inset, ctx );
475 ctx.fill(); 532 ctx.fill();
476 ctx.closePath(); 533 ctx.closePath();
@@ -479,11 +536,32 @@ var Rectangle = function GLRectangle() {
479 // render the stroke 536 // render the stroke
480 ctx.beginPath(); 537 ctx.beginPath();
481 if (this._strokeColor) { 538 if (this._strokeColor) {
482 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 539 inset = Math.ceil( 0.5*lw ) + 0.5;
483 ctx.strokeStyle = c; 540
541 if(this._strokeColor.gradientMode) {
542 if(this._strokeColor.gradientMode === "radial") {
543 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2));
544 } else {
545 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
546 }
547 colors = this._strokeColor.color;
548
549 len = colors.length;
550
551 for(n=0; n<len; n++) {
552 position = colors[n].position/100;
553 cs = colors[n].value;
554 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
555 }
556
557 ctx.strokeStyle = gradient;
558
559 } else {
560 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
561 ctx.strokeStyle = c;
562 }
484 563
485 ctx.lineWidth = lw; 564 ctx.lineWidth = lw;
486 var inset = Math.ceil( 0.5*lw ) + 0.5;
487 this.renderPath( inset, ctx ); 565 this.renderPath( inset, ctx );
488 ctx.stroke(); 566 ctx.stroke();
489 ctx.closePath(); 567 ctx.closePath();