aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/rectangle.js
diff options
context:
space:
mode:
authorJonathan Duran2012-05-24 09:35:02 -0700
committerJonathan Duran2012-05-24 09:35:02 -0700
commit458714f5bf2ab095f6e96dfec3f9ff7042527c04 (patch)
tree779ba55d14f059572cb81d27024ca8b8a92956e0 /js/lib/geom/rectangle.js
parent2e4831cf0fe04f37a179f84b098ae0899d4e40b8 (diff)
parent862ee363584dfba4bdd9abacbc3a3244c7ec66b5 (diff)
downloadninja-458714f5bf2ab095f6e96dfec3f9ff7042527c04.tar.gz
Merge branch 'refs/heads/NINJAmaster' into TimelineUber
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-xjs/lib/geom/rectangle.js190
1 files changed, 94 insertions, 96 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index d75abb05..b85433a0 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -56,8 +56,6 @@ exports.Rectangle = Object.create(GeomObj, {
56 this._strokeStyle = strokeStyle; 56 this._strokeStyle = strokeStyle;
57 57
58 this._matrix = Matrix.I(4); 58 this._matrix = Matrix.I(4);
59 //this._matrix[12] = xoffset;
60 //this._matrix[13] = yoffset;
61 } 59 }
62 60
63 // the overall radius includes the fill and the stroke. separate the two based on the stroke width 61 // the overall radius includes the fill and the stroke. separate the two based on the stroke width
@@ -124,7 +122,6 @@ exports.Rectangle = Object.create(GeomObj, {
124 this._fillMaterial = m; 122 this._fillMaterial = m;
125 } 123 }
126 }, 124 },
127
128 /////////////////////////////////////////////////////////////////////// 125 ///////////////////////////////////////////////////////////////////////
129 // update the "color of the material 126 // update the "color of the material
130 getFillColor: { 127 getFillColor: {
@@ -138,7 +135,6 @@ exports.Rectangle = Object.create(GeomObj, {
138// this._fillColor = c; 135// this._fillColor = c;
139// } 136// }
140// }, 137// },
141
142 getStrokeColor: { 138 getStrokeColor: {
143 value: function() { 139 value: function() {
144 return this._strokeColor; 140 return this._strokeColor;
@@ -379,6 +375,7 @@ exports.Rectangle = Object.create(GeomObj, {
379 // stroke 375 // stroke
380 var strokeMaterial = this.makeStrokeMaterial(); 376 var strokeMaterial = this.makeStrokeMaterial();
381 var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); 377 var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial);
378 strokeMaterial.fitToPrimitive( strokePrim );
382 this._primArray.push( strokePrim ); 379 this._primArray.push( strokePrim );
383 this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); 380 this._materialNodeArray.push( strokeMaterial.getMaterialNode() );
384 381
@@ -392,6 +389,7 @@ exports.Rectangle = Object.create(GeomObj, {
392 var fillMaterial = this.makeFillMaterial(); 389 var fillMaterial = this.makeFillMaterial();
393 //console.log( "fillMaterial: " + fillMaterial.getName() ); 390 //console.log( "fillMaterial: " + fillMaterial.getName() );
394 var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); 391 var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial);
392 fillMaterial.fitToPrimitive( fillPrim );
395 this._primArray.push( fillPrim ); 393 this._primArray.push( fillPrim );
396 this._materialNodeArray.push( fillMaterial.getMaterialNode() ); 394 this._materialNodeArray.push( fillMaterial.getMaterialNode() );
397 395
@@ -509,98 +507,98 @@ exports.Rectangle = Object.create(GeomObj, {
509 } 507 }
510 }, 508 },
511 509
512 render: { 510 render: {
513 value: function() { 511 value: function() {
514 // get the world 512 // get the world
515 var world = this.getWorld(); 513 var world = this.getWorld();
516 if (!world) throw( "null world in rectangle render" ); 514 if (!world) throw( "null world in rectangle render" );
517 515
518 // get the context 516 // get the context
519 var ctx = world.get2DContext(); 517 var ctx = world.get2DContext();
520 if (!ctx) return; 518 if (!ctx) return;
521 519
522 // get some dimensions 520 // get some dimensions
523 var lw = this._strokeWidth; 521 var lw = this._strokeWidth;
524 var w = world.getViewportWidth(), 522 var w = world.getViewportWidth(),
525 h = world.getViewportHeight(); 523 h = world.getViewportHeight();
526 524
527 var c, 525 var c,
528 inset, 526 inset,
529 gradient, 527 gradient,
530 colors, 528 colors,
531 len, 529 len,
532 n, 530 n,
533 position, 531 position,
534 cs; 532 cs;
535 // render the fill 533 // render the fill
536 ctx.beginPath(); 534 ctx.beginPath();
537 if (this._fillColor) { 535 if (this._fillColor) {
538 inset = Math.ceil( lw ) - 0.5; 536 inset = Math.ceil( lw ) - 0.5;
539 537
540 if(this._fillColor.gradientMode) { 538 if(this._fillColor.gradientMode) {
541 if(this._fillColor.gradientMode === "radial") { 539 if(this._fillColor.gradientMode === "radial") {
542 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); 540 var ww = w - 2*lw, hh = h - 2*lw;
543 } else { 541 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
544 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); 542 } else {
545 } 543 gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
546 colors = this._fillColor.color; 544 }
547 545 colors = this._fillColor.color;
548 len = colors.length; 546
549 547 len = colors.length;
550 for(n=0; n<len; n++) { 548
551 position = colors[n].position/100; 549 for(n=0; n<len; n++) {
552 cs = colors[n].value; 550 position = colors[n].position/100;
553 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); 551 cs = colors[n].value;
554 } 552 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
555 553 }
556 ctx.fillStyle = gradient; 554
557 555 ctx.fillStyle = gradient;
558 } else { 556
559 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 557 } else {
560 ctx.fillStyle = c; 558 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
561 } 559 ctx.fillStyle = c;
562 560 }
563 ctx.lineWidth = lw; 561
564 this.renderPath( inset, ctx ); 562 ctx.lineWidth = lw;
565 ctx.fill(); 563 this.renderPath( inset, ctx );
566 ctx.closePath(); 564 ctx.fill();
567 } 565 ctx.closePath();
568 566 }
569 // render the stroke 567
570 ctx.beginPath(); 568 // render the stroke
571 if (this._strokeColor) { 569 ctx.beginPath();
572 inset = Math.ceil( 0.5*lw ) - 0.5; 570 if (this._strokeColor) {
573 571 inset = Math.ceil( 0.5*lw ) - 0.5;
574 if(this._strokeColor.gradientMode) { 572
575 if(this._strokeColor.gradientMode === "radial") { 573 if(this._strokeColor.gradientMode) {
576 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); 574 if(this._strokeColor.gradientMode === "radial")
577 } else { 575 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2);
578 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 576 else
579 } 577 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
580 colors = this._strokeColor.color; 578 colors = this._strokeColor.color;
581 579
582 len = colors.length; 580 len = colors.length;
583 581
584 for(n=0; n<len; n++) { 582 for(n=0; n<len; n++) {
585 position = colors[n].position/100; 583 position = colors[n].position/100;
586 cs = colors[n].value; 584 cs = colors[n].value;
587 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); 585 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
588 } 586 }
589 587
590 ctx.strokeStyle = gradient; 588 ctx.strokeStyle = gradient;
591 589
592 } else { 590 } else {
593 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 591 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
594 ctx.strokeStyle = c; 592 ctx.strokeStyle = c;
595 } 593 }
596 594
597 ctx.lineWidth = lw; 595 ctx.lineWidth = lw;
598 this.renderPath( inset, ctx ); 596 this.renderPath( inset, ctx );
599 ctx.stroke(); 597 ctx.stroke();
600 ctx.closePath(); 598 ctx.closePath();
601 } 599 }
602 } 600 }
603 }, 601 },