aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/rectangle.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-04-26 11:13:03 -0700
committerValerio Virgillito2012-04-26 11:13:03 -0700
commit575c8a8fb6b32d01d48d94b55a0d469ad4ddebc8 (patch)
treeff4972ad9b2e26decd5a5cf971c1335cb6eba1a1 /js/lib/geom/rectangle.js
parentbcc8f8616f5ad4bf310928da6cbc01da12f6e468 (diff)
parent5e637fc2af6aa86e274d1932f69b61d56360ad27 (diff)
downloadninja-575c8a8fb6b32d01d48d94b55a0d469ad4ddebc8.tar.gz
Merge pull request #177 from mqg734/WebGLMaterials
Fixed some rectangle radius bugs in canvas 2d mode. Also changed canvas 2d gradients to match what the browser renders for a div's background.
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-xjs/lib/geom/rectangle.js20
1 files changed, 14 insertions, 6 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..fcd1c1bd 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() {
356 // various declarations 356 // various declarations
357 var pt, rad, ctr, startPt, bPts; 357 var pt, rad, ctr, startPt, bPts;
358 var width = Math.round(this.getWidth()), 358 var width = Math.round(this.getWidth()),
359 height = Math.round(this.getHeight()); 359 height = Math.round(this.getHeight()),
360 hw = 0.5*width,
361 hh = 0.5*height;
360 362
361 pt = [inset, inset]; // top left corner 363 pt = [inset, inset]; // top left corner
362 364
@@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() {
364 var trRad = this._trRadius; 366 var trRad = this._trRadius;
365 var blRad = this._blRadius; 367 var blRad = this._blRadius;
366 var brRad = this._brRadius; 368 var brRad = this._brRadius;
369 // limit the radii to half the rectangle dimension
370 var minDimen = hw < hh ? hw : hh;
371 if (tlRad > minDimen) tlRad = minDimen;
372 if (blRad > minDimen) blRad = minDimen;
373 if (brRad > minDimen) brRad = minDimen;
374 if (trRad > minDimen) trRad = minDimen;
367 375
368 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { 376 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
369 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); 377 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
@@ -452,13 +460,13 @@ var Rectangle = function GLRectangle() {
452 // render the fill 460 // render the fill
453 ctx.beginPath(); 461 ctx.beginPath();
454 if (this._fillColor) { 462 if (this._fillColor) {
455 inset = Math.ceil( lw ) + 0.5; 463 inset = Math.ceil( lw ) - 0.5;
456 464
457 if(this._fillColor.gradientMode) { 465 if(this._fillColor.gradientMode) {
458 if(this._fillColor.gradientMode === "radial") { 466 if(this._fillColor.gradientMode === "radial") {
459 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); 467 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
460 } else { 468 } else {
461 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); 469 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
462 } 470 }
463 colors = this._fillColor.color; 471 colors = this._fillColor.color;
464 472
@@ -486,11 +494,11 @@ var Rectangle = function GLRectangle() {
486 // render the stroke 494 // render the stroke
487 ctx.beginPath(); 495 ctx.beginPath();
488 if (this._strokeColor) { 496 if (this._strokeColor) {
489 inset = Math.ceil( 0.5*lw ) + 0.5; 497 inset = Math.ceil( 0.5*lw ) - 0.5;
490 498
491 if(this._strokeColor.gradientMode) { 499 if(this._strokeColor.gradientMode) {
492 if(this._strokeColor.gradientMode === "radial") { 500 if(this._strokeColor.gradientMode === "radial") {
493 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); 501 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
494 } else { 502 } else {
495 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 503 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
496 } 504 }