diff options
Diffstat (limited to 'js/helper-classes')
-rwxr-xr-x | js/helper-classes/RDGE/GLBrushStroke.js | 108 |
1 files changed, 105 insertions, 3 deletions
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index fdf1595c..8fb6ab25 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js | |||
@@ -67,7 +67,23 @@ function GLBrushStroke() { | |||
67 | 67 | ||
68 | this.getNumPoints = function () { return this._Points.length; } | 68 | this.getNumPoints = function () { return this._Points.length; } |
69 | this.getPoint = function (index) { return this._Points[index]; } | 69 | this.getPoint = function (index) { return this._Points[index]; } |
70 | this.addPoint = function (anchorPt) { this._Points.push(anchorPt); this._dirty=true; } | 70 | this.addPoint = function (pt) |
71 | { | ||
72 | //add the point if it is some epsilon away from the previous point | ||
73 | var doAddPoint=true; | ||
74 | var numPoints = this._Points.length; | ||
75 | if (numPoints>0) { | ||
76 | var prevPt = this._Points[numPoints-1]; | ||
77 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; | ||
78 | var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; | ||
79 | if (diffPtMag<16)//TODO hook this up to the variable that measures flow/wetness of the paint brush...a smaller number-> more samples | ||
80 | doAddPoint=false; | ||
81 | } | ||
82 | if (doAddPoint) { | ||
83 | this._Points.push(pt); | ||
84 | this._dirty=true; | ||
85 | } | ||
86 | } | ||
71 | this.insertPoint = function(pt, index){ this._Points.splice(index, 0, pt); this._dirty=true;} | 87 | this.insertPoint = function(pt, index){ this._Points.splice(index, 0, pt); this._dirty=true;} |
72 | this.isDirty = function(){return this._dirty;} | 88 | this.isDirty = function(){return this._dirty;} |
73 | this.makeDirty = function(){this._dirty=true;} | 89 | this.makeDirty = function(){this._dirty=true;} |
@@ -167,7 +183,8 @@ function GLBrushStroke() { | |||
167 | var bboxWidth = bboxMax[0] - bboxMin[0]; | 183 | var bboxWidth = bboxMax[0] - bboxMin[0]; |
168 | var bboxHeight = bboxMax[1] - bboxMin[1]; | 184 | var bboxHeight = bboxMax[1] - bboxMin[1]; |
169 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); | 185 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); |
170 | /* | 186 | |
187 | /* | ||
171 | ctx.lineWidth = this._strokeWidth; | 188 | ctx.lineWidth = this._strokeWidth; |
172 | ctx.strokeStyle = "black"; | 189 | ctx.strokeStyle = "black"; |
173 | if (this._strokeColor) | 190 | if (this._strokeColor) |
@@ -185,7 +202,91 @@ function GLBrushStroke() { | |||
185 | ctx.lineTo(pt[0]-bboxMin[0], pt[1]-bboxMin[1]); | 202 | ctx.lineTo(pt[0]-bboxMin[0], pt[1]-bboxMin[1]); |
186 | } | 203 | } |
187 | ctx.stroke(); | 204 | ctx.stroke(); |
188 | */ | 205 | */ |
206 | |||
207 | var isDebug = false; | ||
208 | var prevPt = this._Points[0]; | ||
209 | var prevX = prevPt[0]-bboxMin[0]; | ||
210 | var prevY = prevPt[1]-bboxMin[1]; | ||
211 | prevPt = [prevX,prevY]; | ||
212 | for (var i = 1; i < numPoints; i++) { | ||
213 | var pt = this._Points[i]; | ||
214 | ctx.globalCompositeOperation = 'source-over'; | ||
215 | var x = pt[0]-bboxMin[0]; | ||
216 | var y = pt[1]-bboxMin[1]; | ||
217 | pt = [x,y]; | ||
218 | |||
219 | //vector from prev to current pt | ||
220 | var seg = VecUtils.vecSubtract(2, pt, prevPt); | ||
221 | var segDir = VecUtils.vecNormalize(2, seg, 1.0); | ||
222 | |||
223 | var segMidPt = VecUtils.vecInterpolate(2, pt, prevPt, 0.5); | ||
224 | var w2 = this._strokeWidth*0.5; | ||
225 | var segDirOrtho = [w2*segDir[1], -w2*segDir[0]]; | ||
226 | |||
227 | //add half the strokewidth to the segMidPt | ||
228 | var lgStart = VecUtils.vecAdd(2, segMidPt, segDirOrtho); | ||
229 | var lgEnd = VecUtils.vecSubtract(2, segMidPt, segDirOrtho); | ||
230 | |||
231 | ctx.save(); | ||
232 | ctx.beginPath(); | ||
233 | |||
234 | if (isDebug) { | ||
235 | ctx.strokeStyle="black"; | ||
236 | ctx.lineWidth = 1; | ||
237 | |||
238 | ctx.moveTo(lgStart[0], lgStart[1]); | ||
239 | ctx.lineTo(lgEnd[0], lgEnd[1]); | ||
240 | ctx.stroke(); | ||
241 | } | ||
242 | |||
243 | var lg = ctx.createLinearGradient(lgStart[0], lgStart[1], lgEnd[0], lgEnd[1]); | ||
244 | lg.addColorStop(1, 'rgba(0,0,0,0.0)'); | ||
245 | lg.addColorStop(0.5,'rgba(255,0,0,1.0)'); | ||
246 | lg.addColorStop(0, 'rgba(0,0,0,0.0)'); | ||
247 | ctx.fillStyle = lg; | ||
248 | |||
249 | if (isDebug){ | ||
250 | ctx.strokeStyle="blue"; | ||
251 | ctx.lineWidth=0.5; | ||
252 | } | ||
253 | ctx.moveTo(prevX-w2, prevY); | ||
254 | ctx.lineTo(prevX+w2, prevY); | ||
255 | ctx.lineTo(x+w2, y); | ||
256 | ctx.lineTo(x-w2, y); | ||
257 | ctx.lineTo(prevX-w2, prevY); | ||
258 | ctx.fill(); | ||
259 | ctx.closePath(); | ||
260 | |||
261 | ctx.restore(); | ||
262 | |||
263 | prevPt = pt; | ||
264 | prevX = x; | ||
265 | prevY = y; | ||
266 | } | ||
267 | |||
268 | |||
269 | if (isDebug) | ||
270 | ctx.stroke(); | ||
271 | |||
272 | if (isDebug){ | ||
273 | //draw the skeleton of this stroke | ||
274 | ctx.lineWidth = 1; | ||
275 | ctx.strokeStyle = "black"; | ||
276 | var pt = this._Points[0]; | ||
277 | ctx.beginPath(); | ||
278 | ctx.moveTo(pt[0]-bboxMin[0],pt[1]-bboxMin[1]); | ||
279 | for (var i = 1; i < numPoints; i++) { | ||
280 | pt = this._Points[i]; | ||
281 | var x = pt[0]-bboxMin[0]; | ||
282 | var y = pt[1]-bboxMin[1]; | ||
283 | ctx.lineTo(x,y); | ||
284 | } | ||
285 | ctx.stroke(); | ||
286 | } | ||
287 | |||
288 | |||
289 | /* | ||
189 | var R2 = this._strokeWidth; | 290 | var R2 = this._strokeWidth; |
190 | var R = R2*0.5; | 291 | var R = R2*0.5; |
191 | var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface | 292 | var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface |
@@ -209,6 +310,7 @@ function GLBrushStroke() { | |||
209 | //ctx.globalCompositeOperation = 'source-in'; | 310 | //ctx.globalCompositeOperation = 'source-in'; |
210 | //ctx.rect(x-R, y-R, R2, R2); | 311 | //ctx.rect(x-R, y-R, R2, R2); |
211 | } | 312 | } |
313 | */ | ||
212 | ctx.restore(); | 314 | ctx.restore(); |
213 | } //render() | 315 | } //render() |
214 | 316 | ||