From 2a8a41711052bb557271c27f82faba8dd13fd880 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 06:12:34 -0800 Subject: preliminary support for setting gradients on webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 125 ++++++++++++++++++++++++--- 1 file changed, 114 insertions(+), 11 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..7079fc7f 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -259,24 +259,70 @@ exports.ShapesController = Montage.create(CanvasController, { } }, - setColor: { - value: function(el, color, isFill) { - var webGl = color.webGlColor || color.color.webGlColor; - if(!webGl) + _setGradientMaterial: { + value: function(el, gradientMode, isFill) { + var m = "LinearGradientMaterial"; + if(gradientMode === "radial") { - webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + m = "RadialGradientMaterial"; } + + if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + { + var fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) + { + if(isFill) + { + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); + el.elementModel.shapeModel.fillMaterial = fm; + } + else + { + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); + el.elementModel.shapeModel.strokeMaterial = fm; + } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + } + } + } + }, + + setColor: { + value: function(el, color, isFill) { + var mode = color.mode, + webGl; if(isFill) { - el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); - this.setShapeProperty(el, "fill", webGl); - this.setShapeProperty(el, "background", color); + if(mode) + { + switch (mode) { + case 'nocolor': + el.elementModel.shapeModel.GLGeomObj.setFillColor(null); + this.setShapeProperty(el, "fill", null); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = null; + return; + case 'gradient': + this._setGradientMaterial(el, color.color.gradientMode, isFill); + el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); + el.elementModel.shapeModel.GLWorld.render(); + this.setShapeProperty(el, "fill", color.color.css); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = color; + break; + default: + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); + this.setShapeProperty(el, "fill", webGl); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = color; + } + } } else { - el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); - this.setShapeProperty(el, "stroke", webGl); - this.setShapeProperty(el, "border", color); + // Support for ink-bottle tool if(color.strokeInfo) { var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, @@ -285,7 +331,64 @@ exports.ShapesController = Montage.create(CanvasController, { this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " + color.strokeInfo.strokeUnits); } + + if(mode) + { + switch (mode) { + case 'nocolor': + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); + this.setShapeProperty(el, "stroke", null); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = null; + return; + case 'gradient': + this._setGradientMaterial(el, color.color.gradientMode, isFill); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); + el.elementModel.shapeModel.GLWorld.render(); + this.setShapeProperty(el, "stroke", color.color.css); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = color; + break; + default: + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); + this.setShapeProperty(el, "stroke", webGl); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = color; + } + } } + + + + + + +// var webGl = color.webGlColor || color.color.webGlColor; +// if(!webGl) +// { +// webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); +// } +// if(isFill) +// { +// el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); +// this.setShapeProperty(el, "fill", webGl); +// this.setShapeProperty(el, "background", color); +// } +// else +// { +// el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); +// this.setShapeProperty(el, "stroke", webGl); +// this.setShapeProperty(el, "border", color); +// if(color.strokeInfo) +// { +// var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, +// color.strokeInfo.strokeUnits); +// el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); +// this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " +// + color.strokeInfo.strokeUnits); +// } +// } el.elementModel.shapeModel.GLWorld.render(); } }, -- cgit v1.2.3 From fc567223aded95c35982b1d1239f6d28a957a199 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 11:42:46 -0800 Subject: Gradient support for canvas-2d rectangle. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') 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, { el.elementModel.shapeModel.GLGeomObj.setFillColor(null); this.setShapeProperty(el, "fill", null); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = null; + el.elementModel.fill = null; return; case 'gradient': - this._setGradientMaterial(el, color.color.gradientMode, isFill); + if(el.elementModel.shapeModel.useWebGl) + { + this._setGradientMaterial(el, color.color.gradientMode, isFill); + } el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); this.setShapeProperty(el, "fill", color.color.css); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; break; default: webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); this.setShapeProperty(el, "fill", webGl); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; } } } @@ -339,22 +342,25 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); this.setShapeProperty(el, "stroke", null); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = null; + el.elementModel.fill = null; return; case 'gradient': - this._setGradientMaterial(el, color.color.gradientMode, isFill); + if(el.elementModel.shapeModel.useWebGl) + { + this._setGradientMaterial(el, color.color.gradientMode, isFill); + } el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); this.setShapeProperty(el, "stroke", color.color.css); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; break; default: webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); this.setShapeProperty(el, "stroke", webGl); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; } } } -- cgit v1.2.3 From b6288e1ffe4ffe29a595bb1e146feb388503e2c4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 15:31:20 -0800 Subject: gradient support for canvas-2d shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') 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, { _setGradientMaterial: { value: function(el, gradientMode, isFill) { - var m = "LinearGradientMaterial"; + var m = "LinearGradientMaterial", + fm; if(gradientMode === "radial") { m = "RadialGradientMaterial"; } - if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + if(isFill) { - var fm = Object.create(MaterialsModel.getMaterial(m)); - if(fm) + if(el.elementModel.shapeModel.fillMaterial.getName() !== m) { - if(isFill) + fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); el.elementModel.shapeModel.fillMaterial = fm; + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } - else + } + } + else + { + if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) + { + fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); el.elementModel.shapeModel.strokeMaterial = fm; + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } } } -- cgit v1.2.3