aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-02-09 08:51:04 -0800
committerNivesh Rajbhandari2012-02-09 08:51:04 -0800
commit8b1c3431be14b12ea5f66fe940f579c740784724 (patch)
tree8e286931fd4877a831fdc55052df4f582271aec7
parent09030b2230631961e972bd3ee8537239741b243d (diff)
downloadninja-8b1c3431be14b12ea5f66fe940f579c740784724.tar.gz
Changed the rendering for canvas 2D rectangle.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rw-r--r--js/helper-classes/RDGE/GLRectangle.js137
1 files changed, 62 insertions, 75 deletions
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js
index b88ecc71..2f242414 100644
--- a/js/helper-classes/RDGE/GLRectangle.js
+++ b/js/helper-classes/RDGE/GLRectangle.js
@@ -312,72 +312,71 @@ function GLRectangle()
312 var width = Math.round(this.getWidth()), 312 var width = Math.round(this.getWidth()),
313 height = Math.round(this.getHeight()); 313 height = Math.round(this.getHeight());
314 314
315 // get the top left point
316 pt = [inset, inset]; // top left corner 315 pt = [inset, inset]; // top left corner
317 rad = this.getTLRadius() - inset;
318 if (rad < 0) rad = 0;
319 pt[1] += rad;
320 if (MathUtils.fpSign(rad) == 0) pt[1] = 0;
321 ctx.moveTo( pt[0], pt[1] );
322
323 // get the bottom left point
324 pt = [inset, height - inset];
325 rad = this.getBLRadius() - inset;
326 if (rad < 0) rad = 0;
327 pt[1] -= rad;
328 ctx.lineTo( pt[0], pt[1] );
329
330 // get the bottom left arc
331 if (MathUtils.fpSign(rad) > 0)
332 {
333 ctr = [ this.getBLRadius(), height - this.getBLRadius() ];
334 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
335 ctx.arc( ctr[0], ctr[1], rad, Math.PI, 0.5*Math.PI, true );
336 }
337
338 // do the bottom of the rectangle
339 pt = [width - inset, height - inset];
340 rad = this.getBRRadius() - inset;
341 if (rad < 0) rad = 0;
342 pt[0] -= rad;
343 ctx.lineTo( pt[0], pt[1] );
344
345 // get the bottom right arc
346 if (MathUtils.fpSign(rad) > 0)
347 {
348 ctr = [width - this.getBRRadius(), height - this.getBRRadius()];
349 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
350 ctx.arc( ctr[0], ctr[1], rad, 0.5*Math.PI, 0.0, true );
351 }
352 316
353 // get the right of the rectangle 317 var tlRad = this._tlRadius; //top-left radius
354 pt = [width - inset, inset]; 318 var trRad = this._trRadius;
355 rad = this.getTRRadius() - inset; 319 var blRad = this._blRadius;
356 if (rad < 0) rad = 0; 320 var brRad = this._brRadius;
357 pt[1] += rad;
358 ctx.lineTo( pt[0], pt[1] );
359 321
360 // do the top right corner 322 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
361 if (MathUtils.fpSign(rad) > 0)
362 { 323 {
363 ctr = [width - this.getTRRadius(), this.getTRRadius()]; 324 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
364 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
365 ctx.arc( ctr[0], ctr[1], rad, 0.0, -0.5*Math.PI, true );
366 } 325 }
367 326 else
368 // do the top of the rectangle
369 pt = [inset, inset]
370 rad = this.getTLRadius() - inset;
371 if (rad < 0) rad = 0;
372 pt[0] += rad;
373 ctx.lineTo( pt[0], pt[1] );
374
375 // do the top left corner
376 if (MathUtils.fpSign(rad) > 0)
377 { 327 {
378 ctr = [this.getTLRadius(), this.getTLRadius()]; 328 // get the top left point
379 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); 329 rad = tlRad - inset;
380 ctx.arc( ctr[0], ctr[1], rad, -0.5*Math.PI, Math.PI, true ); 330 if (rad < 0) rad = 0;
331 pt[1] += rad;
332 if (MathUtils.fpSign(rad) == 0) pt[1] = inset;
333 ctx.moveTo( pt[0], pt[1] );
334
335 // get the bottom left point
336 pt = [inset, height - inset];
337 rad = blRad - inset;
338 if (rad < 0) rad = 0;
339 pt[1] -= rad;
340 ctx.lineTo( pt[0], pt[1] );
341
342 // get the bottom left curve
343 if (MathUtils.fpSign(rad) > 0)
344 ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset );
345
346 // do the bottom of the rectangle
347 pt = [width - inset, height - inset];
348 rad = brRad - inset;
349 if (rad < 0) rad = 0;
350 pt[0] -= rad;
351 ctx.lineTo( pt[0], pt[1] );
352
353 // get the bottom right arc
354 if (MathUtils.fpSign(rad) > 0)
355 ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad );
356
357 // get the right of the rectangle
358 pt = [width - inset, inset];
359 rad = trRad - inset;
360 if (rad < 0) rad = 0;
361 pt[1] += rad;
362 ctx.lineTo( pt[0], pt[1] );
363
364 // do the top right corner
365 if (MathUtils.fpSign(rad) > 0)
366 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset );
367
368 // do the top of the rectangle
369 pt = [inset, inset]
370 rad = tlRad - inset;
371 if (rad < 0) rad = 0;
372 pt[0] += rad;
373 ctx.lineTo( pt[0], pt[1] );
374
375 // do the top left corner
376 if (MathUtils.fpSign(rad) > 0)
377 ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
378 else
379 ctx.lineTo( inset, 2*inset );
381 } 380 }
382 } 381 }
383 382
@@ -396,32 +395,20 @@ function GLRectangle()
396 var w = world.getViewportWidth(), 395 var w = world.getViewportWidth(),
397 h = world.getViewportHeight(); 396 h = world.getViewportHeight();
398 397
399 // draw the fill 398 // set the fill
400 ctx.beginPath(); 399 ctx.beginPath();
401 ctx.fillStyle = "#990000"; 400 ctx.fillStyle = "#990000";
402 //ctx.strokeStyle = "#0000ff";
403 if (this._fillColor) 401 if (this._fillColor)
404 ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 402 ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
405 403
406 //ctx.lineWidth = 0; 404 // set the stroke
407 //ctx.rect( lw, lw, w - 2*lw, h- 2*lw );
408 //this.renderPath( lw, ctx )
409 //ctx.fill();
410 //ctx.closePath();
411
412 // draw the stroke
413 //ctx.beginPath();
414 //ctx.fillStyle = "#990000";
415 ctx.strokeStyle = "#0000ff"; 405 ctx.strokeStyle = "#0000ff";
416 if (this._strokeColor) 406 if (this._strokeColor)
417 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); 407 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
418 408
419 ctx.lineWidth = lw; 409 ctx.lineWidth = lw;
420 //ctx.rect( 0.5*lw, 0.5*lw, w-lw, h-lw );
421 var inset = Math.ceil( 0.5*lw ) + 0.5; 410 var inset = Math.ceil( 0.5*lw ) + 0.5;
422// console.log( "linewidth: " + lw + ", inset: " + inset+ ", width: " + Math.round(this.getWidth()) + ", height: " + Math.round(this.getHeight()) );
423 this.renderPath( inset, ctx ); 411 this.renderPath( inset, ctx );
424 //this.renderPath( lw, ctx );
425 ctx.fill(); 412 ctx.fill();
426 ctx.stroke(); 413 ctx.stroke();
427 ctx.closePath(); 414 ctx.closePath();
@@ -1193,4 +1180,4 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver
1193 renderer.createPrimitive(prim, vertexCount); 1180 renderer.createPrimitive(prim, vertexCount);
1194 1181
1195 return prim; 1182 return prim;
1196} \ No newline at end of file 1183}