diff options
-rwxr-xr-x | js/helper-classes/RDGE/GLBrushStroke.js | 47 | ||||
-rw-r--r-- | js/tools/BrushTool.js | 4 |
2 files changed, 47 insertions, 4 deletions
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 5d773c2d..f5b0bce1 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js | |||
@@ -139,7 +139,8 @@ function GLBrushStroke() { | |||
139 | var numPoints = this._Points.length; | 139 | var numPoints = this._Points.length; |
140 | 140 | ||
141 | //**** add samples to the path if needed...linear interpolation for now | 141 | //**** add samples to the path if needed...linear interpolation for now |
142 | if (numPoints>1) { | 142 | //if (numPoints>1) { |
143 | if (0){ | ||
143 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; | 144 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; |
144 | var prevPt = this._Points[0]; | 145 | var prevPt = this._Points[0]; |
145 | var prevIndex = 0; | 146 | var prevIndex = 0; |
@@ -331,7 +332,7 @@ function GLBrushStroke() { | |||
331 | } | 332 | } |
332 | */ | 333 | */ |
333 | 334 | ||
334 | 335 | /* | |
335 | var R2 = this._strokeWidth; | 336 | var R2 = this._strokeWidth; |
336 | var R = R2*0.5; | 337 | var R = R2*0.5; |
337 | var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface | 338 | var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface |
@@ -359,6 +360,48 @@ function GLBrushStroke() { | |||
359 | //ctx.globalCompositeOperation = 'source-in'; | 360 | //ctx.globalCompositeOperation = 'source-in'; |
360 | //ctx.rect(x-R, y-R, R2, R2); | 361 | //ctx.rect(x-R, y-R, R2, R2); |
361 | } | 362 | } |
363 | */ | ||
364 | |||
365 | //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles) | ||
366 | var numTraces = this._strokeWidth; | ||
367 | var halfNumTraces = numTraces/2; | ||
368 | var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush | ||
369 | var startPos = [-this._strokeWidth/2,0]; | ||
370 | for (var t=0;t<numTraces;t++){ | ||
371 | var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; | ||
372 | //ctx.globalCompositeOperation = 'source-over'; | ||
373 | var distFromMiddle = Math.abs(halfNumTraces-t); | ||
374 | var alphaVal = 1.0 - (distFromMiddle/halfNumTraces); | ||
375 | ctx.save(); | ||
376 | ctx.lineWidth=this._strokeWidth/10;//4; | ||
377 | if (ctx.lineWidth<2) | ||
378 | ctx.lineWidth=2; | ||
379 | ctx.lineJoin="bevel"; | ||
380 | ctx.lineCap="butt"; | ||
381 | if (t<numTraces/2) | ||
382 | ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; | ||
383 | else | ||
384 | ctx.strokeStyle="rgba("+255+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; | ||
385 | ctx.translate(disp[0],disp[1]); | ||
386 | ctx.beginPath(); | ||
387 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); | ||
388 | for (var i=0;i<numPoints;i++){ | ||
389 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); | ||
390 | } | ||
391 | ctx.stroke(); | ||
392 | ctx.restore(); | ||
393 | } | ||
394 | |||
395 | /* | ||
396 | ctx.beginPath(); | ||
397 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); | ||
398 | for (var i=1;i<numPoints;i++){ | ||
399 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); | ||
400 | } | ||
401 | ctx.lineWidth=1.0; | ||
402 | ctx.strokeStyle = "black"; | ||
403 | ctx.stroke(); | ||
404 | */ | ||
362 | 405 | ||
363 | ctx.restore(); | 406 | ctx.restore(); |
364 | } //render() | 407 | } //render() |
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index fec89eb2..dc9e022e 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -72,7 +72,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
72 | this._selectedBrushStroke.addPoint(currMousePos); | 72 | this._selectedBrushStroke.addPoint(currMousePos); |
73 | 73 | ||
74 | //TODO get these values from the options | 74 | //TODO get these values from the options |
75 | this._selectedBrushStroke.setStrokeWidth(20); | 75 | this._selectedBrushStroke.setStrokeWidth(10); |
76 | } | 76 | } |
77 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); | 77 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); |
78 | } //value: function (event) { | 78 | } //value: function (event) { |
@@ -112,7 +112,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
112 | 112 | ||
113 | if (this._isDrawing) { | 113 | if (this._isDrawing) { |
114 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); | 114 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); |
115 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){ | 115 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){ |
116 | this._selectedBrushStroke.addPoint(currMousePos); | 116 | this._selectedBrushStroke.addPoint(currMousePos); |
117 | } | 117 | } |
118 | this.ShowCurrentBrushStrokeOnStage(); | 118 | this.ShowCurrentBrushStrokeOnStage(); |