aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/line.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-03-13 11:16:47 -0700
committerValerio Virgillito2012-03-13 11:16:47 -0700
commit9f3307810541ca6f95d7ca6d1febe8afdcd2c101 (patch)
treedac91cf9c9f65b33886160db3aae364873a4352b /js/lib/geom/line.js
parent91335d6572a611ecde7a71dbbfdb82bdb40f7e2b (diff)
parent2ac9a855724cc4ccf147ce4130a733a84cc647c3 (diff)
downloadninja-9f3307810541ca6f95d7ca6d1febe8afdcd2c101.tar.gz
Merge pull request #110 from mqg734/WebGLFixes
Gradient Support for Shapes and Eyedropper support for gradients. Also fixed 3d bug when moving multiple selections in 3d using the Selection Tool
Diffstat (limited to 'js/lib/geom/line.js')
-rwxr-xr-xjs/lib/geom/line.js57
1 files changed, 51 insertions, 6 deletions
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index da63b21c..4a935de8 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -112,7 +112,14 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
112 rtnStr += "xAdj: " + this._xAdj + "\n"; 112 rtnStr += "xAdj: " + this._xAdj + "\n";
113 rtnStr += "yAdj: " + this._yAdj + "\n"; 113 rtnStr += "yAdj: " + this._yAdj + "\n";
114 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 114 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
115 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 115
116 if(this._strokeColor.gradientMode) {
117 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
118 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
119 } else {
120 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
121 }
122
116 rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; 123 rtnStr += "strokeStyle: " + this._strokeStyle + "\n";
117 rtnStr += "slope: " + String(this._slope) + "\n"; 124 rtnStr += "slope: " + String(this._slope) + "\n";
118 125
@@ -145,7 +152,15 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
145 152
146 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 153 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
147 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 154 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
148 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 155
156 if(importStr.indexOf("strokeGradientMode: ") < 0)
157 {
158 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
159 } else {
160 this._strokeColor = {};
161 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
162 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
163 }
149 164
150 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); 165 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
151 if (!strokeMat) { 166 if (!strokeMat) {
@@ -348,16 +363,46 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
348 if (!ctx) return; 363 if (!ctx) return;
349 364
350 // set up the stroke style 365 // set up the stroke style
351 var lineWidth = this._strokeWidth; 366 var lineWidth = this._strokeWidth,
367 w = this._width,
368 h = this._height;
369
370 var c,
371 gradient,
372 colors,
373 len,
374 n,
375 position,
376 cs;
377
352 ctx.beginPath(); 378 ctx.beginPath();
353 ctx.lineWidth = lineWidth; 379 ctx.lineWidth = lineWidth;
354 if (this._strokeColor) { 380 if (this._strokeColor) {
355 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 381 if(this._strokeColor.gradientMode) {
356 ctx.strokeStyle = c; 382 if(this._strokeColor.gradientMode === "radial") {
383 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2));
384 } else {
385 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
386 }
387 colors = this._strokeColor.color;
388
389 len = colors.length;
390
391 for(n=0; n<len; n++) {
392 position = colors[n].position/100;
393 cs = colors[n].value;
394 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
395 }
396
397 ctx.strokeStyle = gradient;
398
399 } else {
400 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
401 ctx.strokeStyle = c;
402 }
357 403
358 // get the points 404 // get the points
359 var p0, p1; 405 var p0, p1;
360 var w = this._width, h = this._height;
361 if(this._slope === "vertical") { 406 if(this._slope === "vertical") {
362 p0 = [0.5*w, 0]; 407 p0 = [0.5*w, 0];
363 p1 = [0.5*w, h]; 408 p1 = [0.5*w, h];