aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-04-05 12:53:17 -0700
committerNivesh Rajbhandari2012-04-05 12:53:35 -0700
commita0f939feceaf3d23a6cd08ed5d7f6b236a5a9bde (patch)
tree8ad881b2964a51ae3538cf33cf5cf48f552b7608
parent4dc89306c43e86cdac254c81fb9bb3a92eb4a8b9 (diff)
downloadninja-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.js377
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 }