diff options
Diffstat (limited to 'js/lib/geom/circle.js')
-rwxr-xr-x | js/lib/geom/circle.js | 95 |
1 files changed, 84 insertions, 11 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index dd82a4cc..05501ec3 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -442,16 +442,43 @@ var Circle = function GLCircle() { | |||
442 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); | 442 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); |
443 | if (bezPts) { | 443 | if (bezPts) { |
444 | var n = bezPts.length; | 444 | var n = bezPts.length; |
445 | var gradient, | ||
446 | colors, | ||
447 | len, | ||
448 | j, | ||
449 | position, | ||
450 | cs, | ||
451 | c; | ||
445 | 452 | ||
446 | // set up the fill style | 453 | // set up the fill style |
447 | ctx.beginPath(); | 454 | ctx.beginPath(); |
448 | ctx.lineWidth = 0; | 455 | ctx.lineWidth = 0; |
449 | if (this._fillColor) { | 456 | if (this._fillColor) { |
450 | var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 457 | if(this._fillColor.gradientMode) { |
451 | ctx.fillStyle = c; | 458 | if(this._fillColor.gradientMode === "radial") { |
452 | 459 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | |
460 | xCtr, yCtr, Math.max(yScale, xScale)); | ||
461 | } else { | ||
462 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
463 | } | ||
464 | colors = this._fillColor.color; | ||
465 | |||
466 | len = colors.length; | ||
467 | |||
468 | for(j=0; j<len; j++) { | ||
469 | position = colors[j].position/100; | ||
470 | cs = colors[j].value; | ||
471 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
472 | } | ||
473 | |||
474 | ctx.fillStyle = gradient; | ||
475 | |||
476 | } else { | ||
477 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | ||
478 | ctx.fillStyle = c; | ||
479 | } | ||
453 | // draw the fill | 480 | // draw the fill |
454 | ctx.beginPath(); | 481 | // ctx.beginPath(); |
455 | var p = MathUtils.transformPoint( bezPts[0], mat ); | 482 | var p = MathUtils.transformPoint( bezPts[0], mat ); |
456 | ctx.moveTo( p[0], p[1] ); | 483 | ctx.moveTo( p[0], p[1] ); |
457 | var index = 1; | 484 | var index = 1; |
@@ -504,9 +531,29 @@ var Circle = function GLCircle() { | |||
504 | ctx.beginPath(); | 531 | ctx.beginPath(); |
505 | ctx.lineWidth = lineWidth; | 532 | ctx.lineWidth = lineWidth; |
506 | if (this._strokeColor) { | 533 | if (this._strokeColor) { |
507 | var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | 534 | if(this._strokeColor.gradientMode) { |
508 | ctx.strokeStyle = c; | 535 | if(this._strokeColor.gradientMode === "radial") { |
509 | 536 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | |
537 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | ||
538 | } else { | ||
539 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
540 | } | ||
541 | colors = this._strokeColor.color; | ||
542 | |||
543 | len = colors.length; | ||
544 | |||
545 | for(j=0; j<len; j++) { | ||
546 | position = colors[j].position/100; | ||
547 | cs = colors[j].value; | ||
548 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
549 | } | ||
550 | |||
551 | ctx.strokeStyle = gradient; | ||
552 | |||
553 | } else { | ||
554 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
555 | ctx.strokeStyle = c; | ||
556 | } | ||
510 | // draw the stroke | 557 | // draw the stroke |
511 | p = MathUtils.transformPoint( bezPts[0], mat ); | 558 | p = MathUtils.transformPoint( bezPts[0], mat ); |
512 | ctx.moveTo( p[0], p[1] ); | 559 | ctx.moveTo( p[0], p[1] ); |
@@ -559,8 +606,20 @@ var Circle = function GLCircle() { | |||
559 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; | 606 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; |
560 | rtnStr += "innerRadius: " + this._innerRadius + "\n"; | 607 | rtnStr += "innerRadius: " + this._innerRadius + "\n"; |
561 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; | 608 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; |
562 | rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; | 609 | |
563 | rtnStr += "fillColor: " + String(this._fillColor) + "\n"; | 610 | if(this._strokeColor.gradientMode) { |
611 | rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n"; | ||
612 | rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n"; | ||
613 | } else { | ||
614 | rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; | ||
615 | } | ||
616 | |||
617 | if(this._fillColor.gradientMode) { | ||
618 | rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n"; | ||
619 | rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n"; | ||
620 | } else { | ||
621 | rtnStr += "fillColor: " + String(this._fillColor) + "\n"; | ||
622 | } | ||
564 | 623 | ||
565 | rtnStr += "strokeMat: "; | 624 | rtnStr += "strokeMat: "; |
566 | if (this._strokeMaterial) { | 625 | if (this._strokeMaterial) { |
@@ -593,8 +652,22 @@ var Circle = function GLCircle() { | |||
593 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); | 652 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); |
594 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); | 653 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); |
595 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); | 654 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); |
596 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); | 655 | if(importStr.indexOf("fillGradientMode: ") < 0) { |
597 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | 656 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); |
657 | } else { | ||
658 | this._fillColor = {}; | ||
659 | this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr ); | ||
660 | this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr )); | ||
661 | } | ||
662 | |||
663 | if(importStr.indexOf("strokeGradientMode: ") < 0) | ||
664 | { | ||
665 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | ||
666 | } else { | ||
667 | this._strokeColor = {}; | ||
668 | this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr ); | ||
669 | this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr )); | ||
670 | } | ||
598 | 671 | ||
599 | var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); | 672 | var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); |
600 | if (!strokeMat) { | 673 | if (!strokeMat) { |