diff options
author | hwc487 | 2012-02-23 16:57:55 -0800 |
---|---|---|
committer | hwc487 | 2012-02-23 16:57:55 -0800 |
commit | d0661d6c587aced68a68e36a5ec4e81f8a2096e8 (patch) | |
tree | 3fd0caf1c4286d0e8f0774b7a230b4dfb09f6167 /js/helper-classes/RDGE/GLCircle.js | |
parent | 26bb2894c29d4608e843de01829d352dd3d00823 (diff) | |
download | ninja-d0661d6c587aced68a68e36a5ec4e81f8a2096e8.tar.gz |
bug fixes for canvas 2d shape drawing.
Diffstat (limited to 'js/helper-classes/RDGE/GLCircle.js')
-rwxr-xr-x | js/helper-classes/RDGE/GLCircle.js | 136 |
1 files changed, 67 insertions, 69 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 | ||