aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/elements
diff options
context:
space:
mode:
authorEric2012-05-03 12:57:13 -0700
committerEric2012-05-03 12:57:13 -0700
commit595031cb9ac1dae6b8862e9bd75364b58ee0d4e5 (patch)
tree9917be0af29b0d9a346d525a720473007192c3f1 /js/controllers/elements
parent8eac5582b72115969a9f915f4303535c22018033 (diff)
parent20c0d7c1b6e7544da2aee3ade08b73883cd458c1 (diff)
downloadninja-595031cb9ac1dae6b8862e9bd75364b58ee0d4e5.tar.gz
Merge pull request #6 from mqg734/GradientFix
Updated hard-coded linear and radial gradients to use the color values in Linear/RadialGradientMaterials.
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-xjs/controllers/elements/shapes-controller.js46
1 files changed, 39 insertions, 7 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index acf3b63d..b2a7107b 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -142,7 +142,7 @@ exports.ShapesController = Montage.create(CanvasController, {
142 if(m) 142 if(m)
143 { 143 {
144 el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); 144 el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m);
145 color = this.getMaterialColor(value); 145 color = this.getMaterialColor(m);
146 if(color) 146 if(color)
147 { 147 {
148 el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); 148 el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color);
@@ -156,7 +156,7 @@ exports.ShapesController = Montage.create(CanvasController, {
156 if(m) 156 if(m)
157 { 157 {
158 el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); 158 el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m);
159 color = this.getMaterialColor(value); 159 color = this.getMaterialColor(m);
160 if(color) 160 if(color)
161 { 161 {
162 el.elementModel.shapeModel.GLGeomObj.setFillColor(color); 162 el.elementModel.shapeModel.GLGeomObj.setFillColor(color);
@@ -750,14 +750,34 @@ exports.ShapesController = Montage.create(CanvasController, {
750 value: function(m) 750 value: function(m)
751 { 751 {
752 var css, 752 var css,
753 colorObj; 753 colorObj,
754 if(m === "LinearGradientMaterial") 754 c,
755 mName = m.getName();
756 if(mName === "LinearGradientMaterial")
755 { 757 {
756 css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; 758 css = "-webkit-gradient(linear, left top, right top, from(";
759 c = this.webGlColorToCss(m, 1);
760 css += c.rgb + ")";
761 c = this.webGlColorToCss(m, 2);
762 css += ", color-stop(" + c.stop + ", " + c.rgb + ")";
763 c = this.webGlColorToCss(m, 3);
764 css += ", color-stop(" + c.stop + ", " + c.rgb + ")";
765 c = this.webGlColorToCss(m, 4);
766 css += ", to(" + c.rgb + "))";
767// console.log(css);
757 } 768 }
758 else if(m === "RadialGradientMaterial") 769 else if(mName === "RadialGradientMaterial")
759 { 770 {
760 css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)"; 771 css = "-webkit-radial-gradient(50% 50%, ellipse cover, ";
772 c = this.webGlColorToCss(m, 1);
773 css += c.rgb + " " + c.stop*100 + "%";
774 c = this.webGlColorToCss(m, 2);
775 css += c.rgb + " " + c.stop*100 + "%";
776 c = this.webGlColorToCss(m, 3);
777 css += c.rgb + " " + c.stop*100 + "%";
778 c = this.webGlColorToCss(m, 4);
779 css += c.rgb + " " + c.stop*100 + "%)";
780// console.log(css);
761 } 781 }
762 782
763 if(css) 783 if(css)
@@ -771,6 +791,18 @@ exports.ShapesController = Montage.create(CanvasController, {
771 791
772 return null; 792 return null;
773 } 793 }
794 },
795
796 webGlColorToCss: {
797 value: function(m, index)
798 {
799 var color, rgba, cStop;
800 color = m["getColor" + index]();
801 rgba = 'rgba(' + color[0]*255 + ',' + color[1]*255 + ',' + color[2]*255 + ',' + color[3] + ')';
802 cStop = m["getColorStop" + index]();
803
804 return {rgb:rgba, stop: cStop};
805 }
774 } 806 }
775 807
776}); 808});