aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPushkar Joshi2012-06-05 09:40:59 -0700
committerPushkar Joshi2012-06-05 09:40:59 -0700
commit0dd045b574a27233a452e87ca8ce3d65d725bbfe (patch)
tree53b33f9133b78359e4f1b89a7b591612e9671173
parentf1d75e5b29661abc4e173adc1f9de2e0cd91df83 (diff)
downloadninja-0dd045b574a27233a452e87ca8ce3d65d725bbfe.tar.gz
enable gradients for pen stroke and fill
-rwxr-xr-xjs/lib/geom/sub-path.js43
1 files changed, 37 insertions, 6 deletions
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index db115655..f765b715 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -77,6 +77,37 @@ GLSubpath.prototype.buildBuffers = function () {
77 //no need to do anything for now (no WebGL) 77 //no need to do anything for now (no WebGL)
78}; 78};
79 79
80//buildColor returns the fillStyle or strokeStyle for the Canvas 2D context
81GLSubpath.prototype.buildColor = function(ctx, //the 2D rendering context (for creating gradients if necessary)
82 ipColor, //color string, also encodes whether there's a gradient and of what type
83 w, //width of the region of color
84 h, //height of the region of color
85 lw) //linewidth (i.e. stroke width/size)
86{
87 if (ipColor.gradientMode){
88 var position, gradient, cs, inset; //vars used in gradient calculations
89 inset = Math.ceil( lw ) - 0.5;
90
91 if(ipColor.gradientMode === "radial") {
92 var ww = w - 2*lw, hh = h - 2*lw;
93 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
94 } else {
95 gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
96 }
97 var colors = ipColor.color;
98
99 var len = colors.length;
100 for(n=0; n<len; n++) {
101 position = colors[n].position/100;
102 cs = colors[n].value;
103 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
104 }
105 return gradient;
106 } else {
107 var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")";
108 return c;
109 }
110};
80//render 111//render
81// specify how to render the subpath in Canvas2D 112// specify how to render the subpath in Canvas2D
82GLSubpath.prototype.render = function () { 113GLSubpath.prototype.render = function () {
@@ -112,17 +143,17 @@ GLSubpath.prototype.render = function () {
112 143
113 ctx.lineWidth = this._strokeWidth; 144 ctx.lineWidth = this._strokeWidth;
114 ctx.strokeStyle = "black"; 145 ctx.strokeStyle = "black";
146
147 //vars used for the gradient computation in buildColor
148 var w = world.getViewportWidth(), h = world.getViewportHeight();
149
115 if (this._strokeColor) { 150 if (this._strokeColor) {
116 //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); 151 ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth);
117 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
118 ctx.strokeStyle = strokeColorStr;
119 } 152 }
120 153
121 ctx.fillStyle = "white"; 154 ctx.fillStyle = "white";
122 if (this._fillColor){ 155 if (this._fillColor){
123 //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 156 ctx.fillStyle = this.buildColor(ctx, this._fillColor, w, h, this._strokeWidth);
124 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
125 ctx.fillStyle = fillColorStr;
126 } 157 }
127 var lineCap = ['butt','round','square']; 158 var lineCap = ['butt','round','square'];
128 ctx.lineCap = lineCap[1]; 159 ctx.lineCap = lineCap[1];