diff options
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 50 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 61 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 59 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 40 |
4 files changed, 181 insertions, 29 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index efd21c4a..1fae0c1d 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() { | |||
117 | }; | 117 | }; |
118 | 118 | ||
119 | this.getPoint = function (index) { | 119 | this.getPoint = function (index) { |
120 | return this._Points[index]; | 120 | return this._Points[index].slice(0); |
121 | }; | 121 | }; |
122 | 122 | ||
123 | this.addPoint = function (pt) { | 123 | this.addPoint = function (pt) { |
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() { | |||
399 | 399 | ||
400 | // ***** unproject all the centered points and convert them to 2D (plane space)***** | 400 | // ***** unproject all the centered points and convert them to 2D (plane space)***** |
401 | // (undo the projection step performed by the browser) | 401 | // (undo the projection step performed by the browser) |
402 | localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas | 402 | //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas |
403 | localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv); | 403 | localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv); |
404 | 404 | ||
405 | //add to the list of local points | 405 | //add to the list of local points |
@@ -568,17 +568,17 @@ var BrushStroke = function GLBrushStroke() { | |||
568 | } | 568 | } |
569 | ctx.save(); | 569 | ctx.save(); |
570 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); | 570 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); |
571 | this.drawToContext(ctx, 0, 0, false); | 571 | this.drawToContext(ctx, false); |
572 | ctx.restore(); | 572 | ctx.restore(); |
573 | } //this.render() | 573 | } //this.render() |
574 | 574 | ||
575 | this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){ | 575 | this.drawToContext = function(ctx, drawStageWorldPts, stageWorldDeltaX, stageWorldDeltaY, stageWorldToScreenMat){ |
576 | var points = this._LocalPoints; | 576 | var points = this._LocalPoints; |
577 | if (drawStageWorldPts){ | 577 | if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet) |
578 | points = this._Points; | 578 | points = this._Points; |
579 | } | 579 | } |
580 | var numPoints = points.length; | 580 | var numPoints = points.length; |
581 | 581 | var tempP, p; | |
582 | if (this._strokeUseCalligraphic) { | 582 | if (this._strokeUseCalligraphic) { |
583 | //build the stamp for the brush stroke | 583 | //build the stamp for the brush stroke |
584 | var t=0; | 584 | var t=0; |
@@ -623,9 +623,23 @@ var BrushStroke = function GLBrushStroke() { | |||
623 | //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; | 623 | //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; |
624 | ctx.translate(disp[0],disp[1]); | 624 | ctx.translate(disp[0],disp[1]); |
625 | ctx.beginPath(); | 625 | ctx.beginPath(); |
626 | ctx.moveTo(points[0][0]-origX, points[0][1]-origY); | 626 | if (drawStageWorldPts) { |
627 | tempP = points[0].slice(0); | ||
628 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
629 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
630 | } else { | ||
631 | p = points[0]; | ||
632 | } | ||
633 | ctx.moveTo(p[0],p[1]); | ||
627 | for (var i=0;i<numPoints;i++){ | 634 | for (var i=0;i<numPoints;i++){ |
628 | ctx.lineTo(points[i][0]-origX, points[i][1]-origY); | 635 | if (drawStageWorldPts) { |
636 | tempP = points[i].slice(0); | ||
637 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
638 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
639 | } else { | ||
640 | p = points[i]; | ||
641 | } | ||
642 | ctx.lineTo(p[0],p[1]); | ||
629 | } | 643 | } |
630 | ctx.stroke(); | 644 | ctx.stroke(); |
631 | ctx.restore(); | 645 | ctx.restore(); |
@@ -641,13 +655,27 @@ var BrushStroke = function GLBrushStroke() { | |||
641 | ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; | 655 | ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; |
642 | for (var l=0;l<numlayers;l++){ | 656 | for (var l=0;l<numlayers;l++){ |
643 | ctx.beginPath(); | 657 | ctx.beginPath(); |
644 | ctx.moveTo(points[0][0]-origX, points[0][1]-origY); | 658 | if (drawStageWorldPts) { |
659 | tempP = points[0].slice(0); | ||
660 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
661 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
662 | } else { | ||
663 | p = points[0]; | ||
664 | } | ||
665 | ctx.moveTo(p[0],p[1]); | ||
645 | if (numPoints===1){ | 666 | if (numPoints===1){ |
646 | //display a tiny segment as a single point | 667 | //display a tiny segment as a single point |
647 | ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01); | 668 | ctx.lineTo(p[0],p[1]+0.01); |
648 | } | 669 | } |
649 | for (var i=1;i<numPoints;i++){ | 670 | for (var i=1;i<numPoints;i++){ |
650 | ctx.lineTo(points[i][0]-origX, points[i][1]-origY); | 671 | if (drawStageWorldPts) { |
672 | tempP = points[i].slice(0); | ||
673 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
674 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
675 | } else { | ||
676 | p = points[i]; | ||
677 | } | ||
678 | ctx.lineTo(p[0],p[1]); | ||
651 | } | 679 | } |
652 | ctx.lineWidth=2*l+minStrokeWidth; | 680 | ctx.lineWidth=2*l+minStrokeWidth; |
653 | ctx.stroke(); | 681 | ctx.stroke(); |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 218dcfa6..0f1f49a9 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -4,9 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var GeomObj = require("js/lib/geom/geom-obj").GeomObj; | 7 | var GeomObj = require("js/lib/geom/geom-obj").GeomObj; |
8 | var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; | 8 | var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; |
9 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; | 9 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; |
10 | var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; | ||
11 | var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; | ||
12 | |||
10 | /////////////////////////////////////////////////////////////////////// | 13 | /////////////////////////////////////////////////////////////////////// |
11 | // Class GLCircle | 14 | // Class GLCircle |
12 | // GL representation of a circle. | 15 | // GL representation of a circle. |
@@ -46,6 +49,10 @@ var Circle = function GLCircle() { | |||
46 | this._fillColor = fillColor; | 49 | this._fillColor = fillColor; |
47 | 50 | ||
48 | this._strokeStyle = strokeStyle; | 51 | this._strokeStyle = strokeStyle; |
52 | |||
53 | this._matrix = Matrix.I(4); | ||
54 | //this._matrix[12] = xOffset; | ||
55 | //this._matrix[13] = yOffset; | ||
49 | } | 56 | } |
50 | 57 | ||
51 | this.m_world = world; | 58 | this.m_world = world; |
@@ -187,7 +194,7 @@ var Circle = function GLCircle() { | |||
187 | // get the normalized device coordinates (NDC) for | 194 | // get the normalized device coordinates (NDC) for |
188 | // all position and dimensions. | 195 | // all position and dimensions. |
189 | var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); | 196 | var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); |
190 | var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, | 197 | var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, |
191 | xRadNDC = this._width/vpw, yRadNDC = this._height/vph, | 198 | xRadNDC = this._width/vpw, yRadNDC = this._height/vph, |
192 | xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, | 199 | xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, |
193 | xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; | 200 | xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; |
@@ -706,6 +713,49 @@ var Circle = function GLCircle() { | |||
706 | return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0); | 713 | return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0); |
707 | }; | 714 | }; |
708 | 715 | ||
716 | this.getNearPoint = function( pt, dir ) | ||
717 | { | ||
718 | var world = this.getWorld(); | ||
719 | if (!world) throw( "null world in getNearPoint" ); | ||
720 | |||
721 | // the input point and direction are in GL space | ||
722 | // project to the z == 0 plane | ||
723 | var mat = this.getMatrix(); | ||
724 | var plane = [0,0,1,0]; | ||
725 | plane = MathUtils.transformPlane( plane, mat ); | ||
726 | var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); | ||
727 | |||
728 | // get the center of the circle in GL space | ||
729 | var ctr = this.getGLCenter(); | ||
730 | |||
731 | // transform the projected point to the plane of the circle | ||
732 | var planePt = MathUtils.transformPoint( projPt, mat ); | ||
733 | |||
734 | // get a matrix mapping the circle to a 2D coordinate system | ||
735 | var normal = [ mat[8], mat[9], mat[10] ]; | ||
736 | var planeMat = drawUtils.getPlaneToWorldMatrix(normal, ctr); | ||
737 | var planeMatInv = glmat4.inverse( planeMat, [] ); | ||
738 | var planePt2D = MathUtils.transformPoint( planePt, planeMatInv ); | ||
739 | |||
740 | // get 2 points on the axes of the oval | ||
741 | var wPt = this.preViewToGL( [this._xOffset + 0.5*this.getWidth(), this._yOffset, 0] ), | ||
742 | hPt = this.preViewToGL( [this._xOffset, this._yOffset + 0.5*this.getHeight(), 0] ); | ||
743 | var w = vecUtils.vecDist( 2, wPt, ctr ), | ||
744 | h = vecUtils.vecDist( 2, hPt, ctr ); | ||
745 | var aspect = w/h; | ||
746 | |||
747 | // get the angle of the projected point relative to the circle | ||
748 | var angle = Math.atan2( planePt2D[1], planePt2D[0]/aspect ); | ||
749 | var degrees = angle*180.0/Math.PI; | ||
750 | |||
751 | // get the corresponding point on the object | ||
752 | var pt = [ Math.cos(angle)*w, Math.sin(angle)*h, 0 ]; | ||
753 | var glPt = MathUtils.transformPoint( pt, planeMat ); | ||
754 | |||
755 | return glPt; | ||
756 | } | ||
757 | |||
758 | /* | ||
709 | this.getNearPoint = function( pt, dir ) { | 759 | this.getNearPoint = function( pt, dir ) { |
710 | var world = this.getWorld(); | 760 | var world = this.getWorld(); |
711 | if (!world) throw( "null world in getNearPoint" ); | 761 | if (!world) throw( "null world in getNearPoint" ); |
@@ -725,7 +775,7 @@ var Circle = function GLCircle() { | |||
725 | // get the normalized device coordinates (NDC) for | 775 | // get the normalized device coordinates (NDC) for |
726 | // the position and radii. | 776 | // the position and radii. |
727 | var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); | 777 | var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); |
728 | var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, | 778 | var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, |
729 | xRadNDC = this._width/vpw, yRadNDC = this._height/vph; | 779 | xRadNDC = this._width/vpw, yRadNDC = this._height/vph; |
730 | var projMat = world.makePerspectiveMatrix(); | 780 | var projMat = world.makePerspectiveMatrix(); |
731 | var z = -world.getViewDistance(); | 781 | var z = -world.getViewDistance(); |
@@ -755,6 +805,7 @@ var Circle = function GLCircle() { | |||
755 | 805 | ||
756 | return objPt; | 806 | return objPt; |