diff options
author | Nivesh Rajbhandari | 2012-03-07 15:31:20 -0800 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-03-07 15:31:20 -0800 |
commit | b6288e1ffe4ffe29a595bb1e146feb388503e2c4 (patch) | |
tree | 5b1e681f2602dfe79715a75404d907aaeb2ae9d5 | |
parent | 5bef5c5f2f7ee45d4c619c65ab8e9307c30420b5 (diff) | |
download | ninja-b6288e1ffe4ffe29a595bb1e146feb388503e2c4.tar.gz |
gradient support for canvas-2d shapes.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 23 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 61 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 38 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 4 |
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 { |