diff options
4 files changed, 31 insertions, 48 deletions
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index af07b3f2..6d4852e6 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html | |||
@@ -43,7 +43,8 @@ | |||
43 | "properties": { | 43 | "properties": { |
44 | "element": {"#": "brushProperties"}, | 44 | "element": {"#": "brushProperties"}, |
45 | "_strokeSize": {"@": "strokeSizeHT"}, | 45 | "_strokeSize": {"@": "strokeSizeHT"}, |
46 | "_strokeHardness": {"@": "strokeHardnessHT"} | 46 | "_strokeHardness": {"@": "strokeHardnessHT"}, |
47 | "_doSmoothing": {"@": "doSmoothing"} | ||
47 | } | 48 | } |
48 | } | 49 | } |
49 | } | 50 | } |
@@ -58,6 +59,7 @@ | |||
58 | <div id="strokeSize" class="label"></div> | 59 | <div id="strokeSize" class="label"></div> |
59 | <label class="label"> Hardness:</label> | 60 | <label class="label"> Hardness:</label> |
60 | <div id="strokeHardness" class="label"></div> | 61 | <div id="strokeHardness" class="label"></div> |
62 | <label class="label subOption optionLabel"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label> | ||
61 | </div> | 63 | </div> |
62 | </div> | 64 | </div> |
63 | </body> | 65 | </body> |
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js index d2fcf888..0ce685b5 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js | |||
@@ -14,5 +14,8 @@ exports.BrushProperties = Montage.create(ToolProperties, { | |||
14 | }, | 14 | }, |
15 | strokeHardness: { | 15 | strokeHardness: { |
16 | get: function() { return this._strokeHardness; } | 16 | get: function() { return this._strokeHardness; } |
17 | }, | ||
18 | doSmoothing:{ | ||
19 | get: function() {return this._doSmoothing; } | ||
17 | } | 20 | } |
18 | }); | 21 | }); |
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 39af5c5c..3e64e730 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -36,6 +36,7 @@ var BrushStroke = function GLBrushStroke() { | |||
36 | this._strokeHardness = 100; | 36 | this._strokeHardness = 100; |
37 | this._strokeMaterial = null; | 37 | this._strokeMaterial = null; |
38 | this._strokeStyle = "Solid"; | 38 | this._strokeStyle = "Solid"; |
39 | this._strokeDoSmoothing = false; | ||
39 | 40 | ||
40 | //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely | 41 | //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely |
41 | //smaller value means more samples for the path | 42 | //smaller value means more samples for the path |
@@ -183,6 +184,10 @@ var BrushStroke = function GLBrushStroke() { | |||
183 | this._strokeHardness=h; | 184 | this._strokeHardness=h; |
184 | } | 185 | } |
185 | 186 | ||
187 | this.setDoSmoothing = function(s){ | ||
188 | this._strokeDoSmoothing = s; | ||
189 | } | ||
190 | |||
186 | this.getStrokeStyle = function () { | 191 | this.getStrokeStyle = function () { |
187 | return this._strokeStyle; | 192 | return this._strokeStyle; |
188 | }; | 193 | }; |
@@ -262,7 +267,7 @@ var BrushStroke = function GLBrushStroke() { | |||
262 | } | 267 | } |
263 | } | 268 | } |
264 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation | 269 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation |
265 | if (numPoints>1) { | 270 | if (this._strokeDoSmoothing && numPoints>1) { |
266 | var numInsertedPoints = 0; | 271 | var numInsertedPoints = 0; |
267 | var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long | 272 | var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long |
268 | var prevPt = this._Points[0]; | 273 | var prevPt = this._Points[0]; |
@@ -507,35 +512,6 @@ var BrushStroke = function GLBrushStroke() { | |||
507 | brushStamp.push(brushPt); | 512 | brushStamp.push(brushPt); |
508 | } | 513 | } |
509 | 514 | ||
510 | |||
511 | //make a circular brush stamp | ||
512 | brushStamp=[]; | ||
513 | numTraces = this._strokeWidth*Math.PI; //figure out how to | ||
514 | var radius = this._strokeWidth/2; | ||
515 | for (t=0;t<numTraces;t++) | ||
516 | { | ||
517 | var angle = Math.PI*(360*t/numTraces)/180; | ||
518 | var brushPt = [radius*Math.cos(angle), radius*Math.sin(angle)]; | ||
519 | brushStamp.push(brushPt); | ||
520 | } | ||
521 | |||
522 | // //make a square brush stamp | ||
523 | // STOPPED HERE | ||
524 | // brushStamp = []; | ||
525 | // numTraces = 4*strokeWidth; | ||
526 | // for (t=0;t<numTraces;t++){ | ||
527 | // if (t<numTraces*0.25){ | ||
528 | // var brushPt = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; | ||
529 | // } else if (t<numTraces*0.5){ | ||
530 | // | ||
531 | // } else if (t<numTraces*0.75){ | ||
532 | // | ||
533 | // } else { | ||
534 | // | ||
535 | // } | ||
536 | // brushStamp.push(brushPt); | ||
537 | // } | ||
538 | |||
539 | for (t=0;t<numTraces;t++){ | 515 | for (t=0;t<numTraces;t++){ |
540 | var disp = [brushStamp[t][0], brushStamp[t][1]]; | 516 | var disp = [brushStamp[t][0], brushStamp[t][1]]; |
541 | //ctx.globalCompositeOperation = 'source-over'; | 517 | //ctx.globalCompositeOperation = 'source-over'; |
@@ -566,30 +542,26 @@ var BrushStroke = function GLBrushStroke() { | |||
566 | } | 542 | } |
567 | */ | 543 | */ |
568 | 544 | ||
569 | /* | ||
570 | //debugging path | ||
571 | ctx.beginPath(); | ||
572 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); | ||
573 | for (var i=1;i<numPoints;i++){ | ||
574 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); | ||
575 | } | ||
576 | ctx.lineWidth=1.0; | ||
577 | ctx.strokeStyle = "black"; | ||
578 | ctx.stroke(); | ||
579 | */ | ||
580 | 545 | ||
581 | var numlayers = this._strokeWidth/2; | 546 | var minStrokeWidth = (this._strokeHardness*this._strokeWidth)/100; //the hardness is the percentage of the stroke width that's fully opaque |
582 | var alphaVal = 1.0/(numlayers-1); | 547 | var numlayers = 1 + (this._strokeWidth-minStrokeWidth)/2; |
548 | var alphaVal = 1.0/(numlayers); | ||
549 | ctx.lineCap = "round"; | ||
550 | ctx.lineJoin="round"; | ||
551 | ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; | ||
552 | ctx.globalCompositeOperation = 'lighter'; //we wish to add up the colors | ||
553 | ctx.globalAlpha = this._strokeColor[3]; | ||
583 | for (var l=0;l<numlayers;l++){ | 554 | for (var l=0;l<numlayers;l++){ |
584 | ctx.beginPath(); | 555 | ctx.beginPath(); |
585 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); | 556 | ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); |
557 | if (numPoints===1){ | ||
558 | ctx.lineTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]+0.01); | ||
559 | } | ||
586 | for (var i=1;i<numPoints;i++){ | 560 | for (var i=1;i<numPoints;i++){ |
587 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); | 561 | ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); |
588 | } | 562 | } |
589 | ctx.lineCap = "round"; | 563 | |
590 | ctx.lineJoin="round"; | 564 | ctx.lineWidth=2*l+minStrokeWidth; |
591 | ctx.lineWidth=l+1; | ||
592 | ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; | ||
593 | ctx.stroke(); | 565 | ctx.stroke(); |
594 | } | 566 | } |
595 | 567 | ||
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index dd201f33..1e1df0a4 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -88,6 +88,12 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
88 | strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); | 88 | strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); |
89 | } | 89 | } |
90 | this._selectedBrushStroke.setStrokeHardness(strokeHardness); | 90 | this._selectedBrushStroke.setStrokeHardness(strokeHardness); |
91 | |||
92 | var doSmoothing = false; | ||
93 | if (this.options.doSmoothing){ | ||
94 | doSmoothing = this.options.doSmoothing.value; | ||
95 | } | ||
96 | this._selectedBrushStroke.setDoSmoothing(doSmoothing); | ||
91 | } | 97 | } |
92 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); | 98 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); |
93 | } //value: function (event) { | 99 | } //value: function (event) { |