diff options
author | Valerio Virgillito | 2012-05-22 14:51:35 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-05-22 14:51:35 -0700 |
commit | 862ee363584dfba4bdd9abacbc3a3244c7ec66b5 (patch) | |
tree | 2411bd4bf3478621a16c83ead914670e0d143372 /js/lib/geom/rectangle.js | |
parent | c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac (diff) | |
parent | 6b03f357f45d76733ae7bf5ff52ffe2fb2a84fda (diff) | |
download | ninja-862ee363584dfba4bdd9abacbc3a3244c7ec66b5.tar.gz |
Merge pull request #221 from ericmueller/3DBugs
3 d bugs
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-x | js/lib/geom/rectangle.js | 190 |
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 | }, |