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.js190
1 files changed, 95 insertions, 95 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index d75abb05..8fc80c60 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
@@ -510,97 +508,99 @@ exports.Rectangle = Object.create(GeomObj, {
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-this._strokeWidth, h/2, Math.max(ww, hh)/2);
544 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); 542 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
545 } 543 } else {
546 colors = this._fillColor.color; 544 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
547 545 }
548 len = colors.length; 546 colors = this._fillColor.color;
549 547
550 for(n=0; n<len; n++) { 548 len = colors.length;
551 position = colors[n].position/100; 549
552 cs = colors[n].value; 550 for(n=0; n<len; n++) {
553 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); 551 position = colors[n].position/100;
554 } 552 cs = colors[n].value;
555 553 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
556 ctx.fillStyle = gradient; 554 }
557 555
558 } else { 556 ctx.fillStyle = gradient;
559 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 557
560 ctx.fillStyle = c; 558 } else {
561 } 559 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
562 560 ctx.fillStyle = c;
563 ctx.lineWidth = lw; 561 }
564 this.renderPath( inset, ctx ); 562
565 ctx.fill(); 563 ctx.lineWidth = lw;
566 ctx.closePath(); 564 this.renderPath( inset, ctx );
567 } 565 ctx.fill();
568 566 ctx.closePath();
569 // render the stroke 567 }
570 ctx.beginPath(); 568
571 if (this._strokeColor) { 569 // render the stroke
572 inset = Math.ceil( 0.5*lw ) - 0.5; 570 ctx.beginPath();
573 571 if (this._strokeColor) {
574 if(this._strokeColor.gradientMode) { 572 inset = Math.ceil( 0.5*lw ) - 0.5;
575 if(this._strokeColor.gradientMode === "radial") { 573
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) {
577 } else { 575 if(this._strokeColor.gradientMode === "radial") {
578 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 576 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
579 } 577 } else {
580 colors = this._strokeColor.color; 578 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
581 579 }
582 len = colors.length; 580 colors = this._strokeColor.color;
583 581
584 for(n=0; n<len; n++) { 582 len = colors.length;
585 position = colors[n].position/100; 583
586 cs = colors[n].value; 584 for(n=0; n<len; n++) {
587 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); 585 position = colors[n].position/100;
588 } 586 cs = colors[n].value;
589 587 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
590 ctx.strokeStyle = gradient; 588 }
591 589
592 } else { 590 ctx.strokeStyle = gradient;
593 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 591
594 ctx.strokeStyle = c; 592 } else {
595 } 593 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
596 594 ctx.strokeStyle = c;
597 ctx.lineWidth = lw; 595 }
598 this.renderPath( inset, ctx ); 596
599 ctx.stroke(); 597 ctx.lineWidth = lw;
600 ctx.closePath(); 598 this.renderPath( inset, ctx );
601 } 599 ctx.stroke();
602 } 600 ctx.closePath();
603 }, 601 }
602 }
603 },
604 604
605 createStroke: { 605 createStroke: {
606 value: function(ctr, width, height, strokeWidth, tlRad, blRad, brRad, trRad, material) { 606 value: function(ctr, width, height, strokeWidth, tlRad, blRad, brRad, trRad, material) {