diff options
author | Nivesh Rajbhandari | 2012-03-07 11:42:46 -0800 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-03-07 11:42:46 -0800 |
commit | fc567223aded95c35982b1d1239f6d28a957a199 (patch) | |
tree | de23741ef2fbf1c206d6b8544af3f1b4310171bd /js/lib/geom | |
parent | f5b0162a9b148589f0ccc65a0332695ea6fd6be3 (diff) | |
download | ninja-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-x | js/lib/geom/rectangle.js | 64 |
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(); |