diff --git a/examples/JSON/Rect and Attribute Testing.html b/examples/JSON/Rect and Attribute Testing.html index 00cf326e..e9ed89f1 100644 --- a/examples/JSON/Rect and Attribute Testing.html +++ b/examples/JSON/Rect and Attribute Testing.html @@ -38,7 +38,7 @@ var size4 = new Size(100, 100); var rectangle4 = new Rectangle(point4, size4); var cornerSize4 = new Size(30, 30); - var path4 = new Path.RoundRectangle(rectangle4, cornerSize4); + var path4 = new Path.Rectangle(rectangle4, cornerSize4); path4.strokeColor= 'yellow'; path4.fillColor='purple'; diff --git a/examples/JSON/Rotated Primitives.html b/examples/JSON/Rotated Primitives.html index 99668693..60ba4dbe 100644 --- a/examples/JSON/Rotated Primitives.html +++ b/examples/JSON/Rotated Primitives.html @@ -26,7 +26,7 @@ circle.scale(0.5, 1); circle.rotate(40); - var rect = new Path.RoundRectangle(250, 20, 200, 300, 40, 20); + var rect = new Path.Rectangle(250, 20, 200, 300, 40, 20); rect.fillColor = 'yellow'; rect.rotate(-20); diff --git a/examples/Paperjs.org/RoundedRectangles.html b/examples/Paperjs.org/RoundedRectangles.html index 5567bb25..601857b6 100644 --- a/examples/Paperjs.org/RoundedRectangles.html +++ b/examples/Paperjs.org/RoundedRectangles.html @@ -13,7 +13,7 @@ for (var i = 0; i < amount; i++) { var rect = new Rectangle([0, 0], [25, 25]); rect.center = mousePoint; - var path = new Path.RoundRectangle(rect, 6); + var path = new Path.Rectangle(rect, 6); path.fillColor = colors[i % 4]; var scale = (1 - i / amount) * 20; path.scale(scale); diff --git a/examples/Rasters/PhyllotaxisRaster.html b/examples/Rasters/PhyllotaxisRaster.html index 61d40b6b..568886d3 100644 --- a/examples/Rasters/PhyllotaxisRaster.html +++ b/examples/Rasters/PhyllotaxisRaster.html @@ -38,7 +38,7 @@ var spacing = 5; for (var i = 1; i <= amount; i++) { var radius = 8 - (i / amount * 4); - new Path.RoundRectangle({ + new Path.Rectangle({ point: { length: spacing * Math.sqrt(i), angle: i * rotation diff --git a/examples/SVG Export/Rect and Attribute Testing.html b/examples/SVG Export/Rect and Attribute Testing.html index 125eb8a9..56594b41 100644 --- a/examples/SVG Export/Rect and Attribute Testing.html +++ b/examples/SVG Export/Rect and Attribute Testing.html @@ -38,7 +38,7 @@ var size4 = new Size(100, 100); var rectangle4 = new Rectangle(point4, size4); var cornerSize4 = new Size(30, 30); - var path4 = new Path.RoundRectangle(rectangle4, cornerSize4); + var path4 = new Path.Rectangle(rectangle4, cornerSize4); path4.strokeColor= 'yellow'; path4.fillColor='purple'; diff --git a/examples/SVG Export/Rotated Primitives.html b/examples/SVG Export/Rotated Primitives.html index e03c6cf4..35e2e23f 100644 --- a/examples/SVG Export/Rotated Primitives.html +++ b/examples/SVG Export/Rotated Primitives.html @@ -26,7 +26,7 @@ circle.scale(0.5, 1); circle.rotate(40); - var rect = new Path.RoundRectangle(250, 20, 200, 300, 40, 20); + var rect = new Path.Rectangle(250, 20, 200, 300, 40, 20); rect.fillColor = 'yellow'; rect.rotate(-20); rect.data = { diff --git a/examples/Scripts/RoundRectangle.html b/examples/Scripts/RoundRectangle.html index d4a40748..fd0cb66e 100644 --- a/examples/Scripts/RoundRectangle.html +++ b/examples/Scripts/RoundRectangle.html @@ -11,7 +11,7 @@ function onFrame(event) { if (path) path.remove(); - path = new Path.RoundRectangle({ + path = new Path.Rectangle({ radius: Math.abs(Math.sin(event.count / 40)) * 150 + 10, rectangle: { size: [300, 300] diff --git a/src/core/Base.js b/src/core/Base.js index 398b8d13..32a0e4f8 100644 --- a/src/core/Base.js +++ b/src/core/Base.js @@ -235,9 +235,10 @@ this.Base = Base.inject(/** @lends Base# */{ * @param {Number} start the index at which to start reading in the list * @param {String} name the property name to read from. */ - readNamed: function(list, name) { + readNamed: function(list, name, start, length, clone, readNull) { var value = this.getNamed(list, name); - return this.read(value != null ? [value] : list); + return this.read(value != null ? [value] : list, start, length, + clone, readNull); }, /** diff --git a/src/path/Path.Constructors.js b/src/path/Path.Constructors.js index 90d63538..9a195cfe 100644 --- a/src/path/Path.Constructors.js +++ b/src/path/Path.Constructors.js @@ -22,17 +22,36 @@ Path.inject({ statics: new function() { function createRectangle(/* rect */) { var rect = Rectangle.readNamed(arguments, 'rectangle'), - left = rect.getLeft(), - top = rect.getTop(), - right = rect.getRight(), - bottom = rect.getBottom(), + radius = Size.readNamed(arguments, 'radius', 0, 0, false, true), // readNull + bl = rect.getBottomLeft(true), + tl = rect.getTopLeft(true), + tr = rect.getTopRight(true), + br = rect.getBottomRight(true), path = createPath(arguments); - path._add([ - new Segment(Point.create(left, bottom)), - new Segment(Point.create(left, top)), - new Segment(Point.create(right, top)), - new Segment(Point.create(right, bottom)) - ]); + if (!radius || radius.isZero()) { + path._add([ + new Segment(bl), + new Segment(tl), + new Segment(tr), + new Segment(br) + ]); + } else { + radius = Size.min(radius, rect.getSize(true).divide(2)); + var h = radius.multiply(kappa * 2); // handle vector + path._add([ + new Segment(bl.add(radius.width, 0), null, [-h.width, 0]), + new Segment(bl.subtract(0, radius.height), [0, h.height], null), + + new Segment(tl.add(0, radius.height), null, [0, -h.height]), + new Segment(tl.add(radius.width, 0), [-h.width, 0], null), + + new Segment(tr.subtract(radius.width, 0), null, [h.width, 0]), + new Segment(tr.add(0, radius.height), [0, -h.height], null), + + new Segment(br.subtract(0, radius.height), null, [0, h.height]), + new Segment(br.subtract(radius.width, 0), [h.width, 0], null) + ]); + } path._closed = true; return path; } @@ -145,6 +164,7 @@ Path.inject({ statics: new function() { * Creates a rectangle shaped Path Item from the passed abstract * {@link Rectangle}. * + * @name Path.Rectangle * @param {Rectangle} rectangle * @return {Path} the newly created path * @@ -167,11 +187,10 @@ Path.inject({ statics: new function() { * strokeColor: 'black' * }); */ - Rectangle: createRectangle, - /** * Creates a rectangular Path Item with rounded corners. * + * @name Path.Rectangle * @param {Rectangle} rectangle * @param {Size} radius the size of the rounded corners * @return {Path} the newly created path @@ -182,11 +201,11 @@ Path.inject({ statics: new function() { * size: new Size(60, 60) * }); * var cornerSize = new Size(10, 10); - * var path = new Path.RoundRectangle(rectangle, cornerSize); + * var path = new Path.Rectangle(rectangle, cornerSize); * path.strokeColor = 'black'; * * @example {@paperscript} - * var path = new Path.RoundRectangle({ + * var path = new Path.Rectangle({ * rectangle: { * point: [20, 20], * size: [60, 60] @@ -195,37 +214,15 @@ Path.inject({ statics: new function() { * strokeColor: 'black' * }); */ - RoundRectangle: function(/* rect, radius */) { - var rect = Rectangle.readNamed(arguments, 'rectangle'), - radius = Size.readNamed(arguments, 'radius'); - if (radius.isZero()) - return createRectangle(rect); - radius = Size.min(radius, rect.getSize(true).divide(2)); - var bl = rect.getBottomLeft(true), - tl = rect.getTopLeft(true), - tr = rect.getTopRight(true), - br = rect.getBottomRight(true), - h = radius.multiply(kappa * 2), // handle vector - path = createPath(arguments); - path._add([ - new Segment(bl.add(radius.width, 0), null, [-h.width, 0]), - new Segment(bl.subtract(0, radius.height), [0, h.height], null), - - new Segment(tl.add(0, radius.height), null, [0, -h.height]), - new Segment(tl.add(radius.width, 0), [-h.width, 0], null), - - new Segment(tr.subtract(radius.width, 0), null, [h.width, 0]), - new Segment(tr.add(0, radius.height), [0, -h.height], null), - - new Segment(br.subtract(0, radius.height), null, [0, h.height]), - new Segment(br.subtract(radius.width, 0), [h.width, 0], null) - ]); - path._closed = true; - return path; - }, + Rectangle: createRectangle, /** - * Creates an ellipse shaped Path Item. + * @deprecated use {@link #Path.Rectangle(rectangle, size)} instead. + */ + RoundRectangle: createRectangle, + + /** + * Creates an ellipse shaped Path Item. * * @param {Rectangle} rectangle * @param {Boolean} [circumscribed=false] when set to {@code true} the @@ -252,7 +249,7 @@ Path.inject({ statics: new function() { Ellipse: createEllipse, /** - * @deprecated use {@link #Path.Ellipse(rect)} instead. + * @deprecated use {@link #Path.Ellipse(rectangle)} instead. */ Oval: createEllipse, diff --git a/src/svg/SvgImport.js b/src/svg/SvgImport.js index b8338e87..b32a897a 100644 --- a/src/svg/SvgImport.js +++ b/src/svg/SvgImport.js @@ -238,9 +238,7 @@ new function() { var point = getPoint(node, 'x', 'y'), size = getSize(node, 'width', 'height'), radius = getSize(node, 'rx', 'ry'); - // If radius is 0, Path.RoundRectangle automatically produces a - // normal rectangle for us. - return new Path.RoundRectangle(new Rectangle(point, size), radius); + return new Path.Rectangle(new Rectangle(point, size), radius); }, // http://www.w3.org/TR/SVG/shapes.html#LineElement diff --git a/test/tests/JSON.js b/test/tests/JSON.js index 85f8d6d0..525ea917 100644 --- a/test/tests/JSON.js +++ b/test/tests/JSON.js @@ -111,7 +111,7 @@ test('Rectangle testing', function() { var size4 = new Size(100, 100); var rectangle4 = new Rectangle(point4, size4); var cornerSize4 = new Size(30, 30); - var path4 = new Path.RoundRectangle(rectangle4, cornerSize4); + var path4 = new Path.Rectangle(rectangle4, cornerSize4); path4.strokeColor= 'yellow'; path4.fillColor='purple'; testExportImportJson(paper.project); diff --git a/test/tests/Path_Shapes.js b/test/tests/Path_Shapes.js index f0fa4cc6..9b91f24a 100644 --- a/test/tests/Path_Shapes.js +++ b/test/tests/Path_Shapes.js @@ -41,27 +41,27 @@ test('new Path.Ellipse(rect)', function() { equals(path.segments.toString(), '{ point: { x: 500, y: 875 }, handleIn: { x: 0, y: 207.10678 }, handleOut: { x: 0, y: -207.10678 } },{ point: { x: 1000, y: 500 }, handleIn: { x: -276.14237, y: 0 }, handleOut: { x: 276.14237, y: 0 } },{ point: { x: 1500, y: 875 }, handleIn: { x: 0, y: -207.10678 }, handleOut: { x: 0, y: 207.10678 } },{ point: { x: 1000, y: 1250 }, handleIn: { x: 276.14237, y: 0 }, handleOut: { x: -276.14237, y: 0 } }'); }); -test('new Path.RoundRectangle(rectangle, radius)', function() { +test('new Path.Rectangle(rectangle, radius)', function() { var rectangle = new Rectangle([50, 50], [200, 100]) - var path = new Path.RoundRectangle(rectangle, 20); + var path = new Path.Rectangle(rectangle, 20); equals(path.segments.toString(), '{ point: { x: 70, y: 150 }, handleOut: { x: -11.04569, y: 0 } },{ point: { x: 50, y: 130 }, handleIn: { x: 0, y: 11.04569 } },{ point: { x: 50, y: 70 }, handleOut: { x: 0, y: -11.04569 } },{ point: { x: 70, y: 50 }, handleIn: { x: -11.04569, y: 0 } },{ point: { x: 230, y: 50 }, handleOut: { x: 11.04569, y: 0 } },{ point: { x: 250, y: 70 }, handleIn: { x: 0, y: -11.04569 } },{ point: { x: 250, y: 130 }, handleOut: { x: 0, y: 11.04569 } },{ point: { x: 230, y: 150 }, handleIn: { x: 11.04569, y: 0 } }'); }); -test('new Path.RoundRectangle({ rectangle: rectangle, radius: radius })', function() { +test('new Path.Rectangle({ rectangle: rectangle, radius: radius })', function() { var rect = new Rectangle({ point: [50, 50], size: [200, 100] }); - var path = new Path.RoundRectangle({ + var path = new Path.Rectangle({ rectangle: rect, radius: 20 }); equals(path.segments.toString(), '{ point: { x: 70, y: 150 }, handleOut: { x: -11.04569, y: 0 } },{ point: { x: 50, y: 130 }, handleIn: { x: 0, y: 11.04569 } },{ point: { x: 50, y: 70 }, handleOut: { x: 0, y: -11.04569 } },{ point: { x: 70, y: 50 }, handleIn: { x: -11.04569, y: 0 } },{ point: { x: 230, y: 50 }, handleOut: { x: 11.04569, y: 0 } },{ point: { x: 250, y: 70 }, handleIn: { x: 0, y: -11.04569 } },{ point: { x: 250, y: 130 }, handleOut: { x: 0, y: 11.04569 } },{ point: { x: 230, y: 150 }, handleIn: { x: 11.04569, y: 0 } }'); }); -test('new Path.RoundRectangle(rect, size) - too large size', function() { +test('new Path.Rectangle(rect, size) - too large size', function() { var rect = new Rectangle([50, 50], [200, 100]) - var path = new Path.RoundRectangle(rect, 200); + var path = new Path.Rectangle(rect, 200); equals(path.segments.toString(), '{ point: { x: 150, y: 150 }, handleOut: { x: -55.22847, y: 0 } },{ point: { x: 50, y: 100 }, handleIn: { x: 0, y: 27.61424 } },{ point: { x: 50, y: 100 }, handleOut: { x: 0, y: -27.61424 } },{ point: { x: 150, y: 50 }, handleIn: { x: -55.22847, y: 0 } },{ point: { x: 150, y: 50 }, handleOut: { x: 55.22847, y: 0 } },{ point: { x: 250, y: 100 }, handleIn: { x: 0, y: -27.61424 } },{ point: { x: 250, y: 100 }, handleOut: { x: 0, y: 27.61424 } },{ point: { x: 150, y: 150 }, handleIn: { x: 55.22847, y: 0 } }'); }); diff --git a/test/tests/SvgExport.js b/test/tests/SvgExport.js index 8bb664f9..271f1570 100644 --- a/test/tests/SvgExport.js +++ b/test/tests/SvgExport.js @@ -234,7 +234,7 @@ test('compare rounded rectangle values', function() { var size = new Size(width, height); var cornerSize = new Size(rx, ry); var rect = new Rectangle(topLeft, size); - var roundRect = new Path.RoundRectangle(rect, cornerSize); + var roundRect = new Path.Rectangle(rect, cornerSize); var exportedRectangle = rect.exportSvg(); @@ -278,7 +278,7 @@ test('compare negative rounded rectangle values', function() { var size = new Size(width, height); var cornerSize = new Size(rx, ry); var rect = new Rectangle(topLeft, size); - var roundRect = new Path.RoundRectangle(rect, cornerSize); + var roundRect = new Path.Rectangle(rect, cornerSize); var exportedRectangle = rect.exportSvg(); @@ -322,7 +322,7 @@ test('compare invalid rounded rectangle values', function() { var size = new Size(width, height); var cornerSize = new Size(rx, ry); var rect = new Rectangle(topLeft, size); - var roundRect = new Path.RoundRectangle(rect, cornerSize); + var roundRect = new Path.Rectangle(rect, cornerSize); var exportedRectangle = rect.exportSvg(); diff --git a/test/tests/SvgImport.js b/test/tests/SvgImport.js index 768e40a7..989cab83 100644 --- a/test/tests/SvgImport.js +++ b/test/tests/SvgImport.js @@ -138,7 +138,7 @@ test('compare round rectangle values', function() { var size = new Size(width, height); var cornerSize = new Size(rx, ry); var rectangle = new Rectangle(topLeft, size); - var roundRect = new Path.RoundRectangle(rectangle, cornerSize); + var roundRect = new Path.Rectangle(rectangle, cornerSize); compareSegmentLists(importedRectangle.segments, roundRect.segments, true); }); @@ -165,7 +165,7 @@ test('compare negative round rectangle values', function() { var size = new Size(width, height); var cornerSize = new Size(rx, ry); var rectangle = new Rectangle(topLeft, size); - var roundRect = new Path.RoundRectangle(rectangle, cornerSize); + var roundRect = new Path.Rectangle(rectangle, cornerSize); compareSegmentLists(importedRectangle.segments, roundRect.segments, true); }); @@ -192,7 +192,7 @@ test('compare invalid round rectangle values', function() { var size = new Size(width, height); var cornerSize = new Size(rx, ry); var rectangle = new Rectangle(topLeft, size); - var roundRect = new Path.RoundRectangle(rectangle, cornerSize); + var roundRect = new Path.Rectangle(rectangle, cornerSize); compareSegmentLists(importedRectangle.segments, roundRect.segments, true); });