diff options
author | Nivesh Rajbhandari | 2012-03-07 11:42:46 -0800 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-03-07 11:42:46 -0800 |
commit | fc567223aded95c35982b1d1239f6d28a957a199 (patch) | |
tree | de23741ef2fbf1c206d6b8544af3f1b4310171bd | |
parent | f5b0162a9b148589f0ccc65a0332695ea6fd6be3 (diff) | |
download | ninja-fc567223aded95c35982b1d1239f6d28a957a199.tar.gz |
Gradient support for canvas-2d rectangle.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 22 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 64 |
2 files changed, 71 insertions, 15 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 7079fc7f..b6d97b14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -301,22 +301,25 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
301 | el.elementModel.shapeModel.GLGeomObj.setFillColor(null); | 301 | el.elementModel.shapeModel.GLGeomObj.setFillColor(null); |
302 | this.setShapeProperty(el, "fill", null); | 302 | this.setShapeProperty(el, "fill", null); |
303 | this.setShapeProperty(el, "background", color); | 303 | this.setShapeProperty(el, "background", color); |
304 | // el.elementModel.fill = null; | 304 | el.elementModel.fill = null; |
305 | return; | 305 | return; |
306 | case 'gradient': | 306 | case 'gradient': |
307 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | 307 | if(el.elementModel.shapeModel.useWebGl) |
308 | { | ||
309 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
310 | } | ||
308 | el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | 311 | el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); |
309 | el.elementModel.shapeModel.GLWorld.render(); | 312 | el.elementModel.shapeModel.GLWorld.render(); |
310 | this.setShapeProperty(el, "fill", color.color.css); | 313 | this.setShapeProperty(el, "fill", color.color.css); |
311 | this.setShapeProperty(el, "background", color); | 314 | this.setShapeProperty(el, "background", color); |
312 | // el.elementModel.fill = color; | 315 | el.elementModel.fill = color; |
313 | break; | 316 | break; |
314 | default: | 317 | default: |
315 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | 318 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); |
316 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | 319 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); |
317 | this.setShapeProperty(el, "fill", webGl); | 320 | this.setShapeProperty(el, "fill", webGl); |
318 | this.setShapeProperty(el, "background", color); | 321 | this.setShapeProperty(el, "background", color); |
319 | // el.elementModel.fill = color; | 322 | el.elementModel.fill = color; |
320 | } | 323 | } |
321 | } | 324 | } |
322 | } | 325 | } |
@@ -339,22 +342,25 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
339 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); | 342 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); |
340 | this.setShapeProperty(el, "stroke", null); | 343 | this.setShapeProperty(el, "stroke", null); |
341 | this.setShapeProperty(el, "border", color); | 344 | this.setShapeProperty(el, "border", color); |
342 | // el.elementModel.fill = null; | 345 | el.elementModel.fill = null; |
343 | return; | 346 | return; |
344 | case 'gradient': | 347 | case 'gradient': |
345 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | 348 | if(el.elementModel.shapeModel.useWebGl) |
349 | { | ||
350 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
351 | } | ||
346 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | 352 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); |
347 | el.elementModel.shapeModel.GLWorld.render(); | 353 | el.elementModel.shapeModel.GLWorld.render(); |
348 | this.setShapeProperty(el, "stroke", color.color.css); | 354 | this.setShapeProperty(el, "stroke", color.color.css); |
349 | this.setShapeProperty(el, "border", color); | 355 | this.setShapeProperty(el, "border", color); |
350 | // el.elementModel.fill = color; | 356 | el.elementModel.fill = color; |
351 | break; | 357 | break; |
352 | default: | 358 | default: |
353 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | 359 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); |
354 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | 360 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); |
355 | this.setShapeProperty(el, "stroke", webGl); | 361 | this.setShapeProperty(el, "stroke", webGl); |
356 | this.setShapeProperty(el, "border", color); | 362 | this.setShapeProperty(el, "border", color); |
357 | // el.elementModel.fill = color; | 363 | el.elementModel.fill = color; |
358 | } | 364 | } |
359 | } | 365 | } |
360 | } | 366 | } |
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 81b385b3..50271a13 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js | |||
@@ -459,15 +459,44 @@ var Rectangle = function GLRectangle() { | |||
459 | var lw = this._strokeWidth; | 459 | var lw = this._strokeWidth; |
460 | var w = world.getViewportWidth(), | 460 | var w = world.getViewportWidth(), |
461 | h = world.getViewportHeight(); | 461 | h = world.getViewportHeight(); |
462 | 462 | ||
463 | var c, | ||
464 | inset, | ||
465 | gradient, | ||
466 | colors, | ||
467 | len, | ||
468 | n, | ||
469 | position, | ||
470 | cs; | ||
463 | // render the fill | 471 | // render the fill |
464 | ctx.beginPath(); | 472 | ctx.beginPath(); |
465 | if (this._fillColor) { | 473 | if (this._fillColor) { |
466 | var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 474 | inset = Math.ceil( lw ) + 0.5; |
467 | ctx.fillStyle = c; | 475 | |
476 | if(this._fillColor.gradientMode) { | ||
477 | if(this._fillColor.gradientMode === "radial") { | ||
478 | gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h-2*inset); | ||
479 | } else { | ||
480 | gradient = ctx.createLinearGradient(inset, inset, w-inset, h-inset); | ||
481 | } | ||
482 | colors = this._fillColor.color; | ||
483 | |||
484 | len = colors.length; | ||
485 | |||
486 | for(n=0; n<len; n++) { | ||
487 | position = colors[n].position/100; | ||
488 | cs = colors[n].value; | ||
489 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
490 | } | ||
491 | |||
492 | ctx.fillStyle = gradient; | ||
493 | |||
494 | } else { | ||
495 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | ||
496 | ctx.fillStyle = c; | ||
497 | } | ||
468 | 498 | ||
469 | ctx.lineWidth = lw; | 499 | ctx.lineWidth = lw; |
470 | var inset = Math.ceil( lw ) + 0.5; | ||
471 | this.renderPath( inset, ctx ); | 500 | this.renderPath( inset, ctx ); |
472 | ctx.fill(); | 501 | ctx.fill(); |
473 | ctx.closePath(); | 502 | ctx.closePath(); |
@@ -476,11 +505,32 @@ var Rectangle = function GLRectangle() { | |||
476 | // render the stroke | 505 | // render the stroke |
477 | ctx.beginPath(); | 506 | ctx.beginPath(); |
478 | if (this._strokeColor) { | 507 | if (this._strokeColor) { |
479 | var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | 508 | inset = Math.ceil( 0.5*lw ) + 0.5; |
480 | ctx.strokeStyle = c; | 509 | |
510 | if(this._strokeColor.gradientMode) { | ||
511 | if(this._strokeColor.gradientMode === "radial") { | ||
512 | gradient = ctx.createRadialGradient(w/2, h/2, h/2, w/2, h/2, h); | ||
513 | } else { | ||
514 | gradient = ctx.createLinearGradient(0, 0, w, h); | ||
515 | } | ||
516 | colors = this._strokeColor.color; | ||
517 | |||
518 | len = colors.length; | ||
519 | |||
520 | for(n=0; n<len; n++) { | ||
521 | position = colors[n].position/100; | ||
522 | cs = colors[n].value; | ||
523 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
524 | } | ||
525 | |||
526 | ctx.strokeStyle = gradient; | ||
527 | |||
528 | } else { | ||
529 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
530 | ctx.strokeStyle = c; | ||
531 | } | ||
481 | 532 | ||
482 | ctx.lineWidth = lw; | 533 | ctx.lineWidth = lw; |
483 | var inset = Math.ceil( 0.5*lw ) + 0.5; | ||
484 | this.renderPath( inset, ctx ); | 534 | this.renderPath( inset, ctx ); |
485 | ctx.stroke(); | 535 | ctx.stroke(); |
486 | ctx.closePath(); | 536 | ctx.closePath(); |