aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhwc4872012-02-23 16:57:55 -0800
committerhwc4872012-02-23 16:57:55 -0800
commitd0661d6c587aced68a68e36a5ec4e81f8a2096e8 (patch)
tree3fd0caf1c4286d0e8f0774b7a230b4dfb09f6167
parent26bb2894c29d4608e843de01829d352dd3d00823 (diff)
downloadninja-d0661d6c587aced68a68e36a5ec4e81f8a2096e8.tar.gz
bug fixes for canvas 2d shape drawing.
Diffstat
-rwxr-xr-xjs/helper-classes/RDGE/GLCircle.js136
-rwxr-xr-xjs/helper-classes/RDGE/GLLine.js57
-rwxr-xr-xjs/helper-classes/RDGE/GLRectangle.js61
-rwxr-xr-xjs/tools/LineTool.js5
4 files changed, 128 insertions, 131 deletions
diff --git a/js/helper-classes/RDGE/GLCircle.js b/js/helper-classes/RDGE/GLCircle.js
index 712544c0..656657f6 100755
--- a/js/helper-classes/RDGE/GLCircle.js
+++ b/js/helper-classes/RDGE/GLCircle.js
@@ -398,59 +398,58 @@ function GLCircle()
398 // set up the fill style 398 // set up the fill style
399 ctx.beginPath(); 399 ctx.beginPath();
400 ctx.lineWidth = 0; 400 ctx.lineWidth = 0;
401 ctx.fillStyle = "#990000";
402 if (this._fillColor) 401 if (this._fillColor)
403 { 402 {
404 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 403 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
405 ctx.fillStyle = c; 404 ctx.fillStyle = c;
406 }
407 405
408 // draw the fill 406 // draw the fill
409 ctx.beginPath(); 407 ctx.beginPath();
410 var p = MathUtils.transformPoint( bezPts[0], mat ); 408 var p = MathUtils.transformPoint( bezPts[0], mat );
411 ctx.moveTo( p[0], p[1] ); 409 ctx.moveTo( p[0], p[1] );
412 var index = 1; 410 var index = 1;
413 while (index < n) 411 while (index < n)
414 { 412 {
415 p0 = MathUtils.transformPoint( bezPts[index], mat ); 413 p0 = MathUtils.transformPoint( bezPts[index], mat );
416 p1 = MathUtils.transformPoint( bezPts[index+1], mat ); 414 p1 = MathUtils.transformPoint( bezPts[index+1], mat );
417 415
418 x0 = p0[0]; y0 = p0[1]; 416 x0 = p0[0]; y0 = p0[1];
419 x1 = p1[0]; y1 = p1[1]; 417 x1 = p1[0]; y1 = p1[1];
420 ctx.quadraticCurveTo( x0, y0, x1, y1 ); 418 ctx.quadraticCurveTo( x0, y0, x1, y1 );
421 index += 2; 419 index += 2;
422 } 420 }
423 421
424 if ( MathUtils.fpSign(innerRad) > 0) 422 if ( MathUtils.fpSign(innerRad) > 0)
425 {
426 xScale = 0.5*innerRad*this._width;
427 yScale = 0.5*innerRad*this._height;
428 mat[0] = xScale;
429 mat[5] = yScale;
430
431 // get the bezier points
432 var bezPts = MathUtils.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI );
433 if (bezPts)
434 { 423 {
435 var n = bezPts.length; 424 xScale = 0.5*innerRad*this._width;
436 p = MathUtils.transformPoint( bezPts[0], mat ); 425 yScale = 0.5*innerRad*this._height;
437 ctx.moveTo( p[0], p[1] ); 426 mat[0] = xScale;
438 index = 1; 427 mat[5] = yScale;
439 while (index < n) 428
429 // get the bezier points
430 var bezPts = MathUtils.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI );
431 if (bezPts)
440 { 432 {
441 p0 = MathUtils.transformPoint( bezPts[index], mat ); 433 var n = bezPts.length;
442 p1 = MathUtils.transformPoint( bezPts[index+1], mat ); 434 p = MathUtils.transformPoint( bezPts[0], mat );
443 435 ctx.moveTo( p[0], p[1] );
444 var x0 = p0[0], y0 = p0[1], 436 index = 1;
445 x1 = p1[0], y1 = p1[1]; 437 while (index < n)
446 ctx.quadraticCurveTo( x0, y0, x1, y1 ); 438 {
447 index += 2; 439 p0 = MathUtils.transformPoint( bezPts[index], mat );
440 p1 = MathUtils.transformPoint( bezPts[index+1], mat );
441
442 var x0 = p0[0], y0 = p0[1],
443 x1 = p1[0], y1 = p1[1];
444 ctx.quadraticCurveTo( x0, y0, x1, y1 );
445 index += 2;
446 }
448 } 447 }
449 } 448 }
450 }
451 449
452 // fill the path 450 // fill the path
453 ctx.fill(); 451 ctx.fill();
452 }
454 453
455 // calculate the stroke matrix 454 // calculate the stroke matrix
456 xScale = 0.5*this._width - 0.5*lineWidth; 455 xScale = 0.5*this._width - 0.5*lineWidth;
@@ -461,35 +460,10 @@ function GLCircle()
461 // set up the stroke style 460 // set up the stroke style
462 ctx.beginPath(); 461 ctx.beginPath();
463 ctx.lineWidth = lineWidth; 462 ctx.lineWidth = lineWidth;
464 ctx.strokeStyle = "#0000ff";
465 if (this._strokeColor) 463 if (this._strokeColor)
466 { 464 {
467 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 465 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
468 ctx.strokeStyle = c; 466 ctx.strokeStyle = c;
469 }
470
471 // draw the stroke
472 p = MathUtils.transformPoint( bezPts[0], mat );
473 ctx.moveTo( p[0], p[1] );
474 index = 1;
475 while (index < n)
476 {
477 var p0 = MathUtils.transformPoint( bezPts[index], mat );
478 var p1 = MathUtils.transformPoint( bezPts[index+1], mat );
479
480 var x0 = p0[0], y0 = p0[1],
481 x1 = p1[0], y1 = p1[1];
482 ctx.quadraticCurveTo( x0, y0, x1, y1 );
483 index += 2;
484 }
485
486 if (MathUtils.fpSign(innerRad) > 0)
487 {
488 // calculate the stroke matrix
489 xScale = 0.5*innerRad*this._width - 0.5*lineWidth;
490 yScale = 0.5*innerRad*this._height - 0.5*lineWidth;
491 mat[0] = xScale;
492 mat[5] = yScale;
493 467
494 // draw the stroke 468 // draw the stroke
495 p = MathUtils.transformPoint( bezPts[0], mat ); 469 p = MathUtils.transformPoint( bezPts[0], mat );
@@ -505,10 +479,34 @@ function GLCircle()
505 ctx.quadraticCurveTo( x0, y0, x1, y1 ); 479 ctx.quadraticCurveTo( x0, y0, x1, y1 );
506 index += 2; 480 index += 2;
507 } 481 }
508 }
509 482
510 // render the stroke 483 if (MathUtils.fpSign(innerRad) > 0)
511 ctx.stroke(); 484 {
485 // calculate the stroke matrix
486 xScale = 0.5*innerRad*this._width - 0.5*lineWidth;
487 yScale = 0.5*innerRad*this._height - 0.5*lineWidth;
488 mat[0] = xScale;
489 mat[5] = yScale;
490
491 // draw the stroke
492 p = MathUtils.transformPoint( bezPts[0], mat );
493 ctx.moveTo( p[0], p[1] );
494 index = 1;
495 while (index < n)
496 {
497 var p0 = MathUtils.transformPoint( bezPts[index], mat );
498 var p1 = MathUtils.transformPoint( bezPts[index+1], mat );
499
500 var x0 = p0[0], y0 = p0[1],
501 x1 = p1[0], y1 = p1[1];
502 ctx.quadraticCurveTo( x0, y0, x1, y1 );
503 index += 2;
504 }
505 }
506
507 // render the stroke
508 ctx.stroke();
509 }
512 } 510 }
513 } 511 }
514 512
diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js
index f715a43c..5228ac09 100755
--- a/js/helper-classes/RDGE/GLLine.js
+++ b/js/helper-classes/RDGE/GLLine.js
@@ -364,41 +364,40 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro
364 var lineWidth = this._strokeWidth; 364 var lineWidth = this._strokeWidth;
365 ctx.beginPath(); 365 ctx.beginPath();
366 ctx.lineWidth = lineWidth; 366 ctx.lineWidth = lineWidth;
367 ctx.strokeStyle = "#0000ff";
368 if (this._strokeColor) 367 if (this._strokeColor)
369 { 368 {
370 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 369 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
371 ctx.strokeStyle = c; 370 ctx.strokeStyle = c;
372 }
373 371
374 // get the points 372 // get the points
375 var p0, p1; 373 var p0, p1;
376 var w = this._width, h = this._height; 374 var w = this._width, h = this._height;
377 if(this._slope === "vertical") 375 if(this._slope === "vertical")
378 { 376 {
379 p0 = [0.5*w, 0]; 377 p0 = [0.5*w, 0];
380 p1 = [0.5*w, h]; 378 p1 = [0.5*w, h];
381 } 379