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.js183
1 files changed, 92 insertions, 91 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 4415af43..8fc80c60 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, {
508 }, 508 },
509 509
510 render: { 510 render: {
511 value: function() { 511 value: function() {
512 // get the world 512 // get the world
513 var world = this.getWorld(); 513 var world = this.getWorld();
514 if (!world) throw( "null world in rectangle render" ); 514 if (!world) throw( "null world in rectangle render" );
515 515
516 // get the context 516 // get the context
517 var ctx = world.get2DContext(); 517 var ctx = world.get2DContext();
518 if (!ctx) return; 518 if (!ctx) return;
519 519
520 // get some dimensions 520 // get some dimensions
521 var lw = this._strokeWidth; 521 var lw = this._strokeWidth;
522 var w = world.getViewportWidth(), 522 var w = world.getViewportWidth(),
523 h = world.getViewportHeight(); 523 h = world.getViewportHeight();
524 524
525 var c, 525 var c,
526 inset, 526 inset,
527 gradient, 527 gradient,
528 colors, 528 colors,
529 len, 529 len,
530 n, 530 n,
531 position, 531 position,
532 cs; 532 cs;
533 // render the fill 533 // render the fill
534 ctx.beginPath(); 534 ctx.beginPath();
535 if (this._fillColor) { 535 if (this._fillColor) {
536 inset = Math.ceil( lw ) - 0.5; 536 inset = Math.ceil( lw ) - 0.5;
537 537
538 if(this._fillColor.gradientMode) { 538 if(this._fillColor.gradientMode) {
539 if(this._fillColor.gradientMode === "radial") { 539 if(this._fillColor.gradientMode === "radial") {
540 var ww = w - 2*lw, hh = h - 2*lw; 540 var ww = w - 2*lw, hh = h - 2*lw;
541 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); 541 //gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2);
542 } else { 542 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
543 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); 543 } else {
544 } 544 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
545 colors = this._fillColor.color; 545 }
546 546 colors = this._fillColor.color;
547 len = colors.length; 547
548 548 len = colors.length;
549 for(n=0; n<len; n++) { 549
550 position = colors[n].position/100; 550 for(n=0; n<len; n++) {
551 cs = colors[n].value; 551 position = colors[n].position/100;
552 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); 552 cs = colors[n].value;
553 } 553 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
554 554 }
555 ctx.fillStyle = gradient; 555
556 556 ctx.fillStyle = gradient;
557 } else { 557
558 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 558 } else {
559 ctx.fillStyle = c; 559 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
560 } 560 ctx.fillStyle = c;
561 561 }
562 ctx.lineWidth = lw; 562
563 this.renderPath( inset, ctx ); 563 ctx.lineWidth = lw;
564 ctx.fill(); 564 this.renderPath( inset, ctx );
565 ctx.closePath(); 565 ctx.fill();
566 } 566 ctx.closePath();
567 567 }
568 // render the stroke 568
569 ctx.beginPath(); 569 // render the stroke
570 if (this._strokeColor) { 570 ctx.beginPath();
571 inset = Math.ceil( 0.5*lw ) - 0.5; 571 if (this._strokeColor) {
572 572 inset = Math.ceil( 0.5*lw ) - 0.5;
573 if(this._strokeColor.gradientMode) { 573
574 if(this._strokeColor.gradientMode === "radial") { 574 if(this._strokeColor.gradientMode) {
575 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); 575 if(this._strokeColor.gradientMode === "radial") {
576 } else { 576 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
577 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 577 } else {
578 } 578 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
579 colors = this._strokeColor.color; 579 }
580 580 colors = this._strokeColor.color;
581 len = colors.length; 581
582 582 len = colors.length;
583 for(n=0; n<len; n++) { 583
584 position = colors[n].position/100; 584 for(n=0; n<len; n++) {
585 cs = colors[n].value; 585 position = colors[n].position/100;
586 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); 586 cs = colors[n].value;
587 } 587 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
588 588 }
589 ctx.strokeStyle = gradient; 589
590 590 ctx.strokeStyle = gradient;
591 } else { 591
592 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 592 } else {
593 ctx.strokeStyle = c; 593 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
594 } 594 ctx.strokeStyle = c;
595 595 }
596 ctx.lineWidth = lw; 596
597 this.renderPath( inset, ctx ); 597 ctx.lineWidth = lw;
598 ctx.stroke(); 598 this.renderPath( inset, ctx );
599 ctx.closePath(); 599 ctx.stroke();
600 } 600 ctx.closePath();
601 } 601 }
602 }, 602 }
603 },
603 604
604 createStroke: { 605 createStroke: {
605 value: function(ctr, width, height, strokeWidth, tlRad, blRad, brRad, trRad, material) { 606 value: function(ctr, width, height, strokeWidth, tlRad, blRad, brRad, trRad, material) {