diff options
Diffstat (limited to 'js/lib/geom/line.js')
-rwxr-xr-x | js/lib/geom/line.js | 57 |
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]; |