aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-07 11:42:46 -0800
committerNivesh Rajbhandari2012-03-07 11:42:46 -0800
commitfc567223aded95c35982b1d1239f6d28a957a199 (patch)
treede23741ef2fbf1c206d6b8544af3f1b4310171bd /js/lib/geom
parentf5b0162a9b148589f0ccc65a0332695ea6fd6be3 (diff)
downloadninja-fc567223aded95c35982b1d1239f6d28a957a199.tar.gz
Gradient support for canvas-2d rectangle.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-xjs/lib/geom/rectangle.js64
1 files changed, 57 insertions, 7 deletions
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() {
459 var lw = this._strokeWidth; 459 var lw = this._strokeWidth;
460 var w = world.getViewportWidth(), 460 var w = world.getViewportWidth(),
461 h = world.getViewportHeight(); 461 h = world.getViewportHeight();
462 462
463 var c,
464 inset,
465 gradient,
466 colors,
467 len,
468 n,
469 position,
470 cs;
463 // render the fill 471 // render the fill
464 ctx.beginPath(); 472 ctx.beginPath();
465 if (this._fillColor) { 473 if (this._fillColor) {
466 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 474 inset = Math.ceil( lw ) + 0.5;
467 ctx.fillStyle = c; 475
476 if(this._fillColor.gradientMode) {
477 if(this._fillColor.gradientMode === "radial") {
478 gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h-2*inset);
479 } else {
480 gradient = ctx.createLinearGradient(inset, inset, w-inset, h-inset);
481 }
482 colors = this._fillColor.color;
483
484 len = colors.length;
485
486 for(n=0; n<len; n++) {
487 position = colors[n].position/100;
488 cs = colors[n].value;
489 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
490 }
491
492 ctx.fillStyle = gradient;
493
494 } else {
495 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
496 ctx.fillStyle = c;
497 }
468 498
469 ctx.lineWidth = lw; 499 ctx.lineWidth = lw;
470 var inset = Math.ceil( lw ) + 0.5;
471 this.renderPath( inset, ctx ); 500 this.renderPath( inset, ctx );
472 ctx.fill(); 501 ctx.fill();
473 ctx.closePath(); 502 ctx.closePath();
@@ -476,11 +505,32 @@ var Rectangle = function GLRectangle() {
476 // render the stroke 505 // render the stroke
477 ctx.beginPath(); 506 ctx.beginPath();
478 if (this._strokeColor) { 507 if (this._strokeColor) {
479 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 508 inset = Math.ceil( 0.5*lw ) + 0.5;
480 ctx.strokeStyle = c; 509
510 if(this._strokeColor.gradientMode) {
511 if(this._strokeColor.gradientMode === "radial") {
512 gradient = ctx.createRadialGradient(w/2, h/2, h/2, w/2, h/2, h);
513 } else {
514 gradient = ctx.createLinearGradient(0, 0, w, h);
515 }
516 colors = this._strokeColor.color;
517
518 len = colors.length;
519
520 for(n=0; n<len; n++) {
521 position = colors[n].position/100;
522 cs = colors[n].value;
523 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
524 }
525
526 ctx.strokeStyle = gradient;
527
528 } else {
529 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
530 ctx.strokeStyle = c;
531 }
481 532
482 ctx.lineWidth = lw; 533 ctx.lineWidth = lw;
483 var inset = Math.ceil( 0.5*lw ) + 0.5;
484 this.renderPath( inset, ctx ); 534 this.renderPath( inset, ctx );
485 ctx.stroke(); 535 ctx.stroke();
486 ctx.closePath(); 536 ctx.closePath();