aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-07 11:42:46 -0800
committerNivesh Rajbhandari2012-03-07 11:42:46 -0800
commitfc567223aded95c35982b1d1239f6d28a957a199 (patch)
treede23741ef2fbf1c206d6b8544af3f1b4310171bd
parentf5b0162a9b148589f0ccc65a0332695ea6fd6be3 (diff)
downloadninja-fc567223aded95c35982b1d1239f6d28a957a199.tar.gz
Gradient support for canvas-2d rectangle.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rwxr-xr-xjs/controllers/elements/shapes-controller.js22
-rwxr-xr-xjs/lib/geom/rectangle.js64
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();