diff options
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-x | js/lib/geom/rectangle.js | 183 |
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) { |