diff options
author | Jonathan Duran | 2012-04-27 11:47:50 -0700 |
---|---|---|
committer | Jonathan Duran | 2012-04-27 11:47:50 -0700 |
commit | dcce4b47305bd67298893c6a3184b831ec28ac71 (patch) | |
tree | 516d889fc38c4ac5bfa85ee9f3930d1137622487 /js | |
parent | 185dae2438e680acfe8c974dc5d653000c380066 (diff) | |
parent | 917668dbd753d69b346cb9fd2e665fbe257f5311 (diff) | |
download | ninja-dcce4b47305bd67298893c6a3184b831ec28ac71.tar.gz |
Merge branch 'refs/heads/NINJAmaster' into TimelineUber
Diffstat (limited to 'js')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 50 | ||||
-rwxr-xr-x | js/mediators/keyboard-mediator.js | 2 | ||||
-rw-r--r-- | js/panels/presets/default-animation-presets.js | 21 | ||||
-rw-r--r-- | js/tools/BrushTool.js | 745 |
4 files changed, 459 insertions, 359 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index efd21c4a..1fae0c1d 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 |
@@ -568,17 +568,17 @@ var BrushStroke = function GLBrushStroke() { | |||
568 | } | 568 | } |
569 | ctx.save(); | 569 | ctx.save(); |
570 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); | 570 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); |
571 | this.drawToContext(ctx, 0, 0, false); | 571 | this.drawToContext(ctx, false); |
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, drawStageWorldPts, stageWorldDeltaX, stageWorldDeltaY, 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,23 @@ 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 | if (drawStageWorldPts) { |
627 | tempP = points[0].slice(0); | ||
628 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
629 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
630 | } else { | ||
631 | p = points[0]; | ||
632 | } | ||
633 | ctx.moveTo(p[0],p[1]); | ||
627 | for (var i=0;i<numPoints;i++){ | 634 | for (var i=0;i<numPoints;i++){ |
628 | ctx.lineTo(points[i][0]-origX, points[i][1]-origY); | 635 | if (drawStageWorldPts) { |
636 | tempP = points[i].slice(0); | ||
637 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
638 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
639 | } else { | ||
640 | p = points[i]; | ||
641 | } | ||
642 | ctx.lineTo(p[0],p[1]); | ||
629 | } | 643 | } |
630 | ctx.stroke(); | 644 | ctx.stroke(); |
631 | ctx.restore(); | 645 | ctx.restore(); |
@@ -641,13 +655,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+")"; | 655 | 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++){ | 656 | for (var l=0;l<numlayers;l++){ |
643 | ctx.beginPath(); | 657 | ctx.beginPath(); |
644 | ctx.moveTo(points[0][0]-origX, points[0][1]-origY); | 658 | if (drawStageWorldPts) { |
659 | tempP = points[0].slice(0); | ||
660 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
661 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
662 | } else { | ||
663 | p = points[0]; | ||
664 | } | ||
665 | ctx.moveTo(p[0],p[1]); | ||
645 | if (numPoints===1){ | 666 | if (numPoints===1){ |
646 | //display a tiny segment as a single point | 667 | //display a tiny segment as a single point |
647 | ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01); | 668 | ctx.lineTo(p[0],p[1]+0.01); |
648 | } | 669 | } |
649 | for (var i=1;i<numPoints;i++){ | 670 | for (var i=1;i<numPoints;i++){ |
650 | ctx.lineTo(points[i][0]-origX, points[i][1]-origY); | 671 | if (drawStageWorldPts) { |
672 | tempP = points[i].slice(0); | ||
673 | tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY; | ||
674 | p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat); | ||
675 | } else { | ||
676 | p = points[i]; | ||
677 | } | ||
678 | ctx.lineTo(p[0],p[1]); | ||
651 | } | 679 | } |
652 | ctx.lineWidth=2*l+minStrokeWidth; | 680 | ctx.lineWidth=2*l+minStrokeWidth; |
653 | ctx.stroke(); | 681 | ctx.stroke(); |
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 79967799..f8934669 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js | |||
@@ -180,7 +180,7 @@ exports.KeyboardMediator = Montage.create(Component, { | |||
180 | } | 180 | } |
181 | 181 | ||
182 | // Shortcut for Eyedropper Tool is I | 182 | // Shortcut for Eyedropper Tool is I |
183 | if(evt.keyCode === Keyboard.I ) { | 183 | if(evt.keyCode === Keyboard.I && !(evt.ctrlKey || evt.metaKey)) { |
184 | evt.preventDefault(); | 184 | evt.preventDefault(); |
185 | this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[12]}); | 185 | this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[12]}); |
186 | return; | 186 | return; |
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 578c1622..753b3365 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js | |||
@@ -52,7 +52,6 @@ exports.animationPresets = { | |||
52 | "-webkit-animation-direction": "normal", | 52 | "-webkit-animation-direction": "normal", |
53 | "-webkit-animation-timing-function": "ease", | 53 | "-webkit-animation-timing-function": "ease", |
54 | "-webkit-transform-style": "preserve-3d", | 54 | "-webkit-transform-style": "preserve-3d", |
55 | "-webkit-transform": "perspective(1000)", | ||
56 | "-webkit-animation-delay": "0s" | 55 | "-webkit-animation-delay": "0s" |
57 | } | 56 | } |
58 | },{ | 57 | },{ |
@@ -100,7 +99,6 @@ exports.animationPresets = { | |||
100 | "-webkit-animation-timing-function": "ease-out", | 99 | "-webkit-animation-timing-function": "ease-out", |
101 | "-webkit-transform-origin": "100% 50%", | 100 | "-webkit-transform-origin": "100% 50%", |
102 | "-webkit-transform-style": "preserve-3d", | 101 | "-webkit-transform-style": "preserve-3d", |
103 | "-webkit-transform": "perspective(1000)", | ||
104 | "-webkit-animation-delay": "0s" | 102 | "-webkit-animation-delay": "0s" |
105 | } | 103 | } |
106 | },{ | 104 | },{ |
@@ -109,31 +107,31 @@ exports.animationPresets = { | |||
109 | "keyText": "0%", | 107 | "keyText": "0%", |
110 | "styles": { | 108 | "styles": { |
111 | "opacity": "1", | 109 | "opacity": "1", |
112 | "-webkit-transform": "perspective(1000) rotateY(0deg)" | 110 | "-webkit-transform": "rotateY(0deg)" |
113 | } | 111 | } |
114 | }, { | 112 | }, { |
115 | "keyText": "70%", | 113 | "keyText": "70%", |
116 | "styles": { | 114 | "styles": { |
117 | "opacity": "1", | 115 | "opacity": "1", |
118 | "-webkit-transform": "perspective(1000) rotateY(0deg)" | 116 | "-webkit-transform": "rotateY(0deg)" |
119 | } | 117 | } |
120 | }, { | 118 | }, { |
121 | "keyText": "85%", | 119 | "keyText": "85%", |
122 | "styles": { | 120 | "styles": { |
123 | "opacity": "0", | 121 | "opacity": "0", |
124 | "-webkit-transform": "perspective(1000) rotateY(95deg)" | 122 | "-webkit-transform": "rotateY(95deg)" |
125 | } | 123 | } |
126 | }, { | 124 | }, { |
127 | "keyText": "86%", | 125 | "keyText": "86%", |
128 | "styles": { | 126 | "styles": { |
129 | "opacity": "0", | 127 | "opacity": "0", |
130 | "-webkit-transform": "perspective(1000) rotateY(-90deg)" | 128 | "-webkit-transform": "rotateY(-90deg)" |
131 | } | 129 | } |
132 | }, { | 130 | }, { |
133 | "keyText": "100%", | 131 | "keyText": "100%", |
134 | "styles": { | 132 | "styles": { |
135 | "opacity": "1", | 133 | "opacity": "1", |
136 | "-webkit-transform": "perspective(1000) rotateY(0deg)" | 134 | "-webkit-transform": "rotateY(0deg)" |
137 | } | 135 | } |
138 | }] | 136 | }] |
139 | }] | 137 | }] |
@@ -151,7 +149,6 @@ exports.animationPresets = { | |||
151 | "-webkit-animation-timing-function": "ease-out", | 149 | "-webkit-animation-timing-function": "ease-out", |
152 | "-webkit-transform-origin": "100% 50%", | 150 | "-webkit-transform-origin": "100% 50%", |
153 | "-webkit-transform-style": "preserve-3d", | 151 | "-webkit-transform-style": "preserve-3d", |
154 | "-webkit-transform": "perspective(1000)", | ||
155 | "-webkit-animation-delay": "0s" | 152 | "-webkit-animation-delay": "0s" |
156 | } | 153 | } |
157 | },{ |