diff options
author | Nivesh Rajbhandari | 2012-04-05 12:53:17 -0700 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-04-05 12:53:35 -0700 |
commit | a0f939feceaf3d23a6cd08ed5d7f6b236a5a9bde (patch) | |
tree | 8ad881b2964a51ae3538cf33cf5cf48f552b7608 | |
parent | 4dc89306c43e86cdac254c81fb9bb3a92eb4a8b9 (diff) | |
download | ninja-a0f939feceaf3d23a6cd08ed5d7f6b236a5a9bde.tar.gz |
Updated canvas-runtime.js to support gradients for rectangle and oval in canvas2d shape mode. Also fixed some typos.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rw-r--r-- | assets/canvas-runtime.js | 377 |
1 files changed, 231 insertions, 146 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 32829351..ee9f24a4 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -288,23 +288,23 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) | |||
288 | 288 | ||
289 | this.importObject = function( jObj, parent ) | 289 | this.importObject = function( jObj, parent ) |
290 | { | 290 | { |
291 | var type = jObj.type | 291 | var type = jObj.type; |
292 | var obj; | 292 | var obj; |
293 | switch (type) | 293 | switch (type) |
294 | { | 294 | { |
295 | case 1: | 295 | case 1: |
296 | obj = new NinjaCvsRt.RuntimeRectangle(); | 296 | obj = new NinjaCvsRt.RuntimeRectangle(); |
297 | obj.importJSON( jObj, parent ); | 297 | obj.importJSON( jObj ); |
298 | break; | 298 | break; |
299 | 299 | ||
300 | case 2: // circle | 300 | case 2: // circle |
301 | obj = new NinjaCvsRt.RuntimeOval(); | 301 | obj = new NinjaCvsRt.RuntimeOval(); |
302 | obj.importJSON( jObj, parent ); | 302 | obj.importJSON( jObj ); |
303 | break; | 303 | break; |
304 | 304 | ||
305 | case 3: // line | 305 | case 3: // line |
306 | obj = new NinjaCvsRt.RuntimeLine(); | 306 | obj = new NinjaCvsRt.RuntimeLine(); |
307 | obj.importJSON( jObj, parent ); | 307 | obj.importJSON( jObj ); |
308 | break; | 308 | break; |
309 | 309 | ||
310 | default: | 310 | default: |
@@ -513,7 +513,7 @@ NinjaCvsRt.RuntimeGeomObj = function () | |||
513 | case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; | 513 | case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; |
514 | 514 | ||
515 | default: | 515 | default: |
516 | console.log( "material type: " + materialType + " is not supported" ); | 516 | console.log( "material type: " + shaderName + " is not supported" ); |
517 | break; | 517 | break; |
518 | } | 518 | } |
519 | 519 | ||
@@ -741,7 +741,7 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
741 | ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); | 741 | ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); |
742 | 742 | ||
743 | // do the top of the rectangle | 743 | // do the top of the rectangle |
744 | pt = [inset, inset] | 744 | pt = [inset, inset]; |
745 | rad = tlRad - inset; | 745 | rad = tlRad - inset; |
746 | if (rad < 0) rad = 0; | 746 | if (rad < 0) rad = 0; |
747 | pt[0] += rad; | 747 | pt[0] += rad; |
@@ -770,34 +770,81 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
770 | var w = world.getViewportWidth(), | 770 | var w = world.getViewportWidth(), |
771 | h = world.getViewportHeight(); | 771 | h = world.getViewportHeight(); |
772 | 772 | ||
773 | // render the fill | 773 | var c, |
774 | ctx.beginPath(); | 774 | inset, |
775 | var c = null, inset = 0; | 775 | gradient, |
776 | if (this._fillColor) | 776 | colors, |
777 | { | 777 | len, |
778 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 778 | n, |
779 | ctx.fillStyle = c; | 779 | position, |
780 | 780 | cs; | |
781 | ctx.lineWidth = lw; | 781 | // render the fill |
782 | inset = Math.ceil( lw ) + 0.5; | 782 | ctx.beginPath(); |
783 | this.renderPath( inset, ctx ); | 783 | if (this._fillColor) { |
784 | ctx.fill(); | 784 | inset = Math.ceil( lw ) + 0.5; |
785 | ctx.closePath(); | 785 | |
786 | } | 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; | ||
787 | 793 | ||
788 | // render the stroke | 794 | len = colors.length; |
789 | ctx.beginPath(); | ||
790 | if (this._strokeColor) | ||
791 | { | ||
792 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
793 | ctx.strokeStyle = c; | ||
794 | 795 | ||
795 | ctx.lineWidth = lw; | 796 | for(n=0; n<len; n++) { |
796 | inset = Math.ceil( 0.5*lw ) + 0.5; | 797 | position = colors[n].position/100; |
797 | this.renderPath( inset, ctx ); | 798 | cs = colors[n].value; |
798 | ctx.stroke(); | 799 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); |
799 | ctx.closePath(); | 800 | } |
800 | } | 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 | } | ||
801 | }; | 848 | }; |
802 | }; | 849 | }; |
803 | 850 | ||
@@ -963,126 +1010,163 @@ NinjaCvsRt.RuntimeOval = function () | |||
963 | if (bezPts) | 1010 | if (bezPts) |
964 | { | 1011 | { |
965 | 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; | ||
966 | 1043 | ||
967 | // set up the fill style | 1044 | } else { |
968 | ctx.beginPath(); | 1045 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; |
969 | ctx.lineWidth = 0; | 1046 | ctx.fillStyle = c; |
970 | var c; | 1047 | } |
971 | if (this._fillColor) | 1048 | // draw the fill |
972 | { | 1049 | // ctx.beginPath(); |
973 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 1050 | var p = this.transformPoint( bezPts[0], mat ); |
974 | ctx.fillStyle = c; | 1051 | ctx.moveTo( p[0], p[1] ); |
975 | 1052 | var index = 1; | |
976 | // draw the fill | 1053 | while (index < n) { |
977 | ctx.beginPath(); | 1054 | p0 = this.transformPoint( bezPts[index], mat ); |
978 | var p = this.transformPoint( bezPts[0], mat ); | 1055 | p1 = this.transformPoint( bezPts[index+1], mat ); |
979 | ctx.moveTo( p[0], p[1] ); | 1056 | |
980 | var index = 1; | 1057 | x0 = p0[0]; y0 = p0[1]; |
981 | while (index < n) | 1058 | x1 = p1[0]; y1 = p1[1]; |
982 | { | 1059 | ctx.quadraticCurveTo( x0, y0, x1, y1 ); |
983 | p0 = this.transformPoint( bezPts[index], mat ); | 1060 | index += 2; |
984 | p1 = this.transformPoint( bezPts[index+1], mat ); | 1061 | } |
985 | |||
986 | x0 = p0[0]; y0 = p0[1]; | ||
987 | x1 = p1[0]; y1 = p1[1]; | ||
988 | ctx.quadraticCurveTo( x0, y0, x1, y1 ); | ||
989 | index += 2; | ||
990 | } | ||
991 | |||
992 |