diff options
4 files changed, 120 insertions, 21 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 38f7f856..af07b3f2 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html | |||
@@ -11,12 +11,39 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "strokeSizeHT": { | ||
15 | "module": "js/components/hottextunit.reel", | ||
16 | "name": "HotTextUnit", | ||
17 | "properties": { | ||
18 | "element": {"#": "strokeSize"}, | ||
19 | "minValue": 1, | ||
20 | "maxValue": 100, | ||
21 | "value": 1, | ||
22 | "decimalPlace": 10, | ||
23 | "acceptableUnits" : ["px", "pt"] | ||
24 | } | ||
25 | }, | ||
26 | |||
27 | "strokeHardnessHT": { | ||
28 | "module": "js/components/hottextunit.reel", | ||
29 | "name": "HotTextUnit", | ||
30 | "properties": { | ||
31 | "element": {"#": "strokeHardness"}, | ||
32 | "minValue": 0, | ||
33 | "maxValue": 100, | ||
34 | "value": 100, | ||
35 | "decimalPlace": 10, | ||
36 | "acceptableUnits" : ["px", "pt"] | ||
37 | } | ||
38 | }, | ||
14 | 39 | ||
15 | "owner": { | 40 | "owner": { |
16 | "module": "js/components/tools-properties/brush-properties.reel", | 41 | "module": "js/components/tools-properties/brush-properties.reel", |
17 | "name": "BrushProperties", | 42 | "name": "BrushProperties", |
18 | "properties": { | 43 | "properties": { |
19 | "element": {"#": "brushProperties"} | 44 | "element": {"#": "brushProperties"}, |
45 | "_strokeSize": {"@": "strokeSizeHT"}, | ||
46 | "_strokeHardness": {"@": "strokeHardnessHT"} | ||
20 | } | 47 | } |
21 | } | 48 | } |
22 | } | 49 | } |
@@ -26,6 +53,12 @@ | |||
26 | 53 | ||
27 | <body> | 54 | <body> |
28 | <div id="brushProperties" class="subToolHolderPanel"> | 55 | <div id="brushProperties" class="subToolHolderPanel"> |
56 | <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;"> | ||
57 | <label class="label"> Stroke:</label> | ||
58 | <div id="strokeSize" class="label"></div> | ||
59 | <label class="label"> Hardness:</label> | ||
60 | <div id="strokeHardness" class="label"></div> | ||
61 | </div> | ||
29 | </div> | 62 | </div> |
30 | </body> | 63 | </body> |
31 | 64 | ||
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 92da98cc..d2fcf888 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js | |||
@@ -9,17 +9,10 @@ var Component = require("montage/ui/component").Component; | |||
9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
10 | 10 | ||
11 | exports.BrushProperties = Montage.create(ToolProperties, { | 11 | exports.BrushProperties = Montage.create(ToolProperties, { |
12 | 12 | strokeSize: { | |
13 | 13 | get: function() { return this._strokeSize; } | |
14 | _subPrepare: { | ||
15 | value: function() { | ||
16 | //this.divElement.addEventListener("click", this, false); | ||
17 | } | ||
18 | }, | 14 | }, |
19 | 15 | strokeHardness: { | |
20 | handleClick: { | 16 | get: function() { return this._strokeHardness; } |
21 | value: function(event) { | ||
22 | // this.selectedElement = event._event.target.id; | ||
23 | } | ||
24 | } | 17 | } |
25 | }); \ No newline at end of file | 18 | }); |
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index f5b0bce1..c1469977 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js | |||
@@ -31,6 +31,8 @@ function GLBrushStroke() { | |||
31 | //stroke information | 31 | //stroke information |
32 | this._strokeWidth = 0.0; | 32 | this._strokeWidth = 0.0; |
33 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; | 33 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; |
34 | this._secondStrokeColor = this._strokeColor; | ||
35 | this._strokeHardness = 100; | ||
34 | this._strokeMaterial; | 36 | this._strokeMaterial; |
35 | this._strokeStyle = "Solid"; | 37 | this._strokeStyle = "Solid"; |
36 | 38 | ||
@@ -39,7 +41,7 @@ function GLBrushStroke() { | |||
39 | this._WETNESS_FACTOR = 0.25; | 41 | this._WETNESS_FACTOR = 0.25; |
40 | 42 | ||
41 | //prevent extremely long paths that can take a long time to render | 43 | //prevent extremely long paths that can take a long time to render |
42 | this._MAX_ALLOWED_SAMPLES = 500; | 44 | this._MAX_ALLOWED_SAMPLES = 5000; |
43 | 45 | ||
44 | //drawing context | 46 | //drawing context |
45 | this._world = null; | 47 | this._world = null; |
@@ -106,6 +108,8 @@ function GLBrushStroke() { | |||
106 | this.setStrokeMaterial = function (m) { this._strokeMaterial = m; } | 108 | this.setStrokeMaterial = function (m) { this._strokeMaterial = m; } |
107 | this.getStrokeColor = function () { return this._strokeColor; } | 109 | this.getStrokeColor = function () { return this._strokeColor; } |
108 | this.setStrokeColor = function (c) { this._strokeColor = c; } | 110 | this.setStrokeColor = function (c) { this._strokeColor = c; } |
111 | this.setSecondStrokeColor = function(c){this._secondStrokeColor=c;} | ||
112 | this.setStrokeHardness = function(h){this._strokeHardness=h;} | ||
109 | this.getStrokeStyle = function () { return this._strokeStyle; } | 113 | this.getStrokeStyle = function () { return this._strokeStyle; } |
110 | this.setStrokeStyle = function (s) { this._strokeStyle = s; } | 114 | this.setStrokeStyle = function (s) { this._strokeStyle = s; } |
111 | 115 | ||
@@ -133,7 +137,7 @@ function GLBrushStroke() { | |||
133 | this._Points[i][2]+=tz; | 137 | this._Points[i][2]+=tz; |
134 | } | 138 | } |
135 | } | 139 | } |
136 | 140 | ||
137 | this.computeMetaGeometry = function(){ | 141 | this.computeMetaGeometry = function(){ |
138 | if (this._dirty){ | 142 | if (this._dirty){ |
139 | var numPoints = this._Points.length; | 143 | var numPoints = this._Points.length; |
@@ -172,6 +176,44 @@ function GLBrushStroke() { | |||
172 | } | 176 | } |
173 | } | 177 | } |
174 | 178 | ||
179 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation | ||
180 | if (numPoints>1) { | ||
181 | var numInsertedPoints = 0; | ||
182 | var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long | ||
183 | var prevPt = this._Points[0]; | ||
184 | for (var i=1;i<numPoints;i++){ | ||
185 | var pt = this._Points[i]; | ||
186 | var diff = [pt[0]-prevPt[0], pt[1]-prevPt[1]]; | ||
187 | var distance = Math.sqrt(diff[0]*diff[0]+diff[1]*diff[1]); | ||
188 | if (distance>threshold){ | ||
189 | //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) | ||
190 | var prev = (i===1) ? i-1 : i-2; | ||
191 | var next = (i===numPoints-1) ? i : i+1; | ||
192 | var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; | ||
193 | //insert points along the prev. to current point | ||
194 | var numNewPoints = Math.floor(distance/threshold); | ||
195 | for (var j=0;j<numNewPoints;j++){ | ||
196 | var param = (j+1)/(numNewPoints+1); | ||
197 | var newpt = this._CatmullRomSplineInterpolate(ctrlPts, param); | ||
198 | //insert new point before point i | ||
199 | this._Points.splice(i, 0, newpt); | ||
200 | i++; | ||
201 | numInsertedPoints++; | ||
202 | } | ||
203 | this._dirty=true; | ||
204 | } | ||
205 | prevPt=pt; | ||
206 | //update numPoints to match the new length | ||
207 | numPoints = this._Points.length; | ||
208 | |||
209 | //end this function if the numPoints has gone above the max. size specified | ||
210 | if (numPoints> this._MAX_ALLOWED_SAMPLES){ | ||
211 | console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); | ||
212 | break; | ||
213 | } | ||
214 | } | ||
215 | console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); | ||
216 | } | ||
175 | // *** compute the bounding box ********* | 217 | // *** compute the bounding box ********* |
176 | this._BBoxMin = [Infinity, Infinity, Infinity]; | 218 | this._BBoxMin = [Infinity, Infinity, Infinity]; |
177 | this._BBoxMax = [-Infinity, -Infinity, -Infinity]; | 219 | this._BBoxMax = [-Infinity, -Infinity, -Infinity]; |
@@ -362,7 +404,6 @@ function GLBrushStroke() { | |||
362 | } | 404 | } |
363 | */ | 405 | */ |
364 | 406 | ||
365 | //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles) | ||
366 | var numTraces = this._strokeWidth; | 407 | var numTraces = this._strokeWidth; |
367 | var halfNumTraces = numTraces/2; | 408 | var halfNumTraces = numTraces/2; |
368 | var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush | 409 | var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush |
@@ -371,17 +412,20 @@ function GLBrushStroke() { | |||
371 | var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; | 412 | var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; |
372 | //ctx.globalCompositeOperation = 'source-over'; | 413 | //ctx.globalCompositeOperation = 'source-over'; |
373 | var distFromMiddle = Math.abs(halfNumTraces-t); | 414 | var distFromMiddle = Math.abs(halfNumTraces-t); |
374 | var alphaVal = 1.0 - (distFromMiddle/halfNumTraces); | 415 | var alphaVal = 1.0 - (100-this._strokeHardness)*(distFromMiddle/halfNumTraces)/100; |
375 | ctx.save(); | 416 | ctx.save(); |
376 | ctx.lineWidth=this._strokeWidth/10;//4; | 417 | ctx.lineWidth=this._strokeWidth/10;//4; |
377 | if (ctx.lineWidth<2) | 418 | if (ctx.lineWidth<2) |
378 | ctx.lineWidth=2; | 419 | ctx.lineWidth=2; |
420 | if (t===numTraces-1){ | ||
421 |