aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-02 15:25:00 -0700
committerPushkar Joshi2012-04-02 15:25:00 -0700
commit878743cbbb75f2fc84855ca27779597b67ab1a95 (patch)
tree3744a6bc9ee21fde57dd3b3a1d348d070c5a74c0 /js/lib
parentdefde265799bb8d6826bb368f04168612e7feb5a (diff)
downloadninja-878743cbbb75f2fc84855ca27779597b67ab1a95.tar.gz
render the pen path with local coordinates, but use stage world coordinates to position the canvas on which the path is rendered
AND add data-montage- to the ids in the pen and brush reels AND fix a bug with pen stroke transparency not working
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/geom/brush-stroke.js2
-rwxr-xr-xjs/lib/geom/sub-path.js264
2 files changed, 239 insertions, 27 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 22209815..e93c9382 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;
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 9bd9ad9a..19a1da3b 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;
12var MaterialsModel = require("js/models/materials-model").MaterialsModel; 12var 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/*
15function SubpathOffsetPoint(pos, mapPos) { 16function 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){
33function SegmentIntersections(){ 34function 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,15 +50,22 @@ 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
@@ -69,7 +77,7 @@ var GLSubpath = function GLSubpath() {
69 this._canvasY = 0; 77 this._canvasY = 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";
@@ -109,6 +117,13 @@ var GLSubpath = function GLSubpath() {
109 // return; //no need to do anything for now 117 // return; //no need to do anything for now
110 }; 118 };
111 119
120 this._offsetLocalCoord = function(deltaW, deltaH){
121 var numPoints = this._LocalPoints.length;
122 for (var i=0;i<numPoints;i++) {
123 this._LocalPoints[i][0]+= deltaW;
124 this._LocalPoints[i][1]+= deltaH;
125 }
126 };
112 //render 127 //render
113 // specify how to render the subpath in Canvas2D 128 // specify how to render the subpath in Canvas2D
114 this.render = function () { 129 this.render = function () {
@@ -116,35 +131,65 @@ var GLSubpath = function GLSubpath() {
116 var world = this.getWorld(); 131 var world = this.getWorld();
117 if (!world) throw( "null world in subpath render" ); 132 if (!world) throw( "null world in subpath render" );
118 133
119 // get the context 134 // get the context
120 var ctx = world.get2DContext(); 135 var ctx = world.get2DContext();
121 if (!ctx) throw ("null context in subpath render") 136 if (!ctx) throw ("null context in subpath render");
122 137
123 var numAnchors = this.getNumAnchors(); 138 var numAnchors = this.getNumAnchors();
124 if (numAnchors === 0) { 139 if (numAnchors === 0) {
125 return; //nothing to do for empty paths 140 return; //nothing to do for empty paths
126 } 141 }
142 var useLocalCoord = true;
143 this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
127 144
128 ctx.save(); 145 //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord
146 this.buildLocalCoord();
129 147
130 this.createSamples(); //dirty bit checked in this function...will generate a polyline representation 148 //
131 var bboxMin = this.getBBoxMin(); 149 var bboxWidth=0, bboxHeight=0;
132 var bboxMax = this.getBBoxMax(); 150 //var bboxMid=[0,0,0];
133 var bboxWidth = bboxMax[0] - bboxMin[0]; 151 if (useLocalCoord){
134 var bboxHeight = bboxMax[1] - bboxMin[1]; 152 bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0];
135 var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; 153 bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1];
154 //bboxMid = [0.5 * (this._LocalBBoxMax[0] + this._LocalBBoxMin[0]), 0.5 * (this._LocalBBoxMax[1] + this._LocalBBoxMin[1]), 0.5 * (this._LocalBBoxMax[2] + this._LocalBBoxMin[2])];
155 }
156 else {
157 var bboxMin = this.getBBoxMin();
158 var bboxMax = this.getBBoxMax();
159 bboxWidth = bboxMax[0] - bboxMin[0];
160 bboxHeight = bboxMax[1] - bboxMin[1];
161 //bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
162 }
136 163
137 if (this._canvas) { 164 if (this._canvas) {
165 /*
166 var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
167 //compute the plane center as the midpoint of the local bbox converted to stage world space
168 var planeCenter = ViewUtils.localToStageWorld(bboxMid, this._canvas);
169 planeCenter[0]+=400; planeCenter[1]+=300; //todo replace these lines with the correct call for the offset
170 console.log("PEN: local bboxMid: "+ bboxMid +", stage-world bboxMid: "+ planeCenter);
171 var newLeft = planeCenter[0] - 0.5*bboxWidth;
172 console.log("PEN: newLeft: "+ newLeft +", bboxWidth: "+bboxWidth);
173 newLeft = Math.round(newLeft);//Math.round(this._planeCenter[0] - 0.5 * bboxWidth);
174 console.log("PEN: newLeft rounded: "+ newLeft);
175 var newTop = Math.round(planeCenter[1] - 0.5 * bboxHeight);//Math.round(this._planeCenter[1] - 0.5 * bboxHeight);
176 //assign the new position, width, and height as the canvas dimensions through the canvas controller
177 CanvasController.setProperty(this._canvas, "left", newLeft+"px");
178 CanvasController.setProperty(this._canvas, "top", newTop+"px");
138 CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); 179 CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
139 CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); 180 CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
140 this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); 181 this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
182 */
141 } 183 }
184 ctx.save();
142 ctx.clearRect(0, 0, bboxWidth, bboxHeight); 185 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
143 186
144 ctx.lineWidth = this._strokeWidth; 187 ctx.lineWidth = this._strokeWidth;
145 ctx.strokeStyle = "black"; 188 ctx.strokeStyle = "black";
146 if (this._strokeColor) { 189 if (this._strokeColor) {
147 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); 190 //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
191 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
192 ctx.strokeStyle = strokeColorStr;
148 } 193 }
149 194
150 ctx.fillStyle = "white"; 195 ctx.fillStyle = "white";
@@ -152,14 +197,13 @@ var GLSubpath = function GLSubpath() {
152 //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 197 //ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
153 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; 198 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
154 ctx.fillStyle = fillColorStr; 199 ctx.fillStyle = fillColorStr;
155 console.log("Fill color:" + fillColorStr);
156 } 200 }
157 var lineCap = ['butt','round','square']; 201 var lineCap = ['butt','round','square'];
158 ctx.lineCap = lineCap[1]; 202 ctx.lineCap = lineCap[1];
159 ctx.beginPath();
160 203
161 /* 204 /*
162 commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered 205 commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered
206 ctx.beginPath();
163 var prevAnchor = this.getAnchor(0); 207 var prevAnchor = this.getAnchor(0);
164 ctx.moveTo(prevAnchor.getPosX()-bboxMin[0],prevAnchor.getPosY()-bboxMin[1]); 208 ctx.moveTo(prevAnchor.getPosX()-bboxMin[0],prevAnchor.getPosY()-bboxMin[1]);
165 for (var i = 1; i < numAnchors; i++) { 209 for (var i = 1; i < numAnchors; i++) {
@@ -176,16 +220,33 @@ var GLSubpath = function GLSubpath() {
176 */ 220 */
177 221
178 222
179 var numPoints = this._samples.length/3; 223 var numPoints=0, i=0;
180 ctx.moveTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]); 224 ctx.beginPath();
181 for (var i=0;i<numPoints;i++){ 225 if (!useLocalCoord){
182 ctx.lineTo(this._samples[3*i]-bboxMin[0],this._samples[3*i + 1]-bboxMin[1]); 226 numPoints = this._samples.length/3;
227 ctx.moveTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
228 for (i=0;i<numPoints;i++){
229 ctx.lineTo(this._samples[3*i]-bboxMin[0],this._samples[3*i + 1]-bboxMin[1]);
230 }
231 if (this._isClosed === true) {
232 ctx.lineTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
233 }
234 ctx.fill();
235 ctx.stroke();
183 } 236 }
184 if (this._isClosed === true) { 237 else {
185 ctx.lineTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]); 238 //render using the local coords
239 numPoints = this._LocalPoints.length;
240 ctx.moveTo(this._LocalPoints[0][0],this._LocalPoints[0][1]);