aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/rectangle.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-04-30 14:49:49 -0700
committerValerio Virgillito2012-04-30 14:49:49 -0700
commit6b1a6994d98a18b45016b97ac8d81483109a586c (patch)
treecda8a39f8813fb5c0f9b4fb1d37007e6ec971128 /js/lib/geom/rectangle.js
parentc8fac64d4ad8ac18744a17a5e0f0d17204355fd6 (diff)
parent48e442977ef1630e0f664265a7142320b55d7d20 (diff)
downloadninja-6b1a6994d98a18b45016b97ac8d81483109a586c.tar.gz
Merge pull request #182 from ericmueller/Canvas-interaction
Canvas interaction
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-xjs/lib/geom/rectangle.js40
1 files changed, 27 insertions, 13 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index fcd1c1bd..490a9a6f 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -7,6 +7,7 @@
7var GeomObj = require("js/lib/geom/geom-obj").GeomObj; 7var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
8var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; 8var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive;
9var MaterialsModel = require("js/models/materials-model").MaterialsModel; 9var MaterialsModel = require("js/models/materials-model").MaterialsModel;
10
10 /////////////////////////////////////////////////////////////////////// 11 ///////////////////////////////////////////////////////////////////////
11// Class GLRectangle 12// Class GLRectangle
12// GL representation of a rectangle. 13// GL representation of a rectangle.
@@ -54,6 +55,10 @@ var Rectangle = function GLRectangle() {
54 this.setBRRadius(brRadius); 55 this.setBRRadius(brRadius);
55 56
56 this._strokeStyle = strokeStyle; 57 this._strokeStyle = strokeStyle;
58
59 this._matrix = Matrix.I(4);
60 //this._matrix[12] = xoffset;
61 //this._matrix[13] = yoffset;
57 } 62 }
58 63
59 // the overall radius includes the fill and the stroke. separate the two based onthe stroke width 64 // the overall radius includes the fill and the stroke. separate the two based onthe stroke width
@@ -373,26 +378,36 @@ var Rectangle = function GLRectangle() {
373 if (brRad > minDimen) brRad = minDimen; 378 if (brRad > minDimen) brRad = minDimen;
374 if (trRad > minDimen) trRad = minDimen; 379 if (trRad > minDimen) trRad = minDimen;
375 380
381 var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
382 var world = this.getWorld();
383 viewUtils.pushViewportObj( world.getCanvas() );
384 var cop = viewUtils.getCenterOfProjection();
385 viewUtils.popViewportObj();
386 var xCtr = cop[0] + this._xOffset, yCtr = cop[1] - this._yOffset;
387 var xLeft = xCtr - 0.5*this.getWidth(), yTop = yCtr - 0.5*this.getHeight();
388 var xDist = cop[0] - xLeft, yDist = cop[1] - yTop;
389 var xOff = 0.5*world.getViewportWidth() - xDist, yOff = 0.5*world.getViewportHeight() - yDist;
390
376 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { 391 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
377 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); 392 ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
378 } else { 393 } else {
379 // get the top left point 394 // get the top left point
380 rad = tlRad - inset; 395 rad = tlRad - inset;
381 if (rad < 0) rad = 0; 396 if (rad < 0) rad = 0;
382 pt[1] += rad; 397 pt[1] += rad;
383 if (MathUtils.fpSign(rad) == 0) pt[1] = inset; 398 if (MathUtils.fpSign(rad) == 0) pt[1] = inset;
384 ctx.moveTo( pt[0], pt[1] ); 399 ctx.moveTo( pt[0]+xOff, pt[1]+yOff );
385 400
386 // get the bottom left point 401 // get the bottom left point
387 pt = [inset, height - inset]; 402 pt = [inset, height - inset];
388 rad = blRad - inset; 403 rad = blRad - inset;
389 if (rad < 0) rad = 0; 404 if (rad < 0) rad = 0;
390 pt[1] -= rad; 405 pt[1] -= rad;
391 ctx.lineTo( pt[0], pt[1] ); 406 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
392 407
393 // get the bottom left curve 408 // get the bottom left curve
394 if (MathUtils.fpSign(rad) > 0) { 409 if (MathUtils.fpSign(rad) > 0) {
395 ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); 410 ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff );
396 } 411 }
397 412
398 // do the bottom of the rectangle 413 // do the bottom of the rectangle
@@ -400,11 +415,11 @@ var Rectangle = function GLRectangle() {
400 rad = brRad - inset; 415 rad = brRad - inset;
401 if (rad < 0) rad = 0; 416 if (rad < 0) rad = 0;
402 pt[0] -= rad; 417 pt[0] -= rad;
403 ctx.lineTo( pt[0], pt[1] ); 418 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
404 419
405 // get the bottom right arc 420 // get the bottom right arc
406 if (MathUtils.fpSign(rad) > 0) { 421 if (MathUtils.fpSign(rad) > 0) {
407 ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); 422 ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff );
408 } 423 }
409 424
410 // get the right of the rectangle 425 // get the right of the rectangle
@@ -412,11 +427,11 @@ var Rectangle = function GLRectangle() {
412 rad = trRad - inset; 427 rad = trRad - inset;
413 if (rad < 0) rad = 0; 428 if (rad < 0) rad = 0;
414 pt[1] += rad; 429 pt[1] += rad;
415 ctx.lineTo( pt[0], pt[1] ); 430 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
416 431
417 // do the top right corner 432 // do the top right corner
418 if (MathUtils.fpSign(rad) > 0) { 433 if (MathUtils.fpSign(rad) > 0) {
419 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); 434 ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff );
420 } 435 }
421 436
422 // do the top of the rectangle 437 // do the top of the rectangle
@@ -424,13 +439,13 @@ var Rectangle = function GLRectangle() {
424 rad = tlRad - inset; 439 rad = tlRad - inset;
425 if (rad < 0) rad = 0; 440 if (rad < 0) rad = 0;
426 pt[0] += rad; 441 pt[0] += rad;
427 ctx.lineTo( pt[0], pt[1] ); 442 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
428 443
429 // do the top left corner 444 // do the top left corner
430 if (MathUtils.fpSign(rad) > 0) { 445 if (MathUtils.fpSign(rad) > 0) {
431 ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); 446 ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
432 } else { 447 } else {
433 ctx.lineTo( inset, 2*inset ); 448 ctx.lineTo( inset+xOff, 2*inset+yOff );
434 } 449 }
435 } 450 }
436 }; 451 };
@@ -438,7 +453,7 @@ var Rectangle = function GLRectangle() {
438 this.render = function() { 453 this.render = function() {
439 // get the world 454 // get the world
440 var world = this.getWorld(); 455 var world = this.getWorld();
441 if (!world) throw( "null world in rectangle render" ); 456 if (!world) throw( "null world in rectangle render" );
442 457
443 // get the context 458 // get the context
444 var ctx = world.get2DContext(); 459 var ctx = world.get2DContext();
@@ -686,7 +701,6 @@ var Rectangle = function GLRectangle() {
686 var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); 701 var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane );
687 702
688 // transform the projected point back to the XY plane 703 // transform the projected point back to the XY plane
689 //var invMat = mat.inverse();
690 var invMat = glmat4.inverse(mat, []); 704 var invMat = glmat4.inverse(mat, []);
691 var planePt = MathUtils.transformPoint( projPt, invMat ); 705 var planePt = MathUtils.transformPoint( projPt, invMat );
692 706