diff options
Diffstat (limited to 'js/lib/geom')
-rwxr-xr-x | js/lib/geom/circle.js | 95 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 123 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 57 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 102 |
4 files changed, 328 insertions, 49 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index f94d4e6b..4b155b4c 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -444,16 +444,43 @@ var Circle = function GLCircle() { | |||
444 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); | 444 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); |
445 | if (bezPts) { | 445 | if (bezPts) { |
446 | var n = bezPts.length; | 446 | var n = bezPts.length; |
447 | var gradient, | ||
448 | colors, | ||
449 | len, | ||
450 | j, | ||
451 | position, | ||
452 | cs, | ||
453 | c; | ||
447 | 454 | ||
448 | // set up the fill style | 455 | // set up the fill style |
449 | ctx.beginPath(); | 456 | ctx.beginPath(); |
450 | ctx.lineWidth = 0; | 457 | ctx.lineWidth = 0; |
451 | if (this._fillColor) { | 458 | if (this._fillColor) { |
452 | var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 459 | if(this._fillColor.gradientMode) { |
453 | ctx.fillStyle = c; | 460 | if(this._fillColor.gradientMode === "radial") { |
454 | 461 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | |
462 | xCtr, yCtr, Math.max(yScale, xScale)); | ||
463 | } else { | ||
464 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
465 | } | ||
466 | colors = this._fillColor.color; | ||
467 | |||
468 | len = colors.length; | ||
469 | |||
470 | for(j=0; j<len; j++) { | ||
471 | position = colors[j].position/100; | ||
472 | cs = colors[j].value; | ||
473 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
474 | } | ||
475 | |||
476 | ctx.fillStyle = gradient; | ||
477 | |||
478 | } else { | ||
479 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | ||
480 | ctx.fillStyle = c; | ||
481 | } | ||
455 | // draw the fill | 482 | // draw the fill |
456 | ctx.beginPath(); | 483 | // ctx.beginPath(); |
457 | var p = MathUtils.transformPoint( bezPts[0], mat ); | 484 | var p = MathUtils.transformPoint( bezPts[0], mat ); |
458 | ctx.moveTo( p[0], p[1] ); | 485 | ctx.moveTo( p[0], p[1] ); |
459 | var index = 1; | 486 | var index = 1; |
@@ -506,9 +533,29 @@ var Circle = function GLCircle() { | |||
506 | ctx.beginPath(); | 533 | ctx.beginPath(); |
507 | ctx.lineWidth = lineWidth; | 534 | ctx.lineWidth = lineWidth; |
508 | if (this._strokeColor) { | 535 | if (this._strokeColor) { |
509 | var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | 536 | if(this._strokeColor.gradientMode) { |
510 | ctx.strokeStyle = c; | 537 | if(this._strokeColor.gradientMode === "radial") { |
511 | 538 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | |
539 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | ||
540 | } else { | ||
541 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
542 | } | ||
543 | colors = this._strokeColor.color; | ||
544 | |||
545 | len = colors.length; | ||
546 | |||
547 | for(j=0; j<len; j++) { | ||
548 | position = colors[j].position/100; | ||
549 | cs = colors[j].value; | ||
550 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
551 | } | ||
552 | |||
553 | ctx.strokeStyle = gradient; | ||
554 | |||
555 | } else { | ||
556 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
557 | ctx.strokeStyle = c; | ||
558 | } | ||
512 | // draw the stroke | 559 | // draw the stroke |
513 | p = MathUtils.transformPoint( bezPts[0], mat ); | 560 | p = MathUtils.transformPoint( bezPts[0], mat ); |
514 | ctx.moveTo( p[0], p[1] ); | 561 | ctx.moveTo( p[0], p[1] ); |
@@ -561,8 +608,20 @@ var Circle = function GLCircle() { | |||
561 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; | 608 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; |
562 | rtnStr += "innerRadius: " + this._innerRadius + "\n"; | 609 | rtnStr += "innerRadius: " + this._innerRadius + "\n"; |
563 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; | 610 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; |
564 | rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; | 611 | |
565 | rtnStr += "fillColor: " + String(this._fillColor) + "\n"; | 612 | if(this._strokeColor.gradientMode) { |
613 | rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n"; | ||
614 | rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n"; | ||
615 | } else { | ||
616 | rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; | ||
617 | } | ||
618 | |||
619 | if(this._fillColor.gradientMode) { | ||
620 | rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n"; | ||
621 | rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n"; | ||
622 | } else { | ||
623 | rtnStr += "fillColor: " + String(this._fillColor) + "\n"; | ||
624 | } | ||
566 | 625 | ||
567 | rtnStr += "strokeMat: "; | 626 | rtnStr += "strokeMat: "; |
568 | if (this._strokeMaterial) { | 627 | if (this._strokeMaterial) { |
@@ -596,8 +655,22 @@ var Circle = function GLCircle() { | |||
596 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); | 655 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); |
597 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); | 656 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); |
598 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); | 657 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); |
599 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); | 658 | if(importStr.indexOf("fillGradientMode: ") < 0) { |
600 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | 659 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); |
660 | } else { | ||
661 | this._fillColor = {}; | ||
662 | this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr ); | ||
663 | this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr )); | ||
664 | } | ||
665 | |||
666 | if(importStr.indexOf("strokeGradientMode: ") < 0) | ||
667 | { | ||
668 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | ||
669 | } else { | ||
670 | this._strokeColor = {}; | ||
671 | this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr ); | ||
672 | this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr )); | ||
673 | } | ||
601 | 674 | ||
602 | var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); | 675 | var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); |
603 | if (!strokeMat) { | 676 | if (!strokeMat) { |
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 1a197832..f285f24a 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js | |||
@@ -159,22 +159,61 @@ var GeomObj = function GLGeomObj() { | |||
159 | // Methods | 159 | // Methods |
160 | /////////////////////////////////////////////////////////////////////// | 160 | /////////////////////////////////////////////////////////////////////// |
161 | this.setMaterialColor = function(c, type) { | 161 | this.setMaterialColor = function(c, type) { |
162 | if (type == "fill") { | 162 | var i = 0, |
163 | this._fillColor = c.slice(0); | 163 | nMats = 0; |
164 | if(c.gradientMode) { | ||
165 | // Gradient support | ||
166 | if (this._materialArray && this._materialTypeArray) { | ||
167 | nMats = this._materialArray.length; | ||
168 | } | ||
169 | |||
170 | var stops = [], | ||
171 | colors = c.color; | ||
172 | |||
173 | var len = colors.length; | ||
174 | // TODO - Current shaders only support 4 color stops | ||
175 | if(len > 4) { | ||
176 | len = 4; | ||
177 | } | ||
178 | |||
179 | for(var n=0; n<len; n++) { | ||
180 | var position = colors[n].position/100; | ||
181 | var cs = colors[n].value; | ||
182 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
183 | stops.push(stop); | ||
184 | |||
185 | if (nMats === this._materialTypeArray.length) { | ||
186 | for (i=0; i<nMats; i++) { | ||
187 | if (this._materialTypeArray[i] == type) { | ||
188 | this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) ); | ||
189 | this._materialArray[i].setProperty( "colorStop"+(n+1), position ); | ||
190 | } | ||
191 | } | ||
192 | } | ||
193 | } | ||
194 | if (type === "fill") { | ||
195 | this._fillColor = c; | ||
196 | } else { | ||
197 | this._strokeColor = c; | ||
198 | } | ||
164 | } else { | 199 | } else { |
165 | this._strokeColor = c.slice(0); | 200 | if (type === "fill") { |
166 | } | 201 | this._fillColor = c.slice(0); |
202 | } else { | ||
203 | this._strokeColor = c.slice(0); | ||
204 | } | ||
167 | 205 | ||
168 | if (this._materialArray && this._materialTypeArray) { | 206 | if (this._materialArray && this._materialTypeArray) { |
169 | var nMats = this._materialArray.length; | 207 | nMats = this._materialArray.length; |
170 | if (nMats === this._materialTypeArray.length) { | 208 | if (nMats === this._materialTypeArray.length) { |
171 | for (var i=0; i<nMats; i++) { | 209 | for (i=0; i<nMats; i++) { |
172 | if (this._materialTypeArray[i] == type) { | 210 | if (this._materialTypeArray[i] == type) { |
173 | this._materialArray[i].setProperty( "color", c.slice(0) ); | 211 | this._materialArray[i].setProperty( "color", c.slice(0) ); |
212 | } | ||
174 | } | 213 | } |
175 | } | 214 | } |
176 | } | 215 | } |
177 | } | 216 | } |
178 | 217 | ||
179 | var world = this.getWorld(); | 218 | var world = this.getWorld(); |
180 | if (world) { | 219 | if (world) { |
@@ -192,14 +231,15 @@ var GeomObj = function GLGeomObj() { | |||
192 | 231 | ||
193 | if (strokeMaterial) { | 232 | if (strokeMaterial) { |
194 | strokeMaterial.init( this.getWorld() ); | 233 | strokeMaterial.init( this.getWorld() ); |
195 | if(this._strokeColor) { | ||
196 | strokeMaterial.setProperty("color", this._strokeColor); | ||
197 | } | ||
198 | } | 234 | } |
199 |