From 27c1ba250a7db26cf24dd456d20af9ff1649e638 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 23 Apr 2012 17:04:48 -0700 Subject: canvas interaction --- js/lib/geom/circle.js | 8 ++++++-- js/lib/geom/rectangle.js | 39 +++++++++++++++++++++++++++------------ 2 files changed, 33 insertions(+), 14 deletions(-) (limited to 'js/lib/geom') 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(); -- cgit v1.2.3