2011-03-06 19:50:44 -05:00
|
|
|
/*
|
2013-01-28 21:03:27 -05:00
|
|
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
2011-03-07 20:41:50 -05:00
|
|
|
* http://paperjs.org/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-01-28 21:03:27 -05:00
|
|
|
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
|
2011-03-06 19:50:44 -05:00
|
|
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-07-01 06:17:45 -04:00
|
|
|
* Distributed under the MIT license. See LICENSE file for details.
|
|
|
|
*
|
2011-03-07 20:41:50 -05:00
|
|
|
* All rights reserved.
|
2011-03-06 19:50:44 -05:00
|
|
|
*/
|
|
|
|
|
2011-02-17 15:04:02 -05:00
|
|
|
Path.inject({ statics: new function() {
|
2012-11-06 14:37:00 -05:00
|
|
|
|
2012-12-30 12:24:33 -05:00
|
|
|
function readRectangle(list) {
|
|
|
|
var rect;
|
|
|
|
if (Base.hasNamed(list, 'from')) {
|
|
|
|
rect = new Rectangle(Point.readNamed(list, 'from'),
|
|
|
|
Point.readNamed(list, 'to'));
|
2013-03-01 16:52:11 -05:00
|
|
|
} else if (Base.hasNamed(list)) {
|
|
|
|
rect = Base.each(Base.getNamed(list), function(value, key) {
|
|
|
|
if (key in this)
|
|
|
|
this[key] = Base.readNamed(list, key);
|
|
|
|
}, new Rectangle());
|
2012-12-30 12:24:33 -05:00
|
|
|
} else {
|
2013-03-01 16:52:11 -05:00
|
|
|
rect = Rectangle.read(list);
|
2012-12-30 12:24:33 -05:00
|
|
|
}
|
|
|
|
return rect;
|
|
|
|
}
|
|
|
|
|
2012-12-30 12:33:46 -05:00
|
|
|
function createRectangle(/* rect */) {
|
2012-12-30 12:24:33 -05:00
|
|
|
var rect = readRectangle(arguments),
|
|
|
|
left = rect.getLeft(),
|
|
|
|
top = rect.getTop(),
|
|
|
|
right = rect.getRight(),
|
|
|
|
bottom = rect.getBottom(),
|
|
|
|
path = new Path(arguments._filtered);
|
2012-11-06 14:37:00 -05:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2012-11-06 04:22:16 -05:00
|
|
|
// Kappa, see: http://www.whizkidtech.redprince.net/bezier/circle/kappa/
|
|
|
|
var kappa = 2 * (Math.sqrt(2) - 1) / 3;
|
2011-02-17 09:55:26 -05:00
|
|
|
|
2012-11-06 14:37:00 -05:00
|
|
|
var ellipseSegments = [
|
2011-02-17 09:55:26 -05:00
|
|
|
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])
|
|
|
|
];
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2012-12-30 12:33:46 -05:00
|
|
|
function createEllipse(/* rect */) {
|
2012-12-30 12:24:33 -05:00
|
|
|
var rect = readRectangle(arguments),
|
|
|
|
path = new Path(arguments._filtered),
|
2012-11-06 14:37:00 -05:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2011-06-22 18:58:50 -04:00
|
|
|
return /** @lends Path */{
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
2011-05-30 11:13:19 -04:00
|
|
|
* {@grouptitle Shaped Paths}
|
2011-06-27 06:31:39 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* Creates a Path Item with two anchor points forming a line.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2012-12-30 12:24:33 -05:00
|
|
|
* @param {Point} from the first anchor point of the path
|
|
|
|
* @param {Point} to the second anchor point of the path
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var from = new Point(20, 20);
|
|
|
|
* var to = new Point(100, 100);
|
|
|
|
* var path = new Path.Line(from, to);
|
|
|
|
* path.strokeColor = 'black';
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
2012-12-30 12:33:46 -05:00
|
|
|
Line: function(/* from, to */) {
|
2011-03-13 13:31:00 -04:00
|
|
|
return new Path(
|
2012-12-30 12:24:33 -05:00
|
|
|
Point.readNamed(arguments, 'from'),
|
|
|
|
Point.readNamed(arguments, 'to')
|
|
|
|
).set(arguments._filtered);
|
2011-02-17 09:55:26 -05:00
|
|
|
},
|
|
|
|
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
|
|
|
* Creates a rectangle shaped Path Item from the passed point and size.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-27 20:17:35 -04:00
|
|
|
* @name Path.Rectangle
|
2011-05-23 08:33:22 -04:00
|
|
|
* @param {Point} point
|
|
|
|
* @param {Size} size
|
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var point = new Point(100, 100);
|
|
|
|
* var size = new Size(100, 100);
|
|
|
|
* var rectangle = new Rectangle(point, size);
|
|
|
|
* var path = new Path.Rectangle(rectangle);
|
|
|
|
* path.strokeColor = 'black';
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
|
|
|
/**
|
|
|
|
* Creates a rectangle shaped Path Item from the passed points. These do not
|
|
|
|
* necessarily need to be the top left and bottom right corners, the
|
|
|
|
* constructor figures out how to fit a rectangle between them.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-27 20:17:35 -04:00
|
|
|
* @name Path.Rectangle
|
2012-12-30 12:24:33 -05:00
|
|
|
* @param {Point} from The first point defining the rectangle
|
|
|
|
* @param {Point} to The second point defining the rectangle
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var point = new Point(100, 100);
|
|
|
|
* var point2 = new Point(200, 300);
|
|
|
|
* var path = new Path.Rectangle(point, point2);
|
|
|
|
* path.strokeColor = 'black';
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
|
|
|
/**
|
|
|
|
* Creates a rectangle shaped Path Item from the passed abstract
|
|
|
|
* {@link Rectangle}.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2012-12-30 12:24:33 -05:00
|
|
|
* @param {Rectangle} rectangle
|
2011-05-30 11:13:19 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* @example
|
2011-05-30 11:13:19 -04:00
|
|
|
* var point = new Point(100, 100);
|
|
|
|
* var size = new Size(100, 100);
|
|
|
|
* var rectangle = new Rectangle(point, size);
|
2011-05-23 08:33:22 -04:00
|
|
|
* var path = new Path.Rectangle(rectangle);
|
|
|
|
* path.strokeColor = 'black';
|
|
|
|
*/
|
2012-11-06 14:37:00 -05:00
|
|
|
Rectangle: createRectangle,
|
2011-02-17 09:55:26 -05:00
|
|
|
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
2012-11-02 20:04:21 -04:00
|
|
|
* Creates a rectangular Path Item with rounded corners.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2012-12-30 12:24:33 -05:00
|
|
|
* @param {Rectangle} rectangle
|
|
|
|
* @param {Size} radius the size of the rounded corners
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var point = new Point(100, 100);
|
|
|
|
* var size = new Size(100, 100);
|
|
|
|
* var rectangle = new Rectangle(point, size);
|
|
|
|
* var cornerSize = new Size(30, 30);
|
|
|
|
* var path = new Path.RoundRectangle(rectangle, cornerSize);
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
2012-12-30 12:33:46 -05:00
|
|
|
RoundRectangle: function(/* rect, radius */) {
|
|
|
|
var rect = readRectangle(arguments),
|
|
|
|
radius = Size.readNamed(arguments, 'radius');
|
|
|
|
if (radius.isZero())
|
2012-11-06 14:37:00 -05:00
|
|
|
return createRectangle(rect);
|
2012-12-30 12:33:46 -05:00
|
|
|
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
|
2012-12-30 12:29:01 -05:00
|
|
|
path = new Path(arguments._filtered);
|
2011-05-04 13:42:40 -04:00
|
|
|
path._add([
|
2012-12-30 12:33:46 -05:00
|
|
|
new Segment(bl.add(radius.width, 0), null, [-h.width, 0]),
|
|
|
|
new Segment(bl.subtract(0, radius.height), [0, h.height], null),
|
2011-02-17 09:55:26 -05:00
|
|
|
|
2012-12-30 12:33:46 -05:00
|
|
|
new Segment(tl.add(0, radius.height), null, [0, -h.height]),
|
|
|
|
new Segment(tl.add(radius.width, 0), [-h.width, 0], null),
|
2011-02-17 09:55:26 -05:00
|
|
|
|
2012-12-30 12:33:46 -05:00
|
|
|
new Segment(tr.subtract(radius.width, 0), null, [h.width, 0]),
|
|
|
|
new Segment(tr.add(0, radius.height), [0, -h.height], null),
|
2011-02-17 09:55:26 -05:00
|
|
|
|
2012-12-30 12:33:46 -05:00
|
|
|
new Segment(br.subtract(0, radius.height), null, [0, h.height]),
|
|
|
|
new Segment(br.subtract(radius.width, 0), [h.width, 0], null)
|
2011-05-04 13:42:40 -04:00
|
|
|
]);
|
|
|
|
path._closed = true;
|
2011-02-17 09:55:26 -05:00
|
|
|
return path;
|
|
|
|
},
|
|
|
|
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
2012-11-06 14:37:00 -05:00
|
|
|
* Creates an ellipse shaped Path Item.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2012-12-30 12:24:33 -05:00
|
|
|
* @param {Rectangle} rectangle
|
2011-05-31 08:28:42 -04:00
|
|
|
* @param {Boolean} [circumscribed=false] when set to {@code true} the
|
2012-11-06 14:37:00 -05:00
|
|
|
* ellipse shaped path will be created so the rectangle fits into
|
|
|
|
* it. When set to {@code false} the ellipse path will fit within
|
2011-05-31 08:28:42 -04:00
|
|
|
* the rectangle.
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var topLeft = new Point(100, 100);
|
|
|
|
* var size = new Size(150, 100);
|
|
|
|
* var rectangle = new Rectangle(topLeft, size);
|
2012-11-06 14:37:00 -05:00
|
|
|
* var path = new Path.Ellipse(rectangle);
|
2011-05-30 11:13:19 -04:00
|
|
|
* path.fillColor = 'black';
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
2012-11-06 14:37:00 -05:00
|
|
|
Ellipse: createEllipse,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @deprecated use {@link #Path.Ellipse(rect)} instead.
|
|
|
|
*/
|
|
|
|
Oval: createEllipse,
|
2011-02-17 09:55:26 -05:00
|
|
|
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
|
|
|
* Creates a circle shaped Path Item.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* @param {Point} center the center point of the circle
|
2011-05-27 15:21:49 -04:00
|
|
|
* @param {Number} radius the radius of the circle
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var path = new Path.Circle(new Point(100, 100), 50);
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
2012-12-30 12:33:46 -05:00
|
|
|
Circle: function(/* center, radius */) {
|
|
|
|
var center = Point.readNamed(arguments, 'center'),
|
|
|
|
radius = Base.readNamed(arguments, 'radius');
|
|
|
|
return createEllipse(new Rectangle(center.subtract(radius),
|
|
|
|
Size.create(radius * 2, radius * 2)))
|
2012-12-30 12:24:33 -05:00
|
|
|
.set(arguments._filtered);
|
2011-02-17 09:55:26 -05:00
|
|
|
},
|
|
|
|
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
|
|
|
* Creates a circular arc shaped Path Item.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* @param {Point} from the starting point of the circular arc
|
|
|
|
* @param {Point} through the point the arc passes through
|
|
|
|
* @param {Point} to the end point of the arc
|
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var start = new Point(0, 0);
|
|
|
|
* var through = new Point(100, 100);
|
|
|
|
* var to = new Point(200, 150);
|
|
|
|
* var path = new Path.Arc(start, through, to);
|
|
|
|
* path.strokeColor = 'black';
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
2012-12-30 12:33:46 -05:00
|
|
|
Arc: function(/* from, through, to */) {
|
|
|
|
var from = Point.readNamed(arguments, 'from'),
|
|
|
|
through = Point.readNamed(arguments, 'through'),
|
|
|
|
to = Point.readNamed(arguments, 'to'),
|
2012-12-30 12:24:33 -05:00
|
|
|
path = new Path(arguments._filtered);
|
2012-12-30 12:33:46 -05:00
|
|
|
path.moveTo(from);
|
|
|
|
path.arcTo(through, to);
|
2011-02-17 09:55:26 -05:00
|
|
|
return path;
|
2011-02-26 13:19:02 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-05-23 08:33:22 -04:00
|
|
|
/**
|
|
|
|
* Creates a regular polygon shaped Path Item.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* @param {Point} center the center point of the polygon
|
2011-05-27 15:21:49 -04:00
|
|
|
* @param {Number} numSides the number of sides of the polygon
|
|
|
|
* @param {Number} radius the radius of the polygon
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* // Create a triangle shaped path
|
|
|
|
* var center = new Point(100, 100);
|
|
|
|
* var sides = 3;
|
|
|
|
* var radius = 50;
|
|
|
|
* var triangle = new Path.RegularPolygon(center, sides, radius);
|
|
|
|
* triangle.fillColor = 'black';
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* // Create a decahedron shaped path
|
|
|
|
* var center = new Point(100, 100);
|
|
|
|
* var sides = 10;
|
|
|
|
* var radius = 50;
|
|
|
|
* var decahedron = new Path.RegularPolygon(center, sides, radius);
|
|
|
|
* decahedron.fillColor = 'black';
|
2011-05-23 08:33:22 -04:00
|
|
|
*/
|
2012-12-30 12:33:46 -05:00
|
|
|
RegularPolygon: function(/* center, numSides, radius */) {
|
|
|
|
var center = Point.readNamed(arguments, 'center'),
|
|
|
|
numSides = Base.readNamed(arguments, 'numSides'),
|
|
|
|
radius = Base.readNamed(arguments, 'radius'),
|
2012-12-30 12:24:33 -05:00
|
|
|
path = new Path(arguments._filtered),
|
2012-12-30 12:33:46 -05:00
|
|
|
step = 360 / numSides,
|
|
|
|
three = !(numSides % 3),
|
|
|
|
vector = new Point(0, three ? -radius : radius),
|
2011-05-04 13:42:40 -04:00
|
|
|
offset = three ? -1 : 0.5,
|
2012-12-30 12:33:46 -05:00
|
|
|
segments = new Array(numSides);
|
|
|
|
for (var i = 0; i < numSides; i++) {
|
|
|
|
segments[i] = new Segment(center.add(
|
2011-05-04 13:42:40 -04:00
|
|
|
vector.rotate((i + offset) * step)));
|
2011-02-26 13:19:02 -05:00
|
|
|
}
|
2011-05-04 13:42:40 -04:00
|
|
|
path._add(segments);
|
|
|
|
path._closed = true;
|
2011-02-26 13:19:02 -05:00
|
|
|
return path;
|
2011-04-12 08:18:00 -04:00
|
|
|
},
|
2011-05-23 08:33:22 -04:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Creates a star shaped Path Item.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* The largest of {@code radius1} and {@code radius2} will be the outer
|
|
|
|
* radius of the star. The smallest of radius1 and radius2 will be the
|
|
|
|
* inner radius.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 08:33:22 -04:00
|
|
|
* @param {Point} center the center point of the star
|
2011-05-27 15:21:49 -04:00
|
|
|
* @param {Number} numPoints the number of points of the star
|
|
|
|
* @param {Number} radius1
|
|
|
|
* @param {Number} radius2
|
2011-05-23 08:33:22 -04:00
|
|
|
* @return {Path} the newly created path
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-30 11:13:19 -04:00
|
|
|
* @example
|
|
|
|
* var center = new Point(100, 100);
|
|
|
|
* var points = 6;
|
|
|
|
* var radius1 = 20;
|
|
|
|
* var radius2 = 50;
|
|
|
|
* var path = new Path.Star(center, points, radius1, radius2);
|
|
|
|
* path.fillColor = 'black';
|
2011-06-30 06:01:51 -04:00
|
|
|
*/
|
2012-12-30 12:33:46 -05:00
|
|
|
Star: function(/* center, numPoints, radius1, radius2 */) {
|
|
|
|
var center = Point.readNamed(arguments, 'center'),
|
|
|
|
numPoints = Base.readNamed(arguments, 'numPoints') * 2,
|
|
|
|
radius1 = Base.readNamed(arguments, 'radius1'),
|
|
|
|
radius2 = Base.readNamed(arguments, 'radius2'),
|
2012-12-30 12:24:33 -05:00
|
|
|
path = new Path(arguments._filtered),
|
2012-12-30 12:33:46 -05:00
|
|
|
step = 360 / numPoints,
|
2011-05-04 13:42:40 -04:00
|
|
|
vector = new Point(0, -1),
|
2012-12-30 12:33:46 -05:00
|
|
|
segments = new Array(numPoints);
|
|
|
|
for (var i = 0; i < numPoints; i++) {
|
|
|
|
segments[i] = new Segment(center.add(
|
|
|
|
vector.rotate(step * i).multiply(i % 2 ? radius2 : radius1)));
|
2011-04-12 08:18:00 -04:00
|
|
|
}
|
2011-05-04 13:42:40 -04:00
|
|
|
path._add(segments);
|
|
|
|
path._closed = true;
|
2011-04-12 08:18:00 -04:00
|
|
|
return path;
|
2011-02-17 09:55:26 -05:00
|
|
|
}
|
|
|
|
};
|
2011-02-17 15:04:02 -05:00
|
|
|
}});
|