diff options
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 16 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 545 |
2 files changed, 413 insertions, 148 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 22209815..2a751a89 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -413,7 +413,7 @@ var BrushStroke = function GLBrushStroke() { | |||
413 | this._LocalPoints[i][1]+= halfheight; | 413 | this._LocalPoints[i][1]+= halfheight; |
414 | 414 | ||
415 | //store the original points | 415 | //store the original points |
416 | this._OrigLocalPoints .push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]); | 416 | this._OrigLocalPoints.push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]); |
417 | } | 417 | } |
418 | //update the bbox with the same adjustment as was made for the local points above | 418 | //update the bbox with the same adjustment as was made for the local points above |
419 | this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth; | 419 | this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth; |
@@ -541,6 +541,10 @@ var BrushStroke = function GLBrushStroke() { | |||
541 | var bboxWidth = bboxMax[0] - bboxMin[0]; | 541 | var bboxWidth = bboxMax[0] - bboxMin[0]; |
542 | var bboxHeight = bboxMax[1] - bboxMin[1]; | 542 | var bboxHeight = bboxMax[1] - bboxMin[1]; |
543 | 543 | ||
544 | if (!this._canvas){ | ||
545 | //set the canvas by querying the world | ||
546 | this._canvas = this.getWorld().getCanvas(); | ||
547 | } | ||
544 | if (this._canvas) { | 548 | if (this._canvas) { |
545 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); | 549 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); |
546 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); | 550 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); |
@@ -550,7 +554,7 @@ var BrushStroke = function GLBrushStroke() { | |||
550 | 554 | ||
551 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); | 555 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); |
552 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); | 556 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); |
553 | this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); | 557 | //this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); |
554 | } | 558 | } |
555 | 559 | ||
556 | 560 | ||
@@ -662,8 +666,8 @@ var BrushStroke = function GLBrushStroke() { | |||
662 | this._copyCoordinates3D(this._OrigLocalPoints, retObject.origLocalPoints); //todo <ditto> | 666 | this._copyCoordinates3D(this._OrigLocalPoints, retObject.origLocalPoints); //todo <ditto> |
663 | 667 | ||
664 | retObject.stageWorldCenter = [this._stageWorldCenter[0],this._stageWorldCenter[1],this._stageWorldCenter[2]]; | 668 | retObject.stageWorldCenter = [this._stageWorldCenter[0],this._stageWorldCenter[1],this._stageWorldCenter[2]]; |
665 | retObject.planeMat = [this._planeMat[0],this._planeMat[1],this._planeMat[2],this._planeMat[3]]; | 669 | retObject.planeMat = this._planeMat; |
666 | retObject.planeMatInv = [this._planeMatInv[0],this._planeMatInv[1],this._planeMatInv[2],this._planeMatInv[3]]; | 670 | retObject.planeMatInv = this._planeMatInv; |
667 | retObject.dragPlane = [this._dragPlane[0],this._dragPlane[1],this._dragPlane[2],this._dragPlane[3]]; | 671 | retObject.dragPlane = [this._dragPlane[0],this._dragPlane[1],this._dragPlane[2],this._dragPlane[3]]; |
668 | 672 | ||
669 | //stroke appearance properties | 673 | //stroke appearance properties |
@@ -691,8 +695,8 @@ var BrushStroke = function GLBrushStroke() { | |||
691 | this._copyCoordinates3D(jo.origLocalPoints, this._OrigLocalPoints); //todo <ditto> | 695 | this._copyCoordinates3D(jo.origLocalPoints, this._OrigLocalPoints); //todo <ditto> |
692 | 696 | ||
693 | this._stageWorldCenter = [jo.stageWorldCenter[0],jo.stageWorldCenter[1],jo.stageWorldCenter[2]]; | 697 | this._stageWorldCenter = [jo.stageWorldCenter[0],jo.stageWorldCenter[1],jo.stageWorldCenter[2]]; |
694 | this._planeMat = [jo.planeMat[0], jo.planeMat[1],jo.planeMat[2],jo.planeMat[3]]; | 698 | this._planeMat = jo.planeMat; |
695 | this._planeMatInv = [jo.planeMatInv[0],jo.planeMatInv[1],jo.planeMatInv[2],jo.planeMatInv[3]]; | 699 | this._planeMatInv = jo.planeMatInv; |
696 | this._dragPlane = [jo.dragPlane[0],jo.dragPlane[1],jo.dragPlane[2],jo.dragPlane[3]]; | 700 | this._dragPlane = [jo.dragPlane[0],jo.dragPlane[1],jo.dragPlane[2],jo.dragPlane[3]]; |
697 | 701 | ||
698 | //stroke appearance properties | 702 | //stroke appearance properties |
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 7046673e..bca4e1c5 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -12,6 +12,7 @@ var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; | |||
12 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; | 12 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; |
13 | 13 | ||
14 | // TODO Those function do not seems to be used. We should remove them | 14 | // TODO Those function do not seems to be used. We should remove them |
15 | /* | ||
15 | function SubpathOffsetPoint(pos, mapPos) { | 16 | function SubpathOffsetPoint(pos, mapPos) { |
16 | this.Pos = [pos[0],pos[1],pos[2]]; | 17 | this.Pos = [pos[0],pos[1],pos[2]]; |
17 | this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]]; | 18 | this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]]; |
@@ -33,7 +34,7 @@ function sortNumberDescending(a,b){ | |||
33 | function SegmentIntersections(){ | 34 | function SegmentIntersections(){ |
34 | this.paramArray = []; | 35 | this.paramArray = []; |
35 | } | 36 | } |
36 | 37 | */ | |
37 | /////////////////////////////////////////////////////////////////////// | 38 | /////////////////////////////////////////////////////////////////////// |
38 | // Class GLSubpath | 39 | // Class GLSubpath |
39 | // representation a sequence of cubic bezier curves. | 40 | // representation a sequence of cubic bezier curves. |
@@ -49,27 +50,34 @@ var GLSubpath = function GLSubpath() { | |||
49 | this._BBoxMax = [0, 0, 0]; | 50 | this._BBoxMax = [0, 0, 0]; |
50 | this._isClosed = false; | 51 | this._isClosed = false; |
51 | 52 | ||
52 | this._samples = []; //polyline representation of this curve | 53 | this._samples = []; //polyline representation of this curve in stage world space |
53 | this._sampleParam = []; //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open) | 54 | this._sampleParam = []; //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open) |
54 | this._anchorSampleIndex = []; //index within _samples corresponding to anchor points | 55 | this._anchorSampleIndex = []; //index within _samples corresponding to anchor points |
55 | 56 | ||
57 | this._LocalPoints = []; //polyline representation of this curve in canvas space | ||
58 | this._LocalBBoxMin = [0,0,0]; //bbox min point of _LocalPoints | ||
59 | this._LocalBBoxMax = [0,0,0]; //bbox max point of _LocalPoints | ||
60 | |||
56 | this._UnprojectedAnchors = []; | 61 | this._UnprojectedAnchors = []; |
57 | 62 | ||
58 | //initially set the _dirty bit so we will construct samples | 63 | //initially set the _dirty bit so we will construct samples |
59 | this._dirty = true; | 64 | this._dirty = true; |
60 | 65 | ||
66 | //initially set the local dirty bit so we will construct local coordinates | ||
67 | this._isLocalDirty = true; | ||
68 | |||
61 | //whether or not to use the canvas drawing to stroke/fill | 69 | //whether or not to use the canvas drawing to stroke/fill |
62 | this._useCanvasDrawing = true; | 70 | this._useCanvasDrawing = true; |
63 | 71 | ||
64 | //the canvas that will draw this subpath | 72 | //the canvas that will draw this subpath |
65 | this._canvas = null; | 73 | this._canvas = null; |
66 | 74 | ||
67 | //the X and Y location of this subpath's canvas in stage world space of Ninja | 75 | //the top left location of this subpath's canvas in screen space |
68 | this._canvasX = 0; | 76 | this._canvasLeft = 0; |
69 | this._canvasY = 0; | 77 | this._canvasTop = 0; |
70 | 78 | ||
71 | //stroke information | 79 | //stroke information |
72 | this._strokeWidth = 0.0; | 80 | this._strokeWidth = 1.0; |
73 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; | 81 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; |
74 | this._strokeMaterial = null | 82 | this._strokeMaterial = null |
75 | this._strokeStyle = "Solid"; | 83 | this._strokeStyle = "Solid"; |
@@ -87,6 +95,7 @@ var GLSubpath = function GLSubpath() { | |||
87 | this._planeMat = null; | 95 | this._planeMat = null; |
88 | this._planeMatInv = null; | 96 | this._planeMatInv = null; |
89 | this._planeCenter = null; | 97 | this._planeCenter = null; |
98 | this._dragPlane = null; | ||
90 | 99 | ||
91 | //used to query what the user selected, OR-able for future extensions | 100 | //used to query what the user selected, OR-able for future extensions |
92 | this.SEL_NONE = 0; //nothing was selected | 101 | this.SEL_NONE = 0; //nothing was selected |
@@ -109,42 +118,59 @@ var GLSubpath = function GLSubpath() { | |||
109 | // return; //no need to do anything for now | 118 | // return; //no need to do anything for now |
110 | }; | 119 | }; |
111 | 120 | ||
121 | this._offsetLocalCoord = function(deltaW, deltaH){ | ||
122 | var numPoints = this._LocalPoints.length; | ||
123 | for (var i=0;i<numPoints;i++) { | ||
124 | this._LocalPoints[i][0]+= deltaW; | ||
125 | this._LocalPoints[i][1]+= deltaH; | ||
126 | } | ||
127 | }; | ||
112 | //render | 128 | //render |
113 | // specify how to render the subpath in Canvas2D | 129 | // specify how to render the subpath in Canvas2D |
114 | this.render = function () { | 130 | this.render = function () { |
115 | // get the world | 131 | // get the world |
116 | var world = this.getWorld(); | 132 | var world = this.getWorld(); |
117 | if (!world) throw( "null world in subpath render" ); | 133 | if (!world) throw( "null world in subpath render" ); |
118 | 134 | if (!this._canvas){ | |
119 | // get the context | 135 | //set the canvas by querying the world |
136 | this._canvas = this.getWorld().getCanvas(); | ||
137 | } | ||
138 | // get the context | ||
120 | var ctx = world.get2DContext(); | 139 | var ctx = world.get2DContext(); |
121 | if (!ctx) throw ("null context in subpath render") | 140 | if (!ctx) throw ("null context in subpath render"); |
122 | 141 | ||
123 | var numAnchors = this.getNumAnchors(); | 142 | var numAnchors = this.getNumAnchors(); |
124 | if (numAnchors === 0) { | 143 | if (numAnchors === 0) { |
125 | return; //nothing to do for empty paths | 144 | return; //nothing to do for empty paths |
126 | } | 145 | } |
146 | var useLocalCoord = true; | ||
147 | this.createSamples(); //dirty bit checked in this function...will generate a polyline representation | ||
127 | 148 | ||
128 | ctx.save(); | 149 | //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord |
150 | this.buildLocalCoord(); | ||
129 | 151 | ||
130 | this.createSamples(); //dirty bit checked in this function...will generate a polyline representation | 152 | //figure the size of the area we will draw into |
131 | var bboxMin = this.getBBoxMin(); | 153 | var bboxWidth=0, bboxHeight=0; |
132 | var bboxMax = this.getBBoxMax(); | 154 | if (useLocalCoord){ |
133 | var bboxWidth = bboxMax[0] - bboxMin[0]; | 155 | bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0]; |
134 | var bboxHeight = bboxMax[1] - bboxMin[1]; | 156 | bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1]; |
135 | var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; | ||
136 | |||
137 | if (this._canvas) { | ||
138 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); | ||
139 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); | ||
140 | this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); | ||
141 | } | 157 | } |
158 | else { | ||
159 | var bboxMin = this.getBBoxMin(); | ||
160 | var bboxMax = this.getBBoxMax(); | ||
161 | bboxWidth = bboxMax[0] - bboxMin[0]; | ||
162 | bboxHeight = bboxMax[1] - bboxMin[1]; | ||
163 | } | ||
164 | |||
165 | ctx.save(); | ||
142 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); | 166 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); |
143 | 167 | ||
144 | ctx.lineWidth = this._strokeWidth; | 168 | ctx.lineWidth = this._strokeWidth; |
145 | ctx.strokeStyle = "black"; | 169 | ctx.strokeStyle = "black"; |
146 | if (this._strokeColor) { | 170 | if (this._strokeColor) { |
147 | ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); | 171 | //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); |
172 | var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; | ||
173 | ctx.strokeStyle = strokeColorStr; | ||
148 | } | 174 | } |
149 | 175 | ||
150 | ctx.fillStyle = "white"; |