diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/data/tools-data.js | 2 | ||||
-rwxr-xr-x | js/helper-classes/RDGE/GLBrushStroke.js | 16 | ||||
-rw-r--r-- | js/tools/BrushTool.js | 6 |
3 files changed, 13 insertions, 11 deletions
diff --git a/js/data/tools-data.js b/js/data/tools-data.js index cf48757d..3abdb60f 100755 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js | |||
@@ -141,7 +141,7 @@ exports.ToolsData = Montage.create(Montage, { | |||
141 | "spriteSheet": true, | 141 | "spriteSheet": true, |
142 | "action": "BrushTool", | 142 | "action": "BrushTool", |
143 | "toolTip": "Brush Tool", | 143 | "toolTip": "Brush Tool", |
144 | "cursor": "url('images/tools/brush_down.png'), default", | 144 | "cursor": "url('images/tools/brush_down.png') 9 17, default", |
145 | "lastInGroup": false, | 145 | "lastInGroup": false, |
146 | "container": false, | 146 | "container": false, |
147 | "selected": false | 147 | "selected": false |
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index f63bcc8a..07a4a039 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js | |||
@@ -35,7 +35,8 @@ function GLBrushStroke() { | |||
35 | this._strokeStyle = "Solid"; | 35 | this._strokeStyle = "Solid"; |
36 | 36 | ||
37 | //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 | 37 | //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 |
38 | this._WETNESS_FACTOR = 0.010625;//0.0625; | 38 | //smaller value means more samples for the path |
39 | this._WETNESS_FACTOR = 0.25; | ||
39 | 40 | ||
40 | //drawing context | 41 | //drawing context |
41 | this._world = null; | 42 | this._world = null; |
@@ -75,10 +76,10 @@ function GLBrushStroke() { | |||
75 | //add the point only if it is some epsilon away from the previous point | 76 | //add the point only if it is some epsilon away from the previous point |
76 | var numPoints = this._Points.length; | 77 | var numPoints = this._Points.length; |
77 | if (numPoints>0) { | 78 | if (numPoints>0) { |
78 | var threshold = this._WETNESS_FACTOR*this._strokeWidth*this._strokeWidth; | 79 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; |
79 | var prevPt = this._Points[numPoints-1]; | 80 | var prevPt = this._Points[numPoints-1]; |
80 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; | 81 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; |
81 | var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; | 82 | var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); |
82 | if (diffPtMag>threshold){ | 83 | if (diffPtMag>threshold){ |
83 | this._Points.push(pt); | 84 | this._Points.push(pt); |
84 | this._dirty=true; | 85 | this._dirty=true; |
@@ -136,7 +137,7 @@ function GLBrushStroke() { | |||
136 | 137 | ||
137 | //**** add samples to the path if needed...linear interpolation for now | 138 | //**** add samples to the path if needed...linear interpolation for now |
138 | if (numPoints>1) { | 139 | if (numPoints>1) { |
139 | var threshold = this._WETNESS_FACTOR*this._strokeWidth*this._strokeWidth; | 140 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; |
140 | var prevPt = this._Points[0]; | 141 | var prevPt = this._Points[0]; |
141 | var prevIndex = 0; | 142 | var prevIndex = 0; |
142 | for (var i=1;i<numPoints;i++){ | 143 | for (var i=1;i<numPoints;i++){ |
@@ -324,17 +325,14 @@ function GLBrushStroke() { | |||
324 | 325 | ||
325 | var R2 = this._strokeWidth; | 326 | var R2 = this._strokeWidth; |
326 | var R = R2*0.5; | 327 | var R = R2*0.5; |
327 | var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface | 328 | var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface |
328 | var innerRadius = (hardness*R)-1; | 329 | var innerRadius = (hardness*R)-1; |
329 | if (innerRadius<1) | 330 | if (innerRadius<1) |
330 | innerRadius=1; | 331 | innerRadius=1; |
331 | 332 | ||
332 | var r = ctx.createRadialGradient(0,0,innerRadius, 0,0,R); | 333 | var r = ctx.createRadialGradient(0,0,innerRadius, 0,0,R); |
333 | //r.addColorStop(0, 'rgba(255,0,0,0.5)'); | 334 | var midColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",1)"; |
334 | var midColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",0.5)"; | ||
335 | r.addColorStop(0, midColor); | 335 | r.addColorStop(0, midColor); |
336 | //r.addColorStop(0.5, 'rgba(255,0,0,0.5)'); // prevent aggregation of semi-opaque pixels | ||
337 | //r.addColorStop(1, 'rgba(255,0,0,0.0)'); | ||
338 | var endColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",0.0)"; | 336 | var endColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",0.0)"; |
339 | r.addColorStop(1, endColor); | 337 | r.addColorStop(1, endColor); |
340 | ctx.fillStyle = r; | 338 | ctx.fillStyle = r; |
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 776d914c..fec89eb2 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -67,6 +67,10 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
67 | if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ | 67 | if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ |
68 | this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); | 68 | this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); |
69 | } | 69 | } |
70 | //add this point to the brush stroke in case the user does a mouse up before doing a mouse move | ||
71 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); | ||
72 | this._selectedBrushStroke.addPoint(currMousePos); | ||
73 | |||
70 | //TODO get these values from the options | 74 | //TODO get these values from the options |
71 | this._selectedBrushStroke.setStrokeWidth(20); | 75 | this._selectedBrushStroke.setStrokeWidth(20); |
72 | } | 76 | } |
@@ -108,7 +112,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
108 | 112 | ||
109 | if (this._isDrawing) { | 113 | if (this._isDrawing) { |
110 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); | 114 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); |
111 | if (this._selectedBrushStroke){ | 115 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){ |
112 | this._selectedBrushStroke.addPoint(currMousePos); | 116 | this._selectedBrushStroke.addPoint(currMousePos); |
113 | } | 117 | } |
114 | this.ShowCurrentBrushStrokeOnStage(); | 118 | this.ShowCurrentBrushStrokeOnStage(); |