diff options
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-x | js/lib/geom/circle.js | 61 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 80 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 38 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 64 |
4 files changed, 205 insertions, 38 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index dd82a4cc..8f9f54d1 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -442,16 +442,43 @@ var Circle = function GLCircle() { | |||
442 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); | 442 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); |
443 | if (bezPts) { | 443 | if (bezPts) { |
444 | var n = bezPts.length; | 444 | var n = bezPts.length; |
445 | var gradient, | ||
446 | colors, | ||
447 | len, | ||
448 | j, | ||
449 | position, | ||
450 | cs, | ||
451 | c; | ||
445 | 452 | ||
446 | // set up the fill style | 453 | // set up the fill style |
447 | ctx.beginPath(); | 454 | ctx.beginPath(); |
448 | ctx.lineWidth = 0; | 455 | ctx.lineWidth = 0; |
449 | if (this._fillColor) { | 456 | if (this._fillColor) { |
450 | var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 457 | if(this._fillColor.gradientMode) { |
451 | ctx.fillStyle = c; | 458 | if(this._fillColor.gradientMode === "radial") { |
452 | 459 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | |
460 | xCtr, yCtr, Math.max(yScale, xScale)); | ||
461 | } else { | ||
462 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
463 | } | ||
464 | colors = this._fillColor.color; | ||
465 | |||
466 | len = colors.length; | ||
467 | |||
468 | for(j=0; j<len; j++) { | ||
469 | position = colors[j].position/100; | ||
470 | cs = colors[j].value; | ||
471 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
472 | } | ||
473 | |||
474 | ctx.fillStyle = gradient; | ||
475 | |||
476 | } else { | ||
477 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | ||
478 | ctx.fillStyle = c; | ||
479 | } | ||
453 | // draw the fill | 480 | // draw the fill |
454 | ctx.beginPath(); | 481 | // ctx.beginPath(); |
455 | var p = MathUtils.transformPoint( bezPts[0], mat ); | 482 | var p = MathUtils.transformPoint( bezPts[0], mat ); |
456 | ctx.moveTo( p[0], p[1] ); | 483 | ctx.moveTo( p[0], p[1] ); |
457 | var index = 1; | 484 | var index = 1; |
@@ -504,9 +531,29 @@ var Circle = function GLCircle() { | |||
504 | ctx.beginPath(); | 531 | ctx.beginPath(); |
505 | ctx.lineWidth = lineWidth; | 532 | ctx.lineWidth = lineWidth; |
506 | if (this._strokeColor) { | 533 | if (this._strokeColor) { |
507 | var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | 534 | if(this._strokeColor.gradientMode) { |
508 | ctx.strokeStyle = c; | 535 | if(this._strokeColor.gradientMode === "radial") { |
509 | 536 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | |
537 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | ||
538 | } else { | ||
539 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
540 | } | ||
541 | colors = this._strokeColor.color; | ||
542 | |||
543 | len = colors.length; | ||
544 | |||
545 | for(j=0; j<len; j++) { | ||
546 | position = colors[j].position/100; | ||
547 | cs = colors[j].value; | ||
548 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
549 | } | ||
550 | |||
551 | ctx.strokeStyle = gradient; | ||
552 | |||
553 | } else { | ||
554 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
555 | ctx.strokeStyle = c; | ||
556 | } | ||
510 | // draw the stroke | 557 | // draw the stroke |
511 | p = MathUtils.transformPoint( bezPts[0], mat ); | 558 | p = MathUtils.transformPoint( bezPts[0], mat ); |
512 | ctx.moveTo( p[0], p[1] ); | 559 | ctx.moveTo( p[0], p[1] ); |
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..1ea74475 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js | |||
@@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() { | |||
138 | // Methods | 138 | // Methods |
139 | /////////////////////////////////////////////////////////////////////// | 139 | /////////////////////////////////////////////////////////////////////// |
140 | this.setMaterialColor = function(c, type) { | 140 | this.setMaterialColor = function(c, type) { |
141 | if (type == "fill") { | 141 | var i = 0, |
142 | this._fillColor = c.slice(0); | 142 | nMats = 0; |
143 | if(c.gradientMode) { | ||
144 | // Gradient support | ||
145 | if (this._materialArray && this._materialTypeArray) { | ||
146 | nMats = this._materialArray.length; | ||
147 | } | ||
148 | |||
149 | var stops = [], | ||
150 | colors = c.color; | ||
151 | |||
152 | var len = colors.length; | ||
153 | // TODO - Current shaders only support 4 color stops | ||
154 | if(len > 4) { | ||
155 | len = 4; | ||
156 | } | ||
157 | |||
158 | for(var n=0; n<len; n++) { | ||
159 | var position = colors[n].position/100; | ||
160 | var cs = colors[n].value; | ||
161 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
162 | stops.push(stop); | ||
163 | |||
164 | if (nMats === this._materialTypeArray.length) { | ||
165 | for (i=0; i<nMats; i++) { | ||
166 | if (this._materialTypeArray[i] == type) { | ||
167 | this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) ); | ||
168 | this._materialArray[i].setProperty( "colorStop"+(n+1), position ); | ||
169 | } | ||
170 | } | ||
171 | } | ||
172 | } | ||
173 | if (type === "fill") { | ||
174 | this._fillColor = c; | ||
175 | } else { | ||
176 | this._strokeColor = c; | ||
177 | } | ||
143 | } else { | 178 | } else { |
144 | this._strokeColor = c.slice(0); | 179 | if (type === "fill") { |
145 | } | 180 | this._fillColor = c.slice(0); |
181 | } else { | ||
182 | this._strokeColor = c.slice(0); | ||
183 | } | ||
146 | 184 | ||
147 | if (this._materialArray && this._materialTypeArray) { | 185 | if (this._materialArray && this._materialTypeArray) { |
148 | var nMats = this._materialArray.length; | 186 | nMats = this._materialArray.length; |
149 | if (nMats === this._materialTypeArray.length) { | 187 | if (nMats === this._materialTypeArray.length) { |
150 | for (var i=0; i<nMats; i++) { | 188 | for (i=0; i<nMats; i++) { |
151 | if (this._materialTypeArray[i] == type) { | 189 | if (this._materialTypeArray[i] == type) { |
152 | this._materialArray[i].setProperty( "color", c.slice(0) ); | 190 | this._materialArray[i].setProperty( "color", c.slice(0) ); |
191 | } | ||
153 | } | 192 | } |
154 | } | 193 | } |
155 | } | 194 | } |
156 | } | 195 | } |
157 | 196 | ||
158 | var world = this.getWorld(); | 197 | var world = this.getWorld(); |
159 | if (world) { | 198 | if (world) { |
@@ -171,14 +210,15 @@ var GeomObj = function GLGeomObj() { | |||
171 | 210 | ||
172 | if (strokeMaterial) { | 211 | if (strokeMaterial) { |
173 | strokeMaterial.init( this.getWorld() ); | 212 | strokeMaterial.init( this.getWorld() ); |
174 | if(this._strokeColor) { | ||
175 | strokeMaterial.setProperty("color", this._strokeColor); | ||
176 | } | ||
177 | } | 213 | } |
178 | 214 | ||
179 | this._materialArray.push( strokeMaterial ); | 215 | this._materialArray.push( strokeMaterial ); |
180 | this._materialTypeArray.push( "stroke" ); | 216 | this._materialTypeArray.push( "stroke" ); |
181 | 217 | ||
218 | if(this._strokeColor) { | ||
219 | this.setStrokeColor(this._strokeColor); | ||
220 | } | ||
221 | |||
182 | return strokeMaterial; | 222 | return strokeMaterial; |
183 | }; | 223 | }; |
184 | 224 | ||
@@ -192,15 +232,15 @@ var GeomObj = function GLGeomObj() { | |||
192 | 232 | ||
193 | if (fillMaterial) { | 233 | if (fillMaterial) { |
194 | fillMaterial.init( this.getWorld() ); | 234 | fillMaterial.init( this.getWorld() ); |
195 | //if(!this.getFillMaterial() && this._fillColor) | ||
196 | if (this._fillColor) { | ||
197 | fillMaterial.setProperty("color", this._fillColor); | ||
198 | } | ||
199 | } | 235 | } |
200 | 236 | ||
201 | this._materialArray.push( fillMaterial ); | 237 | this._materialArray.push( fillMaterial ); |
202 | this._materialTypeArray.push( "fill" ); | 238 | this._materialTypeArray.push( "fill" ); |
203 | 239 | ||
240 | if (this._fillColor) { | ||
241 | this.setFillColor(this._fillColor); | ||
242 | } | ||
243 | |||
204 | return fillMaterial; | 244 | return fillMaterial; |
205 | }; | 245 | }; |
206 | 246 | ||
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index da63b21c..51a6fa98 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js | |||
@@ -348,16 +348,46 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok | |||
348 | if (!ctx) return; | 348 | if (!ctx) return; |
349 | 349 | ||
350 | // set up the stroke style | 350 | // set up the stroke style |
351 | var lineWidth = this._strokeWidth; | 351 | var lineWidth = this._strokeWidth, |
352 | w = this._width, | ||
353 | h = this._height; | ||
354 | |||
355 | var c, | ||
356 | gradient, | ||
357 | colors, | ||
358 | len, | ||
359 | n, | ||
360 | position, | ||
361 | cs; | ||
362 | |||
352 | ctx.beginPath(); | 363 | ctx.beginPath(); |
353 | ctx.lineWidth = lineWidth; | 364 | ctx |