aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-24 15:40:12 -0700
committerPushkar Joshi2012-04-24 15:40:12 -0700
commit4290e20e2b2f4536f4365d02e1cd7a1418bc8ea9 (patch)
tree4f4c6657125aeabd853717daaff1d1fbfc54fe54 /js/lib
parente7bbd9b08b4cd87530596b370366d994ca766650 (diff)
downloadninja-4290e20e2b2f4536f4365d02e1cd7a1418bc8ea9.tar.gz
allow the realtime drawing of brush strokes drawn off the standard XY plane by passing in the transformation matrix
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/geom/brush-stroke.js34
1 files changed, 24 insertions, 10 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index efd21c4a..89ef79fb 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() {
117 }; 117 };
118 118
119 this.getPoint = function (index) { 119 this.getPoint = function (index) {
120 return this._Points[index]; 120 return this._Points[index].slice(0);
121 }; 121 };
122 122
123 this.addPoint = function (pt) { 123 this.addPoint = function (pt) {
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() {
399 399
400 // ***** unproject all the centered points and convert them to 2D (plane space)***** 400 // ***** unproject all the centered points and convert them to 2D (plane space)*****
401 // (undo the projection step performed by the browser) 401 // (undo the projection step performed by the browser)
402 localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas 402 //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
403 localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv); 403 localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv);
404 404
405 //add to the list of local points 405 //add to the list of local points
@@ -572,13 +572,13 @@ var BrushStroke = function GLBrushStroke() {
572 ctx.restore(); 572 ctx.restore();
573 } //this.render() 573 } //this.render()
574 574
575 this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){ 575 this.drawToContext = function(ctx, deltaX, deltaY, drawStageWorldPts, stageWorldToScreenMat){
576 var points = this._LocalPoints; 576 var points = this._LocalPoints;
577 if (drawStageWorldPts){ 577 if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet)
578 points = this._Points; 578 points = this._Points;
579 } 579 }
580 var numPoints = points.length; 580 var numPoints = points.length;
581 581 var tempP, p;
582 if (this._strokeUseCalligraphic) { 582 if (this._strokeUseCalligraphic) {
583 //build the stamp for the brush stroke 583 //build the stamp for the brush stroke
584 var t=0; 584 var t=0;
@@ -623,9 +623,9 @@ var BrushStroke = function GLBrushStroke() {
623 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; 623 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
624 ctx.translate(disp[0],disp[1]); 624 ctx.translate(disp[0],disp[1]);
625 ctx.beginPath(); 625 ctx.beginPath();
626 ctx.moveTo(points[0][0]-origX, points[0][1]-origY); 626 ctx.moveTo(points[0][0]-deltaX, points[0][1]-deltaY);
627 for (var i=0;i<numPoints;i++){ 627 for (var i=0;i<numPoints;i++){
628 ctx.lineTo(points[i][0]-origX, points[i][1]-origY); 628 ctx.lineTo(points[i][0]-deltaX, points[i][1]-deltaY);
629 } 629 }
630 ctx.stroke(); 630 ctx.stroke();
631 ctx.restore(); 631 ctx.restore();
@@ -641,13 +641,27 @@ var BrushStroke = function GLBrushStroke() {
641 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 641 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
642 for (var l=0;l<numlayers;l++){ 642 for (var l=0;l<numlayers;l++){
643 ctx.beginPath(); 643 ctx.beginPath();
644 ctx.moveTo(points[0][0]-origX, points[0][1]-origY); 644 if (drawStageWorldPts) {
645 tempP = points[0].slice(0);
646 tempP[0]+=deltaX; tempP[1]+=deltaY;
647 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
648 } else {
649 p = points[0];
650 }
651 ctx.moveTo(p[0],p[1]);
645 if (numPoints===1){ 652 if (numPoints===1){
646 //display a tiny segment as a single point 653 //display a tiny segment as a single point
647 ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01); 654 ctx.lineTo(p[0],p[1]+0.01);
648 } 655 }
649 for (var i=1;i<numPoints;i++){ 656 for (var i=1;i<numPoints;i++){
650 ctx.lineTo(points[i][0]-origX, points[i][1]-origY); 657 if (drawStageWorldPts) {
658 tempP = points[i].slice(0);
659 tempP[0]+=deltaX; tempP[1]+=deltaY;
660 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
661 } else {
662 p = points[i];
663 }
664 ctx.lineTo(p[0],p[1]);
651 } 665 }
652 ctx.lineWidth=2*l+minStrokeWidth; 666 ctx.lineWidth=2*l+minStrokeWidth;
653 ctx.stroke(); 667 ctx.stroke();