diff options
Diffstat (limited to 'js/helper-classes/RDGE')
-rw-r--r-- | js/helper-classes/RDGE/GLBrushStroke.js | 54 |
1 files changed, 51 insertions, 3 deletions
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index fdf1595c..59017a0c 100644 --- 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<4) | ||
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,9 @@ 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 | |||
188 | /* | ||
171 | ctx.lineWidth = this._strokeWidth; | 189 | ctx.lineWidth = this._strokeWidth; |
172 | ctx.strokeStyle = "black"; | 190 | ctx.strokeStyle = "black"; |
173 | if (this._strokeColor) | 191 | if (this._strokeColor) |
@@ -185,7 +203,35 @@ function GLBrushStroke() { | |||
185 | ctx.lineTo(pt[0]-bboxMin[0], pt[1]-bboxMin[1]); | 203 | ctx.lineTo(pt[0]-bboxMin[0], pt[1]-bboxMin[1]); |
186 | } | 204 | } |
187 | ctx.stroke(); | 205 | ctx.stroke(); |
188 | */ | 206 | */ |
207 | |||
208 | var firstPt = this._Points[0]; | ||
209 | var prevX = firstPt[0]-bboxMin[0]; | ||
210 | var prevY = firstPt[1]-bboxMin[1]; | ||
211 | for (var i = 1; i < numPoints; i++) { | ||
212 | var pt = this._Points[i]; | ||
213 | ctx.globalCompositeOperation = 'source-over'; | ||
214 | var x = pt[0]-bboxMin[0]; | ||
215 | var y = pt[1]-bboxMin[1]; | ||
216 | var r = ctx.createLinearGradient(prevX, prevY, x, y); | ||
217 | r.addColorStop(1, 'rgba(0,0,0,0.01)'); | ||
218 | r.addColorStop(0.5,'rgba(255,0,0,1.0)'); | ||
219 | r.addColorStop(0, 'rgba(0,0,0,0.01)'); | ||
220 | |||
221 | ctx.fillStyle = r; | ||
222 | //ctx.fillStyle = "rgba(0,128,0,0.15)"; | ||
223 | var w2 = this._strokeWidth*0.5; | ||
224 | ctx.moveTo(prevX-w2, prevY); | ||
225 | ctx.lineTo(prevX+w2, prevY); | ||
226 | ctx.lineTo(x+w2, y); | ||
227 | ctx.lineTo(x-w2, y); | ||
228 | ctx.fill(); | ||
229 | |||
230 | prevX = x; | ||
231 | prevY = y; | ||
232 | } | ||
233 | |||
234 | /* | ||
189 | var R2 = this._strokeWidth; | 235 | var R2 = this._strokeWidth; |
190 | var R = R2*0.5; | 236 | var R = R2*0.5; |
191 | var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface | 237 | var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface |
@@ -209,6 +255,8 @@ function GLBrushStroke() { | |||
209 | //ctx.globalCompositeOperation = 'source-in'; | 255 | //ctx.globalCompositeOperation = 'source-in'; |
210 | //ctx.rect(x-R, y-R, R2, R2); | 256 | //ctx.rect(x-R, y-R, R2, R2); |
211 | } | 257 | } |
258 | */ | ||
259 | |||
212 | ctx.restore(); | 260 | ctx.restore(); |
213 | } //render() | 261 | } //render() |
214 | 262 | ||