aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/circle.js
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-07 15:31:20 -0800
committerNivesh Rajbhandari2012-03-07 15:31:20 -0800
commitb6288e1ffe4ffe29a595bb1e146feb388503e2c4 (patch)
tree5b1e681f2602dfe79715a75404d907aaeb2ae9d5 /js/lib/geom/circle.js
parent5bef5c5f2f7ee45d4c619c65ab8e9307c30420b5 (diff)
downloadninja-b6288e1ffe4ffe29a595bb1e146feb388503e2c4.tar.gz
gradient support for canvas-2d shapes.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js/lib/geom/circle.js')
-rwxr-xr-xjs/lib/geom/circle.js61
1 files changed, 54 insertions, 7 deletions
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() {
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, yScale);
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, yScale,
537 xCtr, yCtr, 0.5*this._height);
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] );