canvas interaction

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() {
                         this._fillColor = fillColor;
 
                         this._strokeStyle = strokeStyle;
+
+                        this._matrix = Matrix.I(4);
+                        //this._matrix[12] = xOffset;
+                        //this._matrix[13] = yOffset;
                 }
 
                 this.m_world = world;
@@ -187,7 +191,7 @@ var Circle = function GLCircle() {
                 // get the normalized device coordinates (NDC) for
                 // all position and dimensions.
                 var     vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-                var     xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+                var     xNDC = 2*this._xOffset/vpw,  yNDC = -2*this._yOffset/vph,
                         xRadNDC = this._width/vpw,  yRadNDC = this._height/vph,
                         xStrokeNDC = 2*this._strokeWidth/vpw,  yStrokeNDC = 2*this._strokeWidth/vph,
                         xInnRadNDC = this._innerRadius*xRadNDC,  yInnRadNDC = this._innerRadius*yRadNDC;
@@ -725,7 +729,7 @@ var Circle = function GLCircle() {
                 // get the normalized device coordinates (NDC) for
                 // the position and radii.
                 var     vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-                var     xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+                var     xNDC = 2*this._xOffset/vpw,  yNDC = -2*this._yOffset/vph,
                         xRadNDC = this._width/vpw,  yRadNDC = this._height/vph;
                 var projMat = world.makePerspectiveMatrix();
                 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 @@
 var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
 var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+
  ///////////////////////////////////////////////////////////////////////
 // Class GLRectangle
 //      GL representation of a rectangle.
@@ -54,6 +55,10 @@ var Rectangle = function GLRectangle() {
                         this.setBRRadius(brRadius);
 
                         this._strokeStyle = strokeStyle;
+
+                        this._matrix = Matrix.I(4);
+                        //this._matrix[12] = xoffset;
+                        //this._matrix[13] = yoffset;
                 }
 
                 // the overall radius includes the fill and the stroke.  separate the two based onthe stroke width
@@ -365,26 +370,36 @@ var Rectangle = function GLRectangle() {
                 var blRad = this._blRadius;
                 var brRad = this._brRadius;
 
+                var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+                var world = this.getWorld();
+                viewUtils.pushViewportObj( world.getCanvas() );
+                var cop = viewUtils.getCenterOfProjection();
+                viewUtils.popViewportObj();
+                var xCtr = cop[0] + this._xOffset,                                      yCtr = cop[1] - this._yOffset;
+                var xLeft = xCtr - 0.5*this.getWidth(),                         yTop = yCtr - 0.5*this.getHeight();
+                var xDist = cop[0] - xLeft,                                                     yDist = cop[1] - yTop;
+                var xOff = 0.5*world.getViewportWidth() - xDist,        yOff  = 0.5*world.getViewportHeight() - yDist;
+
                 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
-                        ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
+                        ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
                 } else {
                         // get the top left point
                         rad = tlRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[1] += rad;
                         if (MathUtils.fpSign(rad) == 0)  pt[1] = inset;
-                        ctx.moveTo( pt[0],  pt[1] );
+                        ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
 
                         // get the bottom left point
                         pt = [inset, height - inset];
                         rad = blRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[1] -= rad;
-                        ctx.lineTo( pt[0],  pt[1] );
+                        ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
 
                         // get the bottom left curve
                         if (MathUtils.fpSign(rad) > 0) {
-                                ctx.quadraticCurveTo( inset, height-inset,  inset+rad, height-inset );
+                                ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
             }
 
                         // do the bottom of the rectangle
@@ -392,11 +407,11 @@ var Rectangle = function GLRectangle() {
                         rad = brRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[0] -= rad;
-                        ctx.lineTo( pt[0], pt[1] );
+                        ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
                         // get the bottom right arc
                         if (MathUtils.fpSign(rad) > 0) {
-                                ctx.quadraticCurveTo( width-inset, height-inset,  width-inset, height-inset-rad );
+                                ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
             }
 
                         // get the right of the rectangle
@@ -404,11 +419,11 @@ var Rectangle = function GLRectangle() {
                         rad = trRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[1] += rad;
-                        ctx.lineTo( pt[0], pt[1] );
+                        ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
                         // do the top right corner
                         if (MathUtils.fpSign(rad) > 0) {
-                                ctx.quadraticCurveTo( width-inset, inset,  width-inset-rad, inset );
+                                ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
             }
 
                         // do the top of the rectangle
@@ -416,13 +431,13 @@ var Rectangle = function GLRectangle() {
                         rad = tlRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[0] += rad;
-                        ctx.lineTo( pt[0], pt[1] );
+                        ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
                         // do the top left corner
                         if (MathUtils.fpSign(rad) > 0) {
-                                ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
+                                ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
             } else {
-                                ctx.lineTo( inset, 2*inset );
+                                ctx.lineTo( inset+xOff, 2*inset+yOff );
             }
                 }
         };
@@ -430,7 +445,7 @@ var Rectangle = function GLRectangle() {
     this.render = function() {
         // get the world
         var world = this.getWorld();
-        if (!world)  throw( "null world in rectangle render" );
+        if (!world)  throw( "null world in rectangle render" );                 
 
          // get the context
                 var ctx = world.get2DContext();