aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorPushkar Joshi2012-03-01 15:29:17 -0800
committerPushkar Joshi2012-03-01 15:29:17 -0800
commit0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 (patch)
tree16309dcc8e50851bc75ab4ecd5a7c9fac85172ed /js
parent271a8f2b29d87d12c81d03e3f1e2c05b816a138d (diff)
downloadninja-0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6.tar.gz
first attempt at rendering the brush stroke as a collection of polylines (number of polylines equals the stroke width)
Diffstat (limited to 'js')
-rwxr-xr-xjs/helper-classes/RDGE/GLBrushStroke.js47
-rw-r--r--js/tools/BrushTool.js4
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();