aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-xjs/lib/geom/circle.js8
-rwxr-xr-xjs/lib/geom/rectangle.js39
2 files changed, 33 insertions, 14 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 1073c2db..896803bf 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -46,6 +46,10 @@ var Circle = function GLCircle() {
46 this._fillColor = fillColor; 46 this._fillColor = fillColor;
47 47
48 this._strokeStyle = strokeStyle; 48 this._strokeStyle = strokeStyle;
49
50 this._matrix = Matrix.I(4);
51 //this._matrix[12] = xOffset;
52 //this._matrix[13] = yOffset;
49 } 53 }
50 54
51 this.m_world = world; 55 this.m_world = world;
@@ -187,7 +191,7 @@ var Circle = function GLCircle() {
187 // get the normalized device coordinates (NDC) for 191 // get the normalized device coordinates (NDC) for
188 // all position and dimensions. 192 // all position and dimensions.
189 var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); 193 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
190 var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, 194 var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph,
191 xRadNDC = this._width/vpw, yRadNDC = this._height/vph, 195 xRadNDC = this._width/vpw, yRadNDC = this._height/vph,
192 xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, 196 xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph,
193 xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; 197 xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC;
@@ -725,7 +729,7 @@ var Circle = function GLCircle() {
725 // get the normalized device coordinates (NDC) for 729 // get the normalized device coordinates (NDC) for
726 // the position and radii. 730 // the position and radii.
727 var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); 731 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
728 var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, 732 var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph,
729 xRadNDC = this._width/vpw, yRadNDC = this._height/vph; 733 xRadNDC = this._width/vpw, yRadNDC = this._height/vph;
730 var projMat = world.makePerspectiveMatrix(); 734 var projMat = world.makePerspectiveMatrix();
731 var z = -world.getViewDistance(); 735 var z = -world.getViewDistance();
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..d9f1f0b1 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
@@ -365,26 +370,36 @@ var Rectangle = function GLRectangle() {
365 var blRad = this._blRadius; 370 var blRad = this._blRadius;
366 var brRad = this._brRadius; 371 var brRad = this._brRadius;
367 372
373 var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
374 var world = this.getWorld();
375 viewUtils.pushViewportObj( world.getCanvas() );
376 var cop = viewUtils.getCenterOfProjection();
377 viewUtils.popViewportObj();
378 var xCtr = cop[0] + this._xOffset, yCtr = cop[1] - this._yOffset;
379 var xLeft = xCtr - 0.5*this.getWidth(), yTop = yCtr - 0.5*this.getHeight();
380 var xDist = cop[0] - xLeft, yDist = cop[1] - yTop;
381 var xOff = 0.5*world.getViewportWidth() - xDist, yOff = 0.5*world.getViewportHeight() - yDist;
382
368 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { 383 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
369 ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); 384 ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
370 } else { 385 } else {
371 // get the top left point 386 // get the top left point
372 rad = tlRad - inset; 387 rad = tlRad - inset;
373 if (rad < 0) rad = 0; 388 if (rad < 0) rad = 0;
374 pt[1] += rad; 389 pt[1] += rad;
375 if (MathUtils.fpSign(rad) == 0) pt[1] = inset; 390 if (MathUtils.fpSign(rad) == 0) pt[1] = inset;
376 ctx.moveTo( pt[0], pt[1] ); 391 ctx.moveTo( pt[0]+xOff, pt[1]+yOff );
377 392
378 // get the bottom left point 393 // get the bottom left point
379 pt = [inset, height - inset]; 394 pt = [inset, height - inset];
380 rad = blRad - inset; 395 rad = blRad - inset;
381 if (rad < 0) rad = 0; 396 if (rad < 0) rad = 0;
382 pt[1] -= rad; 397 pt[1] -= rad;
383 ctx.lineTo( pt[0], pt[1] ); 398 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
384 399
385 // get the bottom left curve 400 // get the bottom left curve
386 if (MathUtils.fpSign(rad) > 0) { 401 if (MathUtils.fpSign(rad) > 0) {
387 ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); 402 ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff );
388 } 403 }
389 404
390 // do the bottom of the rectangle 405 // do the bottom of the rectangle
@@ -392,11 +407,11 @@ var Rectangle = function GLRectangle() {
392 rad = brRad - inset; 407 rad = brRad - inset;
393 if (rad < 0) rad = 0; 408 if (rad < 0) rad = 0;
394 pt[0] -= rad; 409 pt[0] -= rad;
395 ctx.lineTo( pt[0], pt[1] ); 410 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
396 411
397 // get the bottom right arc 412 // get the bottom right arc
398 if (MathUtils.fpSign(rad) > 0) { 413 if (MathUtils.fpSign(rad) > 0) {
399 ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); 414 ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff );
400 } 415 }
401 416
402 // get the right of the rectangle 417 // get the right of the rectangle
@@ -404,11 +419,11 @@ var Rectangle = function GLRectangle() {
404 rad = trRad - inset; 419 rad = trRad - inset;
405 if (rad < 0) rad = 0; 420 if (rad < 0) rad = 0;
406 pt[1] += rad; 421 pt[1] += rad;
407 ctx.lineTo( pt[0], pt[1] ); 422 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
408 423
409 // do the top right corner 424 // do the top right corner
410 if (MathUtils.fpSign(rad) > 0) { 425 if (MathUtils.fpSign(rad) > 0) {
411 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); 426 ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff );
412 } 427 }
413 428
414 // do the top of the rectangle 429 // do the top of the rectangle
@@ -416,13 +431,13 @@ var Rectangle = function GLRectangle() {
416 rad = tlRad - inset; 431 rad = tlRad - inset;
417 if (rad < 0) rad = 0; 432 if (rad < 0) rad = 0;
418 pt[0] += rad; 433 pt[0] += rad;
419 ctx.lineTo( pt[0], pt[1] ); 434 ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
420 435
421 // do the top left corner 436 // do the top left corner
422 if (MathUtils.fpSign(rad) > 0) { 437 if (MathUtils.fpSign(rad) > 0) {
423 ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); 438 ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
424 } else { 439 } else {
425 ctx.lineTo( inset, 2*inset ); 440 ctx.lineTo( inset+xOff, 2*inset+yOff );
426 } 441 }
427 } 442 }
428 }; 443 };
@@ -430,7 +445,7 @@ var Rectangle = function GLRectangle() {
430 this.render = function() { 445 this.render = function() {
431 // get the world 446 // get the world
432 var world = this.getWorld(); 447 var world = this.getWorld();
433 if (!world) throw( "null world in rectangle render" ); 448 if (!world) throw( "null world in rectangle render" );
434 449
435 // get the context 450 // get the context
436 var ctx = world.get2DContext(); 451 var ctx = world.get2DContext();