From c88752d621069b12f978c1fd88ffdd52537a4657 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 15 Aug 2012 12:21:20 -0700 Subject: Allow rectangle and oval shapes to be created with 0 px stroke size. Line shapes' stroke size will still be restricted to a minimum of 1 px. Signed-off-by: Nivesh Rajbhandari --- .../shape-properties.reel/shape-properties.html | 2 +- .../shape-properties.reel/shape-properties.js | 2 + js/data/pi/pi-data.js | 2 +- js/lib/geom/circle.js | 94 +++++++++++----------- js/lib/geom/rectangle.js | 2 +- 5 files changed, 53 insertions(+), 49 deletions(-) (limited to 'js') 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. "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { "element": {"#": "strokeControl"}, - "minValue": 1, + "minValue": 0, "maxValue": 100, "value": 1, "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, { this._fillColorCtrlIcon.style["display"] = "none"; this._fillColorCtrlIcon.visible = false; this.endDivider.style["display"] = "none"; + this._strokeSize.minValue = 1; } else { this._fillColorCtrlContainer.style["display"] = ""; this._fillColorCtrlContainer.visible = true; this._fillColorCtrlIcon.style["display"] = ""; this._fillColorCtrlIcon.visible = true; this.endDivider.style["display"] = ""; + this._strokeSize.minValue = 0; } 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, { prop : "strokeSize", label : "Stroke", inputFunction: parseFloat, - min : 0, + min : 1, max : 100, value : 1, 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, { mat[5] = yScale; // set up the stroke style - ctx.beginPath(); - ctx.lineWidth = lineWidth; - if (this._strokeColor) { - if(this._strokeColor.gradientMode) { - if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, 0.5*Math.max(this._height, this._width)); - } else { - gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); - } - colors = this._strokeColor.color; - - len = colors.length; - - for(j=0; j 0) { + ctx.beginPath(); + ctx.lineWidth = lineWidth; + if (this._strokeColor) { + if(this._strokeColor.gradientMode) { + if(this._strokeColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, + xCtr, yCtr, 0.5*Math.max(this._height, this._width)); + } else { + gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + } + colors = this._strokeColor.color; - } else { - c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; - ctx.strokeStyle = c; - } - // draw the stroke - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) { - var p0 = MathUtils.transformPoint( bezPts[index], mat ); - var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + len = colors.length; - var x0 = p0[0], y0 = p0[1], - x1 = p1[0], y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } + for(j=0; j 0) { - // calculate the stroke matrix - xScale = 0.5*innerRad*this._width - 0.5*lineWidth; - yScale = 0.5*innerRad*this._height - 0.5*lineWidth; - mat[0] = xScale; - mat[5] = yScale; + ctx.strokeStyle = gradient; + } else { + c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; + ctx.strokeStyle = c; + } // draw the stroke p = MathUtils.transformPoint( bezPts[0], mat ); ctx.moveTo( p[0], p[1] ); @@ -729,10 +709,32 @@ exports.Circle = Object.create(GeomObj, { ctx.quadraticCurveTo( x0, y0, x1, y1 ); index += 2; } - } - // render the stroke - ctx.stroke(); + if (MathUtils.fpSign(innerRad) > 0) { + // calculate the stroke matrix + xScale = 0.5*innerRad*this._width - 0.5*lineWidth; + yScale = 0.5*innerRad*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // draw the stroke + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) { + var p0 = MathUtils.transformPoint( bezPts[index], mat ); + var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + + // render the stroke + ctx.stroke(); + } } } } 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, { // render the stroke ctx.beginPath(); - if (this._strokeColor) { + if (this._strokeColor && (lw > 0)) { inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { -- cgit v1.2.3