diff options
author | Pushkar Joshi | 2012-04-17 14:49:18 -0700 |
---|---|---|
committer | Pushkar Joshi | 2012-04-17 14:49:18 -0700 |
commit | df903a01e14134cadf109b733d09c6eadfa3966b (patch) | |
tree | 2351f1c05b2f852053fa0be533072088a9ad4e7c /assets/canvas-runtime.js | |
parent | 036cf034e124dbc1f4893e90f7c6d240904a3faf (diff) | |
parent | cacb4a21825818af392c2949967b0f3c1df509c5 (diff) | |
download | ninja-df903a01e14134cadf109b733d09c6eadfa3966b.tar.gz |
Merge branch 'master' into pentool
Conflicts:
js/tools/PenTool.js
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r-- | assets/canvas-runtime.js | 438 |
1 files changed, 261 insertions, 177 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index a35f473d..ee9f24a4 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -121,13 +121,12 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) | |||
121 | // all "live" materials | 121 | // all "live" materials |
122 | this._materials = []; | 122 | this._materials = []; |
123 | 123 | ||
124 | // provide the mapping for the asset directory | 124 | // provide the mapping for the asset directory |
125 | if (assetPath) | 125 | if (assetPath) { |
126 | { | 126 | this._assetPath = assetPath.slice(); |
127 | this._assetPath = assetPath.slice(); | 127 | if (this._assetPath[this._assetPath.length - 1] != '/') |
128 | if (this._assetPath[this._assetPath.length-1] != '/') | 128 | this._assetPath += '/'; |
129 | this._assetPath += '/'; | 129 | } |
130 | } | ||
131 | 130 | ||
132 | if(this._assetPath !== undefined) { | 131 | if(this._assetPath !== undefined) { |
133 | RDGE.globals.engine.setAssetPath(this._assetPath); | 132 | RDGE.globals.engine.setAssetPath(this._assetPath); |
@@ -289,23 +288,23 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) | |||
289 | 288 | ||
290 | this.importObject = function( jObj, parent ) | 289 | this.importObject = function( jObj, parent ) |
291 | { | 290 | { |
292 | var type = jObj.type | 291 | var type = jObj.type; |
293 | var obj; | 292 | var obj; |
294 | switch (type) | 293 | switch (type) |
295 | { | 294 | { |
296 | case 1: | 295 | case 1: |
297 | obj = new NinjaCvsRt.RuntimeRectangle(); | 296 | obj = new NinjaCvsRt.RuntimeRectangle(); |
298 | obj.importJSON( jObj, parent ); | 297 | obj.importJSON( jObj ); |
299 | break; | 298 | break; |
300 | 299 | ||
301 | case 2: // circle | 300 | case 2: // circle |
302 | obj = new NinjaCvsRt.RuntimeOval(); | 301 | obj = new NinjaCvsRt.RuntimeOval(); |
303 | obj.importJSON( jObj, parent ); | 302 | obj.importJSON( jObj ); |
304 | break; | 303 | break; |
305 | 304 | ||
306 | case 3: // line | 305 | case 3: // line |
307 | obj = new NinjaCvsRt.RuntimeLine(); | 306 | obj = new NinjaCvsRt.RuntimeLine(); |
308 | obj.importJSON( jObj, parent ); | 307 | obj.importJSON( jObj ); |
309 | break; | 308 | break; |
310 | 309 | ||
311 | default: | 310 | default: |
@@ -514,7 +513,7 @@ NinjaCvsRt.RuntimeGeomObj = function () | |||
514 | case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; | 513 | case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; |
515 | 514 | ||
516 | default: | 515 | default: |
517 | console.log( "material type: " + materialType + " is not supported" ); | 516 | console.log( "material type: " + shaderName + " is not supported" ); |
518 | break; | 517 | break; |
519 | } | 518 | } |
520 | 519 | ||
@@ -638,7 +637,7 @@ NinjaCvsRt.RuntimeGeomObj = function () | |||
638 | 637 | ||
639 | return mat; | 638 | return mat; |
640 | }; | 639 | }; |
641 | 640 | ||
642 | this.MatrixRotationZ = function( angle ) | 641 | this.MatrixRotationZ = function( angle ) |
643 | { | 642 | { |
644 | var mat = this.MatrixIdentity(4); | 643 | var mat = this.MatrixIdentity(4); |
@@ -742,7 +741,7 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
742 | ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); | 741 | ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); |
743 | 742 | ||
744 | // do the top of the rectangle | 743 | // do the top of the rectangle |
745 | pt = [inset, inset] | 744 | pt = [inset, inset]; |
746 | rad = tlRad - inset; | 745 | rad = tlRad - inset; |
747 | if (rad < 0) rad = 0; | 746 | if (rad < 0) rad = 0; |
748 | pt[0] += rad; | 747 | pt[0] += rad; |
@@ -771,34 +770,81 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
771 | var w = world.getViewportWidth(), | 770 | var w = world.getViewportWidth(), |
772 | h = world.getViewportHeight(); | 771 | h = world.getViewportHeight(); |
773 | 772 | ||
774 | // render the fill | 773 | var c, |
775 | ctx.beginPath(); | 774 | inset, |
776 | var c = null, inset = 0; | 775 | gradient, |
777 | if (this._fillColor) | 776 | colors, |
778 | { | 777 | len, |
779 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 778 | n, |
780 | ctx.fillStyle = c; | 779 | position, |
781 | 780 | cs; | |
782 | ctx.lineWidth = lw; | 781 | // render the fill |
783 | inset = Math.ceil( lw ) + 0.5; | 782 | ctx.beginPath(); |
784 | this.renderPath( inset, ctx ); | 783 | if (this._fillColor) { |
785 | ctx.fill(); | 784 | inset = Math.ceil( lw ) + 0.5; |
786 | ctx.closePath(); | 785 | |
787 | } | 786 | if(this._fillColor.gradientMode) { |
787 | if(this._fillColor.gradientMode === "radial") { | ||
788 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); | ||
789 | } else { | ||
790 | gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); | ||
791 | } | ||
792 | colors = this._fillColor.color; | ||
788 | 793 | ||
789 | // render the stroke | 794 | len = colors.length; |
790 | ctx.beginPath(); | ||
791 | if (this._strokeColor) | ||
792 | { | ||
793 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
794 | ctx.strokeStyle = c; | ||
795 | 795 | ||
796 | ctx.lineWidth = lw; | 796 | for(n=0; n<len; n++) { |
797 | inset = Math.ceil( 0.5*lw ) + 0.5; | 797 | position = colors[n].position/100; |
798 | this.renderPath( inset, ctx ); | 798 | cs = colors[n].value; |
799 | ctx.stroke(); | 799 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); |
800 | ctx.closePath(); | 800 | } |
801 | } | 801 | |
802 | ctx.fillStyle = gradient; | ||
803 | |||
804 | } else { | ||
805 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | ||
806 | ctx.fillStyle = c; | ||
807 | } | ||
808 | |||
809 | ctx.lineWidth = lw; | ||
810 | this.renderPath( inset, ctx ); | ||
811 | ctx.fill(); | ||
812 | ctx.closePath(); | ||
813 | } | ||
814 | |||
815 | // render the stroke | ||
816 | ctx.beginPath(); | ||
817 | if (this._strokeColor) { | ||
818 | inset = Math.ceil( 0.5*lw ) + 0.5; | ||
819 | |||
820 | if(this._strokeColor.gradientMode) { | ||
821 | if(this._strokeColor.gradientMode === "radial") { | ||
822 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); | ||
823 | } else { | ||
824 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); | ||
825 | } | ||
826 | colors = this._strokeColor.color; | ||
827 | |||
828 | len = colors.length; | ||
829 | |||
830 | for(n=0; n<len; n++) { | ||
831 | position = colors[n].position/100; | ||
832 | cs = colors[n].value; | ||
833 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
834 | } | ||
835 | |||
836 | ctx.strokeStyle = gradient; | ||
837 | |||
838 | } else { | ||
839 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
840 | ctx.strokeStyle = c; | ||
841 | } | ||
842 | |||
843 | ctx.lineWidth = lw; | ||
844 | this.renderPath( inset, ctx ); | ||
845 | ctx.stroke(); | ||
846 | ctx.closePath(); | ||
847 | } | ||
802 | }; | 848 | }; |
803 | }; | 849 | }; |
804 | 850 | ||
@@ -964,126 +1010,163 @@ NinjaCvsRt.RuntimeOval = function () | |||
964 | if (bezPts) | 1010 | if (bezPts) |
965 | { | 1011 | { |
966 | var n = bezPts.length; | 1012 | var n = bezPts.length; |
1013 | var gradient, | ||
1014 | colors, | ||
1015 | len, | ||
1016 | j, | ||
1017 | position, | ||
1018 | cs, | ||
1019 | c; | ||
1020 | |||
1021 | // set up the fill style | ||
1022 | ctx.beginPath(); | ||
1023 | ctx.lineWidth = 0; | ||
1024 | if (this._fillColor) { | ||
1025 | if(this._fillColor.gradientMode) { | ||
1026 | if(this._fillColor.gradientMode === "radial") { | ||
1027 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | ||
1028 | xCtr, yCtr, Math.max(yScale, xScale)); | ||
1029 | } else { | ||
1030 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
1031 | } | ||
1032 | colors = this._fillColor.color; | ||
1033 | |||
1034 | len = colors.length; | ||
1035 | |||
1036 | for(j=0; j<len; j++) { | ||
1037 | position = colors[j].position/100; | ||
1038 | cs = colors[j].value; | ||
1039 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
1040 | } | ||
1041 | |||
1042 | ctx.fillStyle = gradient; | ||
967 | 1043 | ||
968 | // set up the fill style | 1044 | } else { |
969 | ctx.beginPath(); |