aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-07 15:31:20 -0800
committerNivesh Rajbhandari2012-03-07 15:31:20 -0800
commitb6288e1ffe4ffe29a595bb1e146feb388503e2c4 (patch)
tree5b1e681f2602dfe79715a75404d907aaeb2ae9d5
parent5bef5c5f2f7ee45d4c619c65ab8e9307c30420b5 (diff)
downloadninja-b6288e1ffe4ffe29a595bb1e146feb388503e2c4.tar.gz
gradient support for canvas-2d shapes.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rwxr-xr-xjs/controllers/elements/shapes-controller.js23
-rwxr-xr-xjs/lib/geom/circle.js61
-rwxr-xr-xjs/lib/geom/line.js38
-rwxr-xr-xjs/lib/geom/rectangle.js4
4 files changed, 106 insertions, 20 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index b6d97b14..d72d9c14 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -261,28 +261,37 @@ exports.ShapesController = Montage.create(CanvasController, {
261 261
262 _setGradientMaterial: { 262 _setGradientMaterial: {
263 value: function(el, gradientMode, isFill) { 263 value: function(el, gradientMode, isFill) {
264 var m = "LinearGradientMaterial"; 264 var m = "LinearGradientMaterial",
265 fm;
265 if(gradientMode === "radial") 266 if(gradientMode === "radial")
266 { 267 {
267 m = "RadialGradientMaterial"; 268 m = "RadialGradientMaterial";
268 } 269 }
269 270
270 if(el.elementModel.shapeModel.fillMaterial.getName() !== m) 271 if(isFill)
271 { 272 {
272 var fm = Object.create(MaterialsModel.getMaterial(m)); 273 if(el.elementModel.shapeModel.fillMaterial.getName() !== m)
273 if(fm)
274 { 274 {
275 if(isFill) 275 fm = Object.create(MaterialsModel.getMaterial(m));
276 if(fm)
276 { 277 {
277 el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); 278 el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
278 el.elementModel.shapeModel.fillMaterial = fm; 279 el.elementModel.shapeModel.fillMaterial = fm;
280 el.elementModel.shapeModel.GLGeomObj.buildBuffers();
279 } 281 }
280 else 282 }
283 }
284 else
285 {
286 if(el.elementModel.shapeModel.strokeMaterial.getName() !== m)
287 {
288 fm = Object.create(MaterialsModel.getMaterial(m));
289 if(fm)
281 { 290 {
282 el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); 291 el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm);
283 el.elementModel.shapeModel.strokeMaterial = fm; 292 el.elementModel.shapeModel.strokeMaterial = fm;
293 el.elementModel.shapeModel.GLGeomObj.buildBuffers();
284 } 294 }
285 el.elementModel.shapeModel.GLGeomObj.buildBuffers();
286 } 295 }
287 } 296 }
288 } 297 }
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index dd82a4cc..70f608be 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, yScale);
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, yScale,
537 xCtr, yCtr, 0.5*this._height);
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/line.js b/js/lib/geom/line.js
index da63b21c..eaa26cf0 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.lineWidth = lineWidth;
354 if (this._strokeColor) { 365 if (this._strokeColor) {
355 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 366 if(this._strokeColor.gradientMode) {
356 ctx.strokeStyle = c; 367 if(this._strokeColor.gradientMode === "radial") {
368 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2);
369 } else {
370 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
371 }
372 colors = this._strokeColor.color;
373
374 len = colors.length;
375
376 for(n=0; n<len; n++) {
377 position = colors[n].position/100;
378 cs = colors[n].value;
379 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
380 }
381
382 ctx.strokeStyle = gradient;
383
384 } else {
385 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
386 ctx.strokeStyle = c;
387 }
357 388
358 // get the points 389 // get the points
359 var p0, p1; 390 var p0, p1;
360 var w = this._width, h = this._height;
361 if(this._slope === "vertical") { 391 if(this._slope === "vertical") {
362 p0 = [0.5*w, 0]; 392 p0 = [0.5*w, 0];
363 p1 = [0.5*w, h]; 393 p1 = [0.5*w, h];
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index d01d5b28..f13f624d 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -475,7 +475,7 @@ var Rectangle = function GLRectangle() {
475 475
476 if(this._fillColor.gradientMode) { 476 if(this._fillColor.gradientMode) {
477 if(this._fillColor.gradientMode === "radial") { 477 if(this._fillColor.gradientMode === "radial") {
478 gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h-2*inset); 478 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, h/2-inset);
479 } else { 479 } else {
480 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); 480 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
481 } 481 }
@@ -509,7 +509,7 @@ var Rectangle = function GLRectangle() {
509 509
510 if(this._strokeColor.gradientMode) { 510 if(this._strokeColor.gradientMode) {
511 if(this._strokeColor.gradientMode === "radial") { 511 if(this._strokeColor.gradientMode === "radial") {
512 gradient = ctx.createRadialGradient(w/2, h/2, h/2, w/2, h/2, h); 512 gradient = ctx.createRadialGradient(w/2, h/2, h/2-inset, w/2, h/2, h/2);
513 } else {