aboutsummaryrefslogtreecommitdiff
path: root/js/helper-classes
diff options
context:
space:
mode:
authorhwc4872012-02-08 17:18:23 -0800
committerhwc4872012-02-08 17:18:23 -0800
commit170236c258e971331fc28747532a720d4cfb63cc (patch)
treeea1541a643e9111bfcdfbb2eac62e8230c98923b /js/helper-classes
parent9e26eb8e5315ffe961297c4fdf63cdeb5290f2db (diff)
downloadninja-170236c258e971331fc28747532a720d4cfb63cc.tar.gz
Changed the rendering for canvas 2D rectangle.
Diffstat (limited to 'js/helper-classes')
-rw-r--r--js/helper-classes/RDGE/GLRectangle.js135
1 files changed, 61 insertions, 74 deletions
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js
index e34532d2..d24ade2b 100644
--- a/js/helper-classes/RDGE/GLRectangle.js
+++ b/js/helper-classes/RDGE/GLRectangle.js
@@ -317,72 +317,71 @@ function GLRectangle()
317 var width = Math.round(this.getWidth()), 317 var width = Math.round(this.getWidth()),
318 height = Math.round(this.getHeight()); 318 height = Math.round(this.getHeight());
319 319
320 // get the top left point
321 pt = [inset, inset]; // top left corner 320 pt = [inset, inset]; // top left corner
322 rad = this.getTLRadius() - inset;
323 if (rad < 0) rad = 0;
324 pt[1] += rad;
325 if (MathUtils.fpSign(rad) == 0) pt[1] = 0;
326 ctx.moveTo( pt[0], pt[1] );
327
328 // get the bottom left point
329 pt = [inset, height - inset];
330 rad = this.getBLRadius() - inset;
331 if (rad < 0) rad = 0;
332 pt[1] -= rad;
333 ctx.lineTo( pt[0], pt[1] );
334
335 // get the bottom left arc
336 if (MathUtils.fpSign(rad) > 0)
337 {
338 ctr = [ this.getBLRadius(), height - this.getBLRadius() ];
339 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
340 ctx.arc( ctr[0], ctr[1], rad, Math.PI, 0.5*Math.PI, true );
341 }
342
343 // do the bottom of the rectangle
344 pt = [width - inset, height - inset];
345 rad = this.getBRRadius() - inset;
346 if (rad < 0) rad = 0;
347 pt[0] -= rad;
348 ctx.lineTo( pt[0], pt[1] );
349
350 // get the bottom right arc
351 if (MathUtils.fpSign(rad) > 0)
352 {
353 ctr = [width - this.getBRRadius(), height - this.getBRRadius()];
354 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
355 ctx.arc( ctr[0], ctr[1], rad, 0.5*Math.PI, 0.0, true );
356 }
357 321
358 // get the right of the rectangle 322 var tlRad = this._tlRadius; //top-left radius
359 pt = [width - inset, inset]; 323 var trRad = this._trRadius;
360 rad = this.getTRRadius() - inset; 324 var blRad = this._blRadius;
361 if (rad < 0) rad = 0; 325 var brRad = this._brRadius;
362 pt[1] += rad;
363 ctx.lineTo( pt[0], pt[1] );
364 326
365 // do the top right corner 327 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
366 if (MathUtils.fpSign(rad) > 0)
367 { 328 {
368 ctr = [width - this.getTRRadius(), this.getTRRadius()]; 329 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
369 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
370 ctx.arc( ctr[0], ctr[1], rad, 0.0, -0.5*Math.PI, true );
371 } 330 }
372 331 else
373 // do the top of the rectangle
374 pt = [inset, inset]
375 rad = this.getTLRadius() - inset;
376 if (rad < 0) rad = 0;
377 pt[0] += rad;
378 ctx.lineTo( pt[0], pt[1] );
379
380 // do the top left corner
381 if (MathUtils.fpSign(rad) > 0)
382 { 332 {
383 ctr = [this.getTLRadius(), this.getTLRadius()]; 333 // get the top left point
384 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); 334 rad = tlRad - inset;
385 ctx.arc( ctr[0], ctr[1], rad, -0.5*Math.PI, Math.PI, true ); 335 if (rad < 0) rad = 0;
336 pt[1] += rad;
337 if (MathUtils.fpSign(rad) == 0) pt[1] = inset;
338 ctx.moveTo( pt[0], pt[1] );
339
340 // get the bottom left point
341 pt = [inset, height - inset];
342 rad = blRad - inset;
343 if (rad < 0) rad = 0;
344 pt[1] -= rad;
345 ctx.lineTo( pt[0], pt[1] );
346
347 // get the bottom left curve
348 if (MathUtils.fpSign(rad) > 0)
349 ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset );
350
351 // do the bottom of the rectangle
352 pt = [width - inset, height - inset];
353 rad = brRad - inset;
354 if (rad < 0) rad = 0;
355 pt[0] -= rad;
356 ctx.lineTo( pt[0], pt[1] );
357
358 // get the bottom right arc
359 if (MathUtils.fpSign(rad) > 0)
360 ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad );
361
362 // get the right of the rectangle
363 pt = [width - inset, inset];
364 rad = trRad - inset;
365 if (rad < 0) rad = 0;
366 pt[1] += rad;
367 ctx.lineTo( pt[0], pt[1] );
368
369 // do the top right corner
370 if (MathUtils.fpSign(rad) > 0)
371 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset );
372
373 // do the top of the rectangle
374 pt = [inset, inset]
375 rad = tlRad - inset;
376 if (rad < 0) rad = 0;
377 pt[0] += rad;
378 ctx.lineTo( pt[0], pt[1] );
379
380 // do the top left corner
381 if (MathUtils.fpSign(rad) > 0)
382 ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
383 else
384 ctx.lineTo( inset, 2*inset );
386 } 385 }
387 } 386 }
388 387
@@ -401,32 +400,20 @@ function GLRectangle()
401 var w = world.getViewportWidth(), 400 var w = world.getViewportWidth(),
402 h = world.getViewportHeight(); 401 h = world.getViewportHeight();
403 402
404 // draw the fill 403 // set the fill
405 ctx.beginPath(); 404 ctx.beginPath();
406 ctx.fillStyle = "#990000"; 405 ctx.fillStyle = "#990000";
407 //ctx.strokeStyle = "#0000ff";
408 if (this._fillColor) 406 if (this._fillColor)
409 ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 407 ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
410 408
411 //ctx.lineWidth = 0; 409 // set the stroke
412 //ctx.rect( lw, lw, w - 2*lw, h- 2*lw );
413 //this.renderPath( lw, ctx )
414 //ctx.fill();
415 //ctx.closePath();
416
417 // draw the stroke
418 //ctx.beginPath();
419 //ctx.fillStyle = "#990000";
420 ctx.strokeStyle = "#0000ff"; 410 ctx.strokeStyle = "#0000ff";
421 if (this._strokeColor) 411 if (this._strokeColor)
422 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); 412 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
423 413
424 ctx.lineWidth = lw; 414 ctx.lineWidth = lw;
425 //ctx.rect( 0.5*lw, 0.5*lw, w-lw, h-lw );
426 var inset = Math.ceil( 0.5*lw ) + 0.5; 415 var inset = Math.ceil( 0.5*lw ) + 0.5;
427// console.log( "linewidth: " + lw + ", inset: " + inset+ ", width: " + Math.round(this.getWidth()) + ", height: " + Math.round(this.getHeight()) );
428 this.renderPath( inset, ctx ); 416 this.renderPath( inset, ctx );
429 //this.renderPath( lw, ctx );
430 ctx.fill(); 417 ctx.fill();
431 ctx.stroke(); 418 ctx.stroke();
432 ctx.closePath(); 419 ctx.closePath();