aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorPushkar Joshi2012-03-19 11:05:05 -0700
committerPushkar Joshi2012-03-19 11:05:05 -0700
commitc0bd8d8efcc501d4efa116a7cc0e802fd4e9f3e9 (patch)
treeb57f126e228673ec42047a50f0534df78d9a39b9 /js
parent8e29172990126b3d3857be5d18bb6985d4cf57ca (diff)
downloadninja-c0bd8d8efcc501d4efa116a7cc0e802fd4e9f3e9.tar.gz
draw the brush stroke in realtime
Diffstat (limited to 'js')
-rwxr-xr-xjs/lib/geom/brush-stroke.js31
-rw-r--r--js/tools/BrushTool.js16
2 files changed, 19 insertions, 28 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index ec2521ab..68b9110f 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -249,7 +249,7 @@ var BrushStroke = function GLBrushStroke() {
249 } 249 }
250 250
251 this.getStrokeAngle = function(){ 251 this.getStrokeAngle = function(){
252 this._strokeAngle = a; 252 return this._strokeAngle;
253 } 253 }
254 254
255 this.getStrokeStyle = function () { 255 this.getStrokeStyle = function () {
@@ -429,7 +429,12 @@ var BrushStroke = function GLBrushStroke() {
429 } 429 }
430 430
431 ctx.clearRect(0, 0, bboxWidth, bboxHeight); 431 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
432 this.drawToContext(ctx, bboxMin[0], bboxMin[1]);
433 ctx.restore();
434 } //this.render()
432 435
436 this.drawToContext = function(ctx, origX, origY){
437 var numPoints = this.getNumPoints();
433 if (this._strokeUseCalligraphic) { 438 if (this._strokeUseCalligraphic) {
434 //build the stamp for the brush stroke 439 //build the stamp for the brush stroke
435 var t=0; 440 var t=0;
@@ -453,13 +458,11 @@ var BrushStroke = function GLBrushStroke() {
453 ctx.lineCap="butt"; 458 ctx.lineCap="butt";
454 ctx.globalCompositeOperation = 'source-over'; 459 ctx.globalCompositeOperation = 'source-over';
455 ctx.globalAlpha = this._strokeColor[3]; 460 ctx.globalAlpha = this._strokeColor[3];
456 //ctx.lineWidth=this._strokeWidth/10;//todo figure out the correct formula for the line width 461 //todo figure out the correct formula for the line width
457 //if (ctx.lineWidth<2)
458 ctx.lineWidth=2; 462 ctx.lineWidth=2;
459 if (t===numTraces-1){ 463 if (t===numTraces-1){
460 ctx.lineWidth = 1; 464 ctx.lineWidth = 1;
461 } 465 }
462
463 for (t=0;t<numTraces;t++){ 466 for (t=0;t<numTraces;t++){
464 var disp = [brushStamp[t][0], brushStamp[t][1]]; 467 var disp = [brushStamp[t][0], brushStamp[t][1]];
465 var alphaVal = 1.0; 468 var alphaVal = 1.0;
@@ -470,17 +473,17 @@ var BrushStroke = function GLBrushStroke() {
470 } 473 }
471 474
472 ctx.save(); 475 ctx.save();
473
474 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 476 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
477
475 //linearly interpolate between the two stroke colors 478 //linearly interpolate between the two stroke colors
476 var currStrokeColor = VecUtils.vecInterpolate(4, this._strokeColor, this._secondStrokeColor, t/numTraces); 479 var currStrokeColor = VecUtils.vecInterpolate(4, this._strokeColor, this._secondStrokeColor, t/numTraces);
477 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; 480 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
478 481
479 ctx.translate(disp[0],disp[1]); 482 ctx.translate(disp[0],disp[1]);
480 ctx.beginPath(); 483 ctx.beginPath();
481 ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); 484 ctx.moveTo(this._Points[0][0]-origX, this._Points[0][1]-origY);
482 for (var i=0;i<numPoints;i++){ 485 for (var i=0;i<numPoints;i++){
483 ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); 486 ctx.lineTo(this._Points[i][0]-origX, this._Points[i][1]-origY);
484 } 487 }
485 ctx.stroke(); 488 ctx.stroke();
486 ctx.restore(); 489 ctx.restore();
@@ -496,21 +499,19 @@ var BrushStroke = function GLBrushStroke() {
496 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 499 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
497 for (var l=0;l<numlayers;l++){ 500 for (var l=0;l<numlayers;l++){
498 ctx.beginPath(); 501 ctx.beginPath();
499 ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); 502 ctx.moveTo(this._Points[0][0]-origX, this._Points[0][1]-origY);
500 if (numPoints===1){ 503 if (numPoints===1){
501 //display a tiny segment as a single point 504 //display a tiny segment as a single point
502 ctx.lineTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]+0.01); 505 ctx.lineTo(this._Points[0][0]-origX, this._Points[0][1]-origY+0.01);
503 } 506 }
504 for (var i=1;i<numPoints;i++){ 507 for (var i=1;i<numPoints;i++){
505 ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); 508 ctx.lineTo(this._Points[i][0]-origX, this._Points[i][1]-origY);
506 } 509 }
507 ctx.lineWidth=2*l+minStrokeWidth; 510 ctx.lineWidth=2*l+minStrokeWidth;
508 ctx.stroke(); 511 ctx.stroke();
509 } 512 }//for every layer l
510 } 513 } //if there is no calligraphic stroke
511 514 }; //this.drawToCanvas()
512 ctx.restore();
513 }; //render()
514 515
515 516
516 this.exportJSON = function(){ 517 this.exportJSON = function(){
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 90010cdf..93020318 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -204,20 +204,10 @@ exports.BrushTool = Montage.create(ShapeTool, {
204 204
205 var horizontalOffset = this.application.ninja.stage.userContentLeft; 205 var horizontalOffset = this.application.ninja.stage.userContentLeft;
206 var verticalOffset = this.application.ninja.stage.userContentTop; 206 var verticalOffset = this.application.ninja.stage.userContentTop;
207 var origX = -horizontalOffset;
208 var origY = -verticalOffset;
209 this._selectedBrushStroke.drawToContext(ctx, origX, origY);
207 210
208 var numPoints = this._selectedBrushStroke.getNumPoints();
209 ctx.lineWidth = 1;
210 ctx.strokeStyle = "black";
211 ctx.beginPath();
212 var pt = this._selectedBrushStroke.getPoint(0);
213 ctx.moveTo(pt[0]+ horizontalOffset,pt[1]+ verticalOffset);
214 for (var i = 1; i < numPoints; i++) {
215 pt = this._selectedBrushStroke.getPoint(i);
216 var x = pt[0]+ horizontalOffset;
217 var y = pt[1]+ verticalOffset;
218 ctx.lineTo(x,y);
219 }
220 ctx.stroke();
221 ctx.restore(); 211 ctx.restore();
222 212
223 } 213 }