scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rename Path.Oval() to Path.Ellipse(), and deprecate Path.Oval().

Browse source
This commit is contained in:
Jürg Lehni 2012-11-06 11:37:00 -08:00
parent e26197cf1f
commit 28642bd1c8
12 changed files with 87 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/Animated/Tadpoles.html
View file

@ -15,7 +15,7 @@
strokeCap: 'round'
};
var head = new Path.Oval([0, 0], [13, 8]);
var head = new Path.Ellipse([0, 0], [13, 8]);
head.fillColor = 'white';
head.strokeColor = null;
var headSymbol = new Symbol(head);

2
examples/Node.js/Tadpoles.pjs
View file

@ -11,7 +11,7 @@ project.currentStyle = {
new Path.Rectangle(view.bounds).fillColor = 'black';
var head = new Path.Oval([0, 0], [13, 8]);
var head = new Path.Ellipse([0, 0], [13, 8]);
head.fillColor = 'white';
head.strokeColor = null;
var headSymbol = new Symbol(head);

4
examples/SVG Export/Circle Testing.html
View file

@ -13,13 +13,13 @@
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(50, 50), 25);

14
examples/SVG Import/Circle and Oval Testing.html → examples/SVG Import/Circle and Ellipse Testing.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circle and Oval Testing</title>
<title>Circle and Ellipse Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -19,12 +19,12 @@
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="oval1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="oval2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="oval3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="oval4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="oval5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="oval6"/>
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="ellipse1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="ellipse2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="ellipse3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="ellipse4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="ellipse5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="ellipse6"/>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

2
examples/SVG Import/Multiple Paths Test 1.html
View file

@ -25,7 +25,7 @@
</g>
<g>
<rect x="250" y="180" width="150px" height="150px" fill="blue" style="stroke-dasharray: 10px, 4px; stroke-width:0px;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="oval" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="ellipse" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />

2
examples/SVG Import/Testing.html
View file

@ -23,7 +23,7 @@
</g>
<g>
<rect x="250" y="180" width="150" height="150" fill="blue" style="stroke-dasharray: 10, 4; stroke-width:0;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="oval" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="ellipse" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />

2
examples/SVG Import/Transform Testing.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circle and Oval Testing</title>
<title>Circle and Ellipse Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">

94
src/path/Path.Constructors.js
View file

@ -15,16 +15,53 @@
*/
Path.inject({ statics: new function() {
function createRectangle(rect) {
rect = Rectangle.read(arguments);
var left = rect.x,
top = rect.y,
right = left + rect.width,
bottom = top + rect.height,
path = new Path();
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))
]);
path._closed = true;
return path;
}
// Kappa, see: http://www.whizkidtech.redprince.net/bezier/circle/kappa/
var kappa = 2 * (Math.sqrt(2) - 1) / 3;
var ovalSegments = [
var ellipseSegments = [
new Segment([0, 0.5], [0, kappa ], [0, -kappa]),
new Segment([0.5, 0], [-kappa, 0], [kappa, 0 ]),
new Segment([1, 0.5], [0, -kappa], [0, kappa ]),
new Segment([0.5, 1], [kappa, 0 ], [-kappa, 0])
];
function createEllipse(rect) {
rect = Rectangle.read(arguments);
var path = new Path(),
point = rect.getPoint(true),
size = rect.getSize(true),
segments = new Array(4);
for (var i = 0; i < 4; i++) {
var segment = ellipseSegments[i];
segments[i] = new Segment(
segment._point.multiply(size).add(point),
segment._handleIn.multiply(size),
segment._handleOut.multiply(size)
);
}
path._add(segments);
path._closed = true;
return path;
}
return /** @lends Path */{
/**
* {@grouptitle Shaped Paths}
@ -93,22 +130,7 @@ Path.inject({ statics: new function() {
* var path = new Path.Rectangle(rectangle);
* path.strokeColor = 'black';
*/
Rectangle: function(rect) {
rect = Rectangle.read(arguments);
var left = rect.x,
top = rect.y,
right = left + rect.width,
bottom = top + rect.height,
path = new Path();
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))
]);
path._closed = true;
return path;
},
Rectangle: createRectangle,
/**
* Creates a rectangular Path Item with rounded corners.
@ -128,8 +150,7 @@ Path.inject({ statics: new function() {
var _rect = Rectangle.read(arguments),
_size = Size.read(arguments);
if (_size.isZero())
// No need for new, since constructors here do so themselves.
return Path.Rectangle(rect);
return createRectangle(rect);
_size = Size.min(_size, _rect.getSize(true).divide(2));
var bl = _rect.getBottomLeft(true),
tl = _rect.getTopLeft(true),
@ -155,12 +176,12 @@ Path.inject({ statics: new function() {
},
/**
* Creates an oval shaped Path Item.
* Creates an ellipse shaped Path Item.
*
* @param {Rectangle} rect
* @param {Boolean} [circumscribed=false] when set to {@code true} the
* oval shaped path will be created so the rectangle fits into
* it. When set to {@code false} the oval path will fit within
* ellipse shaped path will be created so the rectangle fits into
* it. When set to {@code false} the ellipse path will fit within
* the rectangle.
* @return {Path} the newly created path
*
@ -168,28 +189,15 @@ Path.inject({ statics: new function() {
* var topLeft = new Point(100, 100);
* var size = new Size(150, 100);
* var rectangle = new Rectangle(topLeft, size);
* var path = new Path.Oval(rectangle);
* var path = new Path.Ellipse(rectangle);
* path.fillColor = 'black';
*/
// TODO: Shall this be called Path.Ellipse instead?
Oval: function(rect) {
rect = Rectangle.read(arguments);
var path = new Path(),
point = rect.getPoint(true),
size = rect.getSize(true),
segments = new Array(4);
for (var i = 0; i < 4; i++) {
var segment = ovalSegments[i];
segments[i] = new Segment(
segment._point.multiply(size).add(point),
segment._handleIn.multiply(size),
segment._handleOut.multiply(size)
);
}
path._add(segments);
path._closed = true;
return path;
},
Ellipse: createEllipse,
/**
* @deprecated use {@link #Path.Ellipse(rect)} instead.
*/
Oval: createEllipse,
/**
* Creates a circle shaped Path Item.
@ -204,7 +212,7 @@ Path.inject({ statics: new function() {
Circle: function(center, radius) {
var _center = Point.read(arguments),
_radius = Base.readValue(arguments);
return Path.Oval(new Rectangle(_center.subtract(_radius),
return createEllipse(new Rectangle(_center.subtract(_radius),
Size.create(_radius * 2, _radius * 2)));
},

2
src/svg/SvgImporter.js
View file

@ -224,7 +224,7 @@ var SvgImporter = this.SvgImporter = new function() {
ellipse: function(svg) {
var center = getPoint(svg, 'cx', 'cy'),
radius = getSize(svg, 'rx', 'ry');
return new Path.Oval(new Rectangle(center.subtract(radius),
return new Path.Ellipse(new Rectangle(center.subtract(radius),
center.add(radius)));
},

4
test/tests/Path_Shapes.js
View file

@ -26,9 +26,9 @@ test('new Path.Circle([100, 100], 50)', function() {
equals(path.segments.toString(), '{ point: { x: 50, y: 100 }, handleIn: { x: 0, y: 27.61424 }, handleOut: { x: 0, y: -27.61424 } },{ point: { x: 100, y: 50 }, handleIn: { x: -27.61424, y: 0 }, handleOut: { x: 27.61424, y: 0 } },{ point: { x: 150, y: 100 }, handleIn: { x: 0, y: -27.61424 }, handleOut: { x: 0, y: 27.61424 } },{ point: { x: 100, y: 150 }, handleIn: { x: 27.61424, y: 0 }, handleOut: { x: -27.61424, y: 0 } }');
});
test('new Path.Oval(rect)', function() {
test('new Path.Ellipse(rect)', function() {
var rect = new Rectangle([500, 500], [1000, 750])
var path = new Path.Oval(rect);
var path = new Path.Ellipse(rect);
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 } }');
});

14
test/tests/SvgExporter.js
View file

@ -352,7 +352,7 @@ test('compare invalid rounded rectangle values', function() {
equals(shapeheight, exportedheight);
});*/
test('compare oval values', function() {
test('compare ellipse values', function() {
var svgns = 'http://www.w3.org/2000/svg'
var shape = document.createElementNS(svgns, 'ellipse');
var cx = 100,
@ -370,19 +370,19 @@ test('compare oval values', function() {
var bottomRight = center.add(offset);
var rect = new Rectangle(topLeft, bottomRight);
var oval = new Path.Oval(rect);
var ellipse = new Path.Ellipse(rect);
var exportedOval = SvgExporter.exportItem(oval);
var exportedEllipse = SvgExporter.exportItem(ellipse);
var shapecx = shape.getAttribute('cx');
var shapecy = shape.getAttribute('cy');
var shaperx = shape.getAttribute('rx');
var shapery = shape.getAttribute('ry');
var exportedcx = exportedOval.getAttribute('cx');
var exportedcy = exportedOval.getAttribute('cy');
var exportedrx = exportedOval.getAttribute('rx');
var exportedry = exportedOval.getAttribute('ry');
var exportedcx = exportedEllipse.getAttribute('cx');
var exportedcy = exportedEllipse.getAttribute('cy');
var exportedrx = exportedEllipse.getAttribute('rx');
var exportedry = exportedEllipse.getAttribute('ry');
equals(shapecx, exportedcx);
equals(shapecy, exportedcy);

24
test/tests/SvgImporter.js
View file

@ -197,7 +197,7 @@ test('compare invalid round rectangle values', function() {
compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
});
test('compare oval values', function() {
test('compare ellipse values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'ellipse');
var cx = 300,
@ -209,7 +209,7 @@ test('compare oval values', function() {
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var importedOval = SvgImporter.importSvg(shape);
var importedEllipse = SvgImporter.importSvg(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -217,12 +217,12 @@ test('compare oval values', function() {
var bottomRight = center.add(offset);
var rect = new Rectangle(topLeft, bottomRight);
var oval = new Path.Oval(rect);
var ellipse = new Path.Ellipse(rect);
compareSegmentLists(importedOval.segments, oval.segments, true);
compareSegmentLists(importedEllipse.segments, ellipse.segments, true);
});
test('compare negative oval values', function() {
test('compare negative ellipse values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'ellipse');
var cx = -111,
@ -234,7 +234,7 @@ test('compare negative oval values', function() {
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var importedOval = SvgImporter.importSvg(shape);
var importedEllipse = SvgImporter.importSvg(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -242,12 +242,12 @@ test('compare negative oval values', function() {
var bottomRight = center.add(offset);
var rect = new Rectangle(topLeft, bottomRight);
var oval = new Path.Oval(rect);
var ellipse = new Path.Ellipse(rect);
compareSegmentLists(importedOval.segments, oval.segments, true);
compareSegmentLists(importedEllipse.segments, ellipse.segments, true);
});
test('compare invalid oval values', function() {
test('compare invalid ellipse values', function() {
var svgns = 'http://www.w3.org/2000/svg';
var shape = document.createElementNS(svgns, 'ellipse');
shape.setAttribute('cx', null);
@ -255,7 +255,7 @@ test('compare invalid oval values', function() {
shape.setAttribute('rx', null);
shape.setAttribute('ry', null);
var importedOval = SvgImporter.importSvg(shape);
var importedEllipse = SvgImporter.importSvg(shape);
var center = new Point(0, 0);
var offset = new Point(0, 0);
@ -263,9 +263,9 @@ test('compare invalid oval values', function() {
var bottomRight = center.add(offset);
var rect = new Rectangle(topLeft, bottomRight);
var oval = new Path.Oval(rect);
var ellipse = new Path.Ellipse(rect);
compareSegmentLists(importedOval.segments, oval.segments, true);
compareSegmentLists(importedEllipse.segments, ellipse.segments, true);
});
test('compare circle values', function() {