aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/circle.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom/circle.js')
-rwxr-xr-xjs/lib/geom/circle.js157
1 files changed, 137 insertions, 20 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 52c2d449..e8c94b64 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -53,14 +53,16 @@ var Circle = function GLCircle() {
53 if(strokeMaterial){ 53 if(strokeMaterial){
54 this._strokeMaterial = strokeMaterial; 54 this._strokeMaterial = strokeMaterial;
55 } else { 55 } else {
56 this._strokeMaterial = MaterialsModel.exportFlatMaterial(); 56 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
57 } 57 }
58 58
59 if(fillMaterial) { 59 if(fillMaterial) {
60 this._fillMaterial = fillMaterial; 60 this._fillMaterial = fillMaterial;
61 } else { 61 } else {
62 this._fillMaterial = MaterialsModel.exportFlatMaterial(); 62 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
63 } 63 }
64
65 this.exportMaterials();
64 }; 66 };
65 67
66 /////////////////////////////////////////////////////////////////////// 68 ///////////////////////////////////////////////////////////////////////
@@ -442,16 +444,43 @@ var Circle = function GLCircle() {
442 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 );
443 if (bezPts) { 445 if (bezPts) {
444 var n = bezPts.length; 446 var n = bezPts.length;
447 var gradient,
448 colors,
449 len,
450 j,
451 position,
452 cs,
453 c;
445 454
446 // set up the fill style 455 // set up the fill style
447 ctx.beginPath(); 456 ctx.beginPath();
448 ctx.lineWidth = 0; 457 ctx.lineWidth = 0;
449 if (this._fillColor) { 458 if (this._fillColor) {
450 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 459 if(this._fillColor.gradientMode) {
451 ctx.fillStyle = c; 460 if(this._fillColor.gradientMode === "radial") {
452 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 }
453 // draw the fill 482 // draw the fill
454 ctx.beginPath(); 483// ctx.beginPath();
455 var p = MathUtils.transformPoint( bezPts[0], mat ); 484 var p = MathUtils.transformPoint( bezPts[0], mat );
456 ctx.moveTo( p[0], p[1] ); 485 ctx.moveTo( p[0], p[1] );
457 var index = 1; 486 var index = 1;
@@ -504,9 +533,29 @@ var Circle = function GLCircle() {
504 ctx.beginPath(); 533 ctx.beginPath();
505 ctx.lineWidth = lineWidth; 534 ctx.lineWidth = lineWidth;
506 if (this._strokeColor) { 535 if (this._strokeColor) {
507 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 536 if(this._strokeColor.gradientMode) {
508 ctx.strokeStyle = c; 537 if(this._strokeColor.gradientMode === "radial") {
509 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 }
510 // draw the stroke 559 // draw the stroke
511 p = MathUtils.transformPoint( bezPts[0], mat ); 560 p = MathUtils.transformPoint( bezPts[0], mat );
512 ctx.moveTo( p[0], p[1] ); 561 ctx.moveTo( p[0], p[1] );
@@ -549,7 +598,47 @@ var Circle = function GLCircle() {
549 } 598 }
550 }; 599 };
551 600
552 this.export = function() { 601 this.exportJSON = function()
602 {
603 var jObj =
604 {
605 'type' : this.geomType(),
606 'xoff' : this._xOffset,
607 'yoff' : this._yOffset,
608 'width' : this._width,
609 'height' : this._height,
610 'strokeWidth' : this._strokeWidth,
611 'strokeColor' : this._strokeColor,
612 'fillColor' : this._fillColor,
613 'innerRadius' : this._innerRadius,
614 'strokeStyle' : this._strokeStyle,
615 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(),
616 'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(),
617 'materials' : this.exportMaterialsJSON()
618 };
619
620 return jObj;
621 };
622
623 this.importJSON = function( jObj )
624 {
625 this._xOffset = jObj.xoff;
626 this._yOffset = jObj.yoff;
627 this._width = jObj.width;
628 this._height = jObj.height;
629 this._strokeWidth = jObj.strokeWidth;
630 this._strokeColor = jObj.strokeColor;
631 this._fillColor = jObj.fillColor;
632 this._innerRadius = jObj.innerRadius;
633 this._strokeStyle = jObj.strokeStyle;
634 var strokeMaterialName = jObj.strokeMat;
635 var fillMaterialName = jObj.fillMat;
636 this.importMaterialsJSON( jObj.materials );
637 };
638
639
640 this.export = function()
641 {
553 var rtnStr = "type: " + this.geomType() + "\n"; 642 var rtnStr = "type: " + this.geomType() + "\n";
554 643
555 rtnStr += "xoff: " + this._xOffset + "\n"; 644 rtnStr += "xoff: " + this._xOffset + "\n";
@@ -559,14 +648,26 @@ var Circle = function GLCircle() {
559 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 648 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
560 rtnStr += "innerRadius: " + this._innerRadius + "\n"; 649 rtnStr += "innerRadius: " + this._innerRadius + "\n";
561 rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; 650 rtnStr += "strokeStyle: " + this._strokeStyle + "\n";
562 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 651
563 rtnStr += "fillColor: " + String(this._fillColor) + "\n"; 652 if(this._strokeColor.gradientMode) {
653 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
654 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
655 } else {
656 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
657 }
658
659 if(this._fillColor.gradientMode) {
660 rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n";
661 rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
662 } else {
663 rtnStr += "fillColor: " + String(this._fillColor) + "\n";
664 }
564 665
565 rtnStr += "strokeMat: "; 666 rtnStr += "strokeMat: ";
566 if (this._strokeMaterial) { 667 if (this._strokeMaterial) {
567 rtnStr += this._strokeMaterial.getName(); 668 rtnStr += this._strokeMaterial.getName();
568 } else { 669 } else {
569 rtnStr += "flatMaterial"; 670 rtnStr += MaterialsModel.getDefaultMaterialName();
570 } 671 }
571 672
572 rtnStr += "\n"; 673 rtnStr += "\n";
@@ -575,11 +676,12 @@ var Circle = function GLCircle() {
575 if (this._fillMaterial) { 676 if (this._fillMaterial) {
576 rtnStr += this._fillMaterial.getName(); 677 rtnStr += this._fillMaterial.getName();
577 } else { 678 } else {
578 rtnStr += "flatMaterial"; 679 rtnStr += MaterialsModel.getDefaultMaterialName();
579 } 680 }
580
581 rtnStr += "\n"; 681 rtnStr += "\n";
582 682
683 rtnStr += this.exportMaterials();
684
583 return rtnStr; 685 return rtnStr;
584 }; 686 };
585 687
@@ -593,13 +695,27 @@ var Circle = function GLCircle() {
593 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 695 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
594 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 696 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
595 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); 697 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr );
596 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); 698 if(importStr.indexOf("fillGradientMode: ") < 0) {
597 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 699 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" );
700 } else {
701 this._fillColor = {};
702 this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr );
703 this._fillColor.color = this.stringToGradient(th