diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/tools-properties/shape-properties.reel/shape-properties.html | 2 | ||||
-rwxr-xr-x | js/components/tools-properties/shape-properties.reel/shape-properties.js | 2 | ||||
-rwxr-xr-x | js/data/pi/pi-data.js | 2 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 94 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 2 |
5 files changed, 53 insertions, 49 deletions
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html index 7503f257..959feec6 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html | |||
@@ -66,7 +66,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
66 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 66 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
67 | "properties": { | 67 | "properties": { |
68 | "element": {"#": "strokeControl"}, | 68 | "element": {"#": "strokeControl"}, |
69 | "minValue": 1, | 69 | "minValue": 0, |
70 | "maxValue": 100, | 70 | "maxValue": 100, |
71 | "value": 1, | 71 | "value": 1, |
72 | "decimalPlace": 10, | 72 | "decimalPlace": 10, |
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 40ad0dd0..c5b22188 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js | |||
@@ -209,12 +209,14 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { | |||
209 | this._fillColorCtrlIcon.style["display"] = "none"; | 209 | this._fillColorCtrlIcon.style["display"] = "none"; |
210 | this._fillColorCtrlIcon.visible = false; | 210 | this._fillColorCtrlIcon.visible = false; |
211 | this.endDivider.style["display"] = "none"; | 211 | this.endDivider.style["display"] = "none"; |
212 | this._strokeSize.minValue = 1; | ||
212 | } else { | 213 | } else { |
213 | this._fillColorCtrlContainer.style["display"] = ""; | 214 | this._fillColorCtrlContainer.style["display"] = ""; |
214 | this._fillColorCtrlContainer.visible = true; | 215 | this._fillColorCtrlContainer.visible = true; |
215 | this._fillColorCtrlIcon.style["display"] = ""; | 216 | this._fillColorCtrlIcon.style["display"] = ""; |
216 | this._fillColorCtrlIcon.visible = true; | 217 | this._fillColorCtrlIcon.visible = true; |
217 | this.endDivider.style["display"] = ""; | 218 | this.endDivider.style["display"] = ""; |
219 | this._strokeSize.minValue = 0; | ||
218 | } | 220 | } |
219 | 221 | ||
220 | if (this._useWebGL.checked) { | 222 | if (this._useWebGL.checked) { |
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index f36f11e6..489938d5 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js | |||
@@ -499,7 +499,7 @@ exports.PiData = Montage.create( Montage, { | |||
499 | prop : "strokeSize", | 499 | prop : "strokeSize", |
500 | label : "Stroke", | 500 | label : "Stroke", |
501 | inputFunction: parseFloat, | 501 | inputFunction: parseFloat, |
502 | min : 0, | 502 | min : 1, |
503 | max : 100, | 503 | max : 100, |
504 | value : 1, | 504 | value : 1, |
505 | unit : "px", | 505 | unit : "px", |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 4995c2cb..28a99956 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -669,53 +669,33 @@ exports.Circle = Object.create(GeomObj, { | |||
669 | mat[5] = yScale; | 669 | mat[5] = yScale; |
670 | 670 | ||
671 | // set up the stroke style | 671 | // set up the stroke style |
672 | ctx.beginPath(); | 672 | if(lineWidth > 0) { |
673 | ctx.lineWidth = lineWidth; | 673 | ctx.beginPath(); |
674 | if (this._strokeColor) { | 674 | ctx.lineWidth = lineWidth; |
675 | if(this._strokeColor.gradientMode) { | 675 | if (this._strokeColor) { |
676 | if(this._strokeColor.gradientMode === "radial") { | 676 | if(this._strokeColor.gradientMode) { |
677 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | 677 | if(this._strokeColor.gradientMode === "radial") { |
678 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | 678 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
679 | } else { | 679 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); |
680 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | 680 | } else { |
681 | } | 681 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); |
682 | colors = this._strokeColor.color; | 682 | } |
683 | 683 | colors = this._strokeColor.color; | |
684 | len = colors.length; | ||
685 | |||
686 | for(j=0; j<len; j++) { | ||
687 | position = colors[j].position/100; | ||
688 | cs = colors[j].value; | ||
689 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
690 | } | ||
691 | |||
692 | ctx.strokeStyle = gradient; | ||
693 | 684 | ||
694 | } else { | 685 | len = colors.length; |
695 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
696 | ctx.strokeStyle = c; | ||
697 | } | ||
698 | // draw the stroke | ||
699 | p = MathUtils.transformPoint( bezPts[0], mat ); | ||
700 | ctx.moveTo( p[0], p[1] ); | ||
701 | index = 1; | ||
702 | while (index < n) { | ||
703 | var p0 = MathUtils.transformPoint( bezPts[index], mat ); | ||
704 | var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); | ||
705 | 686 | ||
706 | var x0 = p0[0], y0 = p0[1], | 687 | for(j=0; j<len; j++) { |
707 | x1 = p1[0], y1 = p1[1]; | 688 | position = colors[j].position/100; |
708 | ctx.quadraticCurveTo( x0, y0, x1, y1 ); | 689 | cs = colors[j].value; |
709 | index += 2; | 690 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); |
710 | } | 691 | } |
711 | 692 | ||
712 | if (MathUtils.fpSign(innerRad) > 0) { | 693 | ctx.strokeStyle = gradient; |
713 | // calculate the stroke matrix | ||
714 | xScale = 0.5*innerRad*this._width - 0.5*lineWidth; | ||
715 | yScale = 0.5*innerRad*this._height - 0.5*lineWidth; | ||
716 | mat[0] = xScale; | ||
717 | mat[5] = yScale; | ||
718 | 694 | ||
695 | } else { | ||
696 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
697 | ctx.strokeStyle = c; | ||
698 | } | ||
719 | // draw the stroke | 699 | // draw the stroke |
720 | p = MathUtils.transformPoint( bezPts[0], mat ); | 700 | p = MathUtils.transformPoint( bezPts[0], mat ); |
721 | ctx.moveTo( p[0], p[1] ); | 701 | ctx.moveTo( p[0], p[1] ); |
@@ -729,10 +709,32 @@ exports.Circle = Object.create(GeomObj, { | |||
729 | ctx.quadraticCurveTo( x0, y0, x1, y1 ); | 709 | ctx.quadraticCurveTo( x0, y0, x1, y1 ); |
730 | index += 2; | 710 | index += 2; |
731 | } | 711 | } |
732 | } | ||
733 | 712 | ||
734 | // render the stroke | 713 | if (MathUtils.fpSign(innerRad) > 0) { |
735 | ctx.stroke(); | 714 | // calculate the stroke matrix |
715 | xScale = 0.5*innerRad*this._width - 0.5*lineWidth; | ||
716 | yScale = 0.5*innerRad*this._height - 0.5*lineWidth; | ||
717 | mat[0] = xScale; | ||
718 | mat[5] = yScale; | ||
719 | |||
720 | // draw the stroke | ||
721 | p = MathUtils.transformPoint( bezPts[0], mat ); | ||
722 | ctx.moveTo( p[0], p[1] ); | ||
723 | index = 1; | ||
724 | while (index < n) { | ||
725 | var p0 = MathUtils.transformPoint( bezPts[index], mat ); | ||
726 | var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); | ||
727 | |||
728 | var x0 = p0[0], y0 = p0[1], | ||
729 | x1 = p1[0], y1 = p1[1]; | ||
730 | ctx.quadraticCurveTo( x0, y0, x1, y1 ); | ||
731 | index += 2; | ||
732 | } | ||
733 | } | ||
734 | |||
735 | // render the stroke | ||
736 | ctx.stroke(); | ||
737 | } | ||
736 | } | 738 | } |
737 | } | 739 | } |
738 | } | 740 | } |
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index f3db92af..b34a97ab 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js | |||
@@ -603,7 +603,7 @@ exports.Rectangle = Object.create(GeomObj, { | |||
603 | 603 | ||
604 | // render the stroke | 604 | // render the stroke |
605 | ctx.beginPath(); | 605 | ctx.beginPath(); |
606 | if (this._strokeColor) { | 606 | if (this._strokeColor && (lw > 0)) { |
607 | inset = Math.ceil( 0.5*lw ) - 0.5; | 607 | inset = Math.ceil( 0.5*lw ) - 0.5; |
608 | 608 | ||
609 | if(this._strokeColor.gradientMode) { | 609 | if(this._strokeColor.gradientMode) { |