scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #8 from rdworth/whitespace_trailing

Browse source 
Whitespace. Removed all trailing whitespace from .js files
This commit is contained in:
Jürg Lehni 2011-07-01 01:52:55 -07:00
commit 1e97f94ac0
50 changed files with 1277 additions and 1277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/basic/Line.js
View file

@ -1,29 +1,29 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Line
*
*
* @class The Line object represents..
*/
var Line = this.Line = Base.extend(/** @lends Line# */{
// DOCS: document Line class and constructor
/**
* Creates a Line object.
*
*
* @param {Point} point1
* @param {Point} point2
* @param {Boolean} [infinite=true]
@ -49,21 +49,21 @@ var Line = this.Line = Base.extend(/** @lends Line# */{
/**
* The starting point of the line
*
*
* @name Line#point
* @type Point
*/
/**
* The vector of the line
*
*
* @name Line#vector
* @type Point
*/
/**
* Specifies whether the line extends infinitely
*
*
* @name Line#infinite
* @type Boolean
*/

70
src/basic/Matrix.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -21,11 +21,11 @@
/**
* @name Matrix
*
*
* @class An affine transform performs a linear mapping from 2D coordinates
* to other 2D coordinates that preserves the "straightness" and
* "parallelness" of lines.
*
*
* Such a coordinate transformation can be represented by a 3 row by 3
* column matrix with an implied last row of [ 0 0 1 ]. This matrix
* transforms source coordinates (x,y) into destination coordinates (x',y')
@ -36,7 +36,7 @@
* [ y'] = [ m10 m11 m12 ] [ y ] = [ m10x + m11y + m12 ]
* [ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ]
* </pre>
*
*
* This class is optimized for speed and minimizes calculations based on its
* knowledge of the underlying matrix (as opposed to say simply performing
* matrix multiplication).
@ -44,7 +44,7 @@
var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Creates a 2D affine transform.
*
*
* @param {Number} m00 The m00 coordinate of the transform.
* @param {Number} m10 The m10 coordinate of the transform.
* @param {Number} m01 The m01 coordinate of the transform.
@ -64,7 +64,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
this.set.apply(this, m00);
} else {
ok = false;
}
}
} else if (arguments.length > 0) {
ok = false;
} else {
@ -85,7 +85,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Sets this transform to the matrix specified by the 6 values.
*
*
* @param {Number} m00 The m00 coordinate of the transform.
* @param {Number} m10 The m10 coordinate of the transform.
* @param {Number} m01 The m01 coordinate of the transform.
@ -106,7 +106,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Concatentates this transform with a scaling transformation.
*
*
* @name Matrix#scale
* @function
* @param {Number} scale The scaling factor.
@ -116,7 +116,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
*/
/**
* Concatentates this transform with a scaling transformation.
*
*
* @name Matrix#scale
* @function
* @param {Number} sx The x-axis scaling factor.
@ -148,7 +148,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Concatentates this transform with a translate transformation.
*
*
* @name Matrix#translate
* @function
* @param {Point} point The vector to translate by.
@ -156,7 +156,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
*/
/**
* Concatentates this transform with a translate transformation.
*
*
* @name Matrix#translate
* @function
* @param {Number} dx The distance to translate in the x direction.
@ -174,7 +174,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Concatentates this transform with a rotation transformation around an
* anchor point.
*
*
* @name Matrix#rotate
* @function
* @param {Number} angle The angle of rotation measured in degrees.
@ -184,7 +184,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Concatentates this transform with a rotation transformation around an
* anchor point.
*
*
* @name Matrix#rotate
* @function
* @param {Number} angle The angle of rotation measured in degrees.
@ -199,7 +199,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Concatentates this transform with a shear transformation.
*
*
* @name Matrix#shear
* @function
* @param {Point} point The shear factor in x and y direction.
@ -208,7 +208,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
*/
/**
* Concatentates this transform with a shear transformation.
*
*
* @name Matrix#shear
* @function
* @param {Number} shx The x shear factor.
@ -247,7 +247,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
+ [format(this._m10), format(this._m11),
format(this._m12)].join(', ') + ']]';
},
/**
* @return {Number} The scaling factor in the x-direction (m00).
*/
@ -280,7 +280,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Concatenates an affine transform to this transform.
*
*
* @param {Matrix} mx The transform to concatenate.
* @return {Matrix} This affine transform.
*/
@ -301,7 +301,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Pre-concatenates an affine transform to this transform.
*
*
* @param {Matrix} mx The transform to preconcatenate.
* @return {Matrix} This affine transform.
*/
@ -327,9 +327,9 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
* Transforms a point or an array of coordinates by this matrix and returns
* the result. If an array is transformed, the the result is stored into a
* destination array.
*
*
* @param {Point} point The point to be transformed.
*
*
* @param {Number[]} src The array containing the source points
* as x, y value pairs.
* @param {Number} srcOff The offset to the first point to be transformed.
@ -347,7 +347,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
},
/**
* A faster version of transform that only takes one point and does not
* A faster version of transform that only takes one point and does not
* attempt to convert it.
*/
_transformPoint: function(point, dest, dontNotify) {
@ -445,7 +445,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Returns whether the transform is invertible. A transform is not
* invertible if the determinant is 0 or any value is non-finite or NaN.
*
*
* @return {Boolean} Whether the transform is invertible.
*/
isInvertible: function() {
@ -457,7 +457,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Checks whether the matrix is singular or not. Singular matrices cannot be
* inverted.
*
*
* @return {Boolean} Whether the matrix is singular.
*/
isSingular: function() {
@ -489,7 +489,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Sets this transform to a scaling transformation.
*
*
* @param {Number} sx The x-axis scaling factor.
* @param {Number} sy The y-axis scaling factor.
* @return {Matrix} This affine transform.
@ -500,7 +500,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Sets this transform to a translation transformation.
*
*
* @param {Number} dx The distance to translate in the x direction.
* @param {Number} dy The distance to translate in the y direction.
* @return {Matrix} This affine transform.
@ -512,7 +512,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Sets this transform to a shearing transformation.
*
*
* @param {Number} shx The x-axis shear factor.
* @param {Number} shy The y-axis shear factor.
* @return {Matrix} This affine transform.
@ -523,7 +523,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Sets this transform to a rotation transformation.
*
*
* @param {Number} angle The angle of rotation measured in degrees.
* @param {Number} x The x coordinate of the anchor point.
* @param {Number} y The y coordinate of the anchor point.
@ -543,7 +543,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Applies this matrix to the specified Canvas Context.
*
*
* @param {CanvasRenderingContext2D} ctx
* @param {Boolean} [reset=false]
*/
@ -563,7 +563,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Creates a transform representing a scaling transformation.
*
*
* @param {Number} sx The x-axis scaling factor.
* @param {Number} sy The y-axis scaling factor.
* @return {Matrix} A transform representing a scaling
@ -576,7 +576,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Creates a transform representing a translation transformation.
*
*
* @param {Number} dx The distance to translate in the x direction.
* @param {Number} dy The distance to translate in the y direction.
* @return {Matrix} A transform representing a translation
@ -589,7 +589,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Creates a transform representing a shearing transformation.
*
*
* @param {Number} shx The x-axis shear factor.
* @param {Number} shy The y-axis shear factor.
* @return {Matrix} A transform representing a shearing transformation.
@ -601,7 +601,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/**
* Creates a transform representing a rotation transformation.
*
*
* @param {Number} angle The angle of rotation measured in degrees.
* @param {Number} x The x coordinate of the anchor point.
* @param {Number} y The y coordinate of the anchor point.

208
src/basic/Point.js
View file

@ -1,26 +1,26 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Point
*
*
* @class The Point object represents a point in the two dimensional space
* of the Paper.js project. It is also used to represent two dimensional
* vector objects.
*
*
* @classexample
* // Create a point at x: 10, y: 5
* var point = new Point(10, 5);
@ -30,11 +30,11 @@
var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Creates a Point object with the given x and y coordinates.
*
*
* @name Point#initialize
* @param {Number} x the x coordinate
* @param {Number} y the y coordinate
*
*
* @example
* // Create a point at x: 10, y: 5
* var point = new Point(10, 5);
@ -44,64 +44,64 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Creates a Point object using the numbers in the given array as
* coordinates.
*
*
* @name Point#initialize
* @param {array} array
*
*
* @example
* // Creating a point at x: 10, y: 5 using an array of numbers:
* var array = [10, 5];
* var point = new Point(array);
* console.log(point.x); // 10
* console.log(point.y); // 5
*
*
* @example
* // Passing an array to a functionality that expects a point:
*
*
* // Create a circle shaped path at x: 50, y: 50
* // with a radius of 30:
* var path = new Path.Circle([50, 50], 30);
* path.fillColor = 'red';
*
*
* // Which is the same as doing:
* var path = new Path.Circle(new Point(50, 50), 30);
* path.fillColor = 'red';
*/
/**
* Creates a Point object using the properties in the given object.
*
*
* @name Point#initialize
* @param {object} object
*
*
* @example
* // Creating a point using an object literal with length and angle
* // properties:
*
*
* var point = new Point({
* length: 10,
* angle: 90
* });
* console.log(point.length); // 10
* console.log(point.angle); // 90
*
*
* @example
* // Creating a point at x: 10, y: 20 using an object literal:
*
*
* var point = new Point({
* x: 10,
* y: 20
* });
* console.log(point.x); // 10
* console.log(point.y); // 20
*
*
* @example
* // Passing an object to a functionality that expects a point:
*
*
* var center = {
* x: 50,
* y: 50
* };
*
*
* // Creates a circle shaped path at x: 50, y: 50
* // with a radius of 30:
* var path = new Path.Circle(center, 30);
@ -110,13 +110,13 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Creates a Point object using the width and height values of the given
* Size object.
*
*
* @name Point#initialize
* @param {Size} size
*
*
* @example
* // Creating a point using a size object.
*
*
* // Create a Size with a width of 100pt and a height of 50pt
* var size = new Size(100, 50);
* console.log(size); // { width: 100, height: 50 }
@ -125,7 +125,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
*/
/**
* Creates a Point object using the coordinates of the given Point object.
*
*
* @param {Point} point
* @name Point#initialize
*/
@ -161,14 +161,14 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* The x coordinate of the point
*
*
* @name Point#x
* @type Number
*/
/**
* The y coordinate of the point
*
*
* @name Point#y
* @type Number
*/
@ -181,15 +181,15 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns a copy of the point.
*
*
* @example
* var point1 = new Point();
* var point2 = point1;
* point2.x = 1; // also changes point1.x
*
*
* var point2 = point1.clone();
* point2.x = 1; // doesn't change point1.x
*
*
* @returns {Point} the cloned point
*/
clone: function() {
@ -208,12 +208,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the addition of the supplied value to both coordinates of
* the point as a new point.
* The object itself is not modified!
*
*
* @name Point#add
* @function
* @param {Number} number the number to add
* @return {Point} the addition of the point and the value as a new point
*
*
* @example
* var point = new Point(5, 10);
* var result = point + 20;
@ -223,12 +223,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the addition of the supplied point to the point as a new
* point.
* The object itself is not modified!
*
*
* @name Point#add
* @function
* @param {Point} point the point to add
* @return {Point} the addition of the two points as a new point
*
*
* @example
* var point1 = new Point(5, 10);
* var point2 = new Point(10, 20);
@ -244,12 +244,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the subtraction of the supplied value to both coordinates of
* the point as a new point.
* The object itself is not modified!
*
*
* @name Point#subtract
* @function
* @param {Number} number the number to subtract
* @return {Point} the subtraction of the point and the value as a new point
*
*
* @example
* var point = new Point(10, 20);
* var result = point - 5;
@ -259,12 +259,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the subtraction of the supplied point to the point as a new
* point.
* The object itself is not modified!
*
*
* @name Point#subtract
* @function
* @param {Point} point the point to subtract
* @return {Point} the subtraction of the two points as a new point
*
*
* @example
* var firstPoint = new Point(10, 20);
* var secondPoint = new Point(5, 5);
@ -280,12 +280,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the multiplication of the supplied value to both coordinates of
* the point as a new point.
* The object itself is not modified!
*
*
* @name Point#multiply
* @function
* @param {Number} number the number to multiply by
* @return {Point} the multiplication of the point and the value as a new point
*
*
* @example
* var point = new Point(10, 20);
* var result = point * 2;
@ -295,12 +295,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the multiplication of the supplied point to the point as a new
* point.
* The object itself is not modified!
*
*
* @name Point#multiply
* @function
* @param {Point} point the point to multiply by
* @return {Point} the multiplication of the two points as a new point
*
*
* @example
* var firstPoint = new Point(5, 10);
* var secondPoint = new Point(4, 2);
@ -316,12 +316,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the division of the supplied value to both coordinates of
* the point as a new point.
* The object itself is not modified!
*
*
* @name Point#divide
* @function
* @param {Number} number the number to divide by
* @return {Point} the division of the point and the value as a new point
*
*
* @example
* var point = new Point(10, 20);
* var result = point / 2;
@ -331,12 +331,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns the division of the supplied point to the point as a new
* point.
* The object itself is not modified!
*
*
* @name Point#divide
* @function
* @param {Point} point the point to divide by
* @return {Point} the division of the two points as a new point
*
*
* @example
* var firstPoint = new Point(8, 10);
* var secondPoint = new Point(2, 5);
@ -351,13 +351,13 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* The modulo operator returns the integer remainders of dividing the point
* by the supplied value as a new point.
*
*
* @name Point#modulo
* @function
* @param {Number} value
* @return {Point} the integer remainders of dividing the point by the value
* as a new point
*
*
* @example
* var point = new Point(12, 6);
* console.log(point % 5); // {x: 2, y: 1}
@ -365,13 +365,13 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* The modulo operator returns the integer remainders of dividing the point
* by the supplied value as a new point.
*
*
* @name Point#modulo
* @function
* @param {Point} point
* @return {Point} the integer remainders of dividing the points by each
* other as a new point
*
*
* @example
* var point = new Point(12, 6);
* console.log(point % new Point(5, 2)); // {x: 2, y: 0}
@ -388,7 +388,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Transforms the point by the matrix as a new point. The object itself
* is not modified!
*
*
* @param {Matrix} matrix
* @return {Point} the transformed point
*/
@ -398,9 +398,9 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* {@grouptitle Distance & Length}
*
*
* Returns the distance between the point and another point.
*
*
* @param {Point} point
* @return {Number}
*/
@ -416,7 +416,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Each point can be interpreted as a vector that points from the origin
* ({@code x = 0}, {@code y = 0}) to the point's location.
* Setting the length changes the location but keeps the vector's angle.
*
*
* @type Number
* @bean
*/
@ -452,7 +452,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* changing its angle and returns it as a new point. The optional
* {@code length} parameter defines the length to normalize to.
* The object itself is not modified!
*
*
* @param {Number} [length=1] the length of the normalized vector
* @return {Point} the normalized vector of the vector that is represented
* by this point's coordinates.
@ -472,7 +472,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* {@grouptitle Angle & Rotation}
* Returns the smaller angle between two vectors. The angle is unsigned, no
* information about rotational direction is given.
*
*
* @name Point#getAngle
* @function
* @param {Point} point
@ -480,10 +480,10 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
*/
/**
* The vector's angle in degrees, measured from the x-axis to the vector.
*
*
* The angle is unsigned, no information about rotational direction is
* given.
*
*
* @name Point#getAngle
* @bean
* @type Number
@ -510,7 +510,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns the smaller angle between two vectors in radians. The angle is
* unsigned, no information about rotational direction is given.
*
*
* @name Point#getAngleInRadians
* @function
* @param {Point} point
@ -518,10 +518,10 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
*/
/**
* The vector's angle in radians, measured from the x-axis to the vector.
*
*
* The angle is unsigned, no information about rotational direction is
* given.
*
*
* @name Point#getAngleInRadians
* @bean
* @type Number
@ -549,28 +549,28 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* The quadrant of the {@link #angle} of the point.
*
*
* Angles between 0 and 90 degrees are in quadrant {@code 1}. Angles between
* 90 and 180 degrees are in quadrant {@code 2}, angles between 180 and 270
* degrees are in quadrant {@code 3} and angles between 270 and 360 degrees
* are in quadrant {@code 4}.
*
*
* @type Number
* @bean
*
*
* @example
* var point = new Point({
* angle: 10,
* length: 20
* });
* console.log(point.quadrant); // 1
*
*
* point.angle = 100;
* console.log(point.quadrant); // 2
*
*
* point.angle = 190;
* console.log(point.quadrant); // 3
*
*
* point.angle = 280;
* console.log(point.quadrant); // 4
*/
@ -581,10 +581,10 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns the angle between two vectors. The angle is directional and
* signed, giving information about the rotational direction.
*
*
* Read more about angle units and orientation in the description of the
* {@link #angle} property.
*
*
* @param {Point} point
* @return {Number} the angle between the two vectors
*/
@ -596,10 +596,10 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Rotates the point by the given angle around an optional center point.
* The object itself is not modified.
*
*
* Read more about angle units and orientation in the description of the
* {@link #angle} property.
*
*
* @param {Number} angle the rotation angle
* @param {Point} center the center point of the rotation
* @returns {Point} the rotated point
@ -619,10 +619,10 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Checks whether the coordinates of the point are equal to that of the
* supplied point.
*
*
* @param {Point} point
* @return {Boolean} {@true if the points are equal}
*
*
* @example
* var point = new Point(5, 10);
* console.log(point == new Point(5, 10)); // true
@ -636,9 +636,9 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* {@grouptitle Tests}
*
*
* Checks whether the point is inside the boundaries of the rectangle.
*
*
* @param {Rectangle} rect the rectangle to check against
* @returns {Boolean} {@true if the point is inside the rectangle}
*/
@ -648,7 +648,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Checks if the point is within a given distance of another point.
*
*
* @param {Point} point the point to check against
* @param {Number} tolerance the maximum distance allowed
* @returns {Boolean} {@true if it is within the given distance}
@ -660,7 +660,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Checks if the vector represented by this point is colinear (parallel) to
* another vector.
*
*
* @param {Point} point the vector to check against
* @returns {Boolean} {@true it is parallel}
*/
@ -671,7 +671,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Checks if the vector represented by this point is orthogonal
* (perpendicular) to another vector.
*
*
* @param {Point} point the vector to check against
* @returns {Boolean} {@true it is orthogonal}
*/
@ -681,7 +681,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Checks if this point has both the x and y coordinate set to 0.
*
*
* @returns {Boolean} {@true both x and y are 0}
*/
isZero: function() {
@ -691,17 +691,17 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Checks if this point has an undefined value for at least one of its
* coordinates.
*
*
* @returns {Boolean} {@true if either x or y are not a number}
*/
isNaN: function() {
return isNaN(this.x) || isNaN(this.y);
},
/**
* {@grouptitle Vector Math Functions}
* Returns the dot product of the point and another point.
*
*
* @param {Point} point
* @returns {Number} the dot product of the two points
*/
@ -712,7 +712,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns the cross product of the point and another point.
*
*
* @param {Point} point
* @returns {Number} the cross product of the two points
*/
@ -724,7 +724,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns the projection of the point on another point.
* Both points are interpreted as vectors.
*
*
* @param {Point} point
* @returns {Point} the projection of the point on another point
*/
@ -745,7 +745,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* This property is only present if the point is an anchor or control point
* of a {@link Segment} or a {@link Curve}. In this case, it returns
* {@true it is selected}
*
*
* @name Point#selected
* @property
* @return {Boolean} {@true the point is selected}
@ -756,7 +756,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Provide a faster creator for Points out of two coordinates that
* does not rely on Point#initialize at all. This speeds up all math
* operations a lot.
*
*
* @ignore
*/
create: function(x, y) {
@ -773,12 +773,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns a new point object with the smallest {@link #x} and
* {@link #y} of the supplied points.
*
*
* @static
* @param {Point} point1
* @param {Point} point2
* @returns {Point} The newly created point object
*
*
* @example
* var point1 = new Point(10, 100);
* var point2 = new Point(200, 5);
@ -797,12 +797,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns a new point object with the largest {@link #x} and
* {@link #y} of the supplied points.
*
*
* @static
* @param {Point} point1
* @param {Point} point2
* @returns {Point} The newly created point object
*
*
* @example
* var point1 = new Point(10, 100);
* var point2 = new Point(200, 5);
@ -821,14 +821,14 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns a point object with random {@link #x} and {@link #y} values
* between {@code 0} and {@code 1}.
*
*
* @returns {Point} The newly created point object
* @static
*
*
* @example
* var maxPoint = new Point(100, 100);
* var randomPoint = Point.random();
*
*
* // A point between {x:0, y:0} and {x:100, y:100}:
* var point = maxPoint * randomPoint;
*/
@ -839,14 +839,14 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
}, new function() { // Scope for injecting round, ceil, floor, abs:
/**
* {@grouptitle Math Functions}
*
*
* Returns a new point with rounded {@link #x} and {@link #y} values. The
* object itself is not modified!
*
*
* @name Point#round
* @function
* @return {Point}
*
*
* @example
* var point = new Point(10.2, 10.9);
* var roundPoint = point.round();
@ -857,11 +857,11 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns a new point with the nearest greater non-fractional values to the
* specified {@link #x} and {@link #y} values. The object itself is not
* modified!
*
*
* @name Point#ceil
* @function
* @return {Point}
*
*
* @example
* var point = new Point(10.2, 10.9);
* var ceilPoint = point.ceil();
@ -872,11 +872,11 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* Returns a new point with the nearest smaller non-fractional values to the
* specified {@link #x} and {@link #y} values. The object itself is not
* modified!
*
*
* @name Point#floor
* @function
* @return {Point}
*
*
* @example
* var point = new Point(10.2, 10.9);
* var floorPoint = point.floor();
@ -886,11 +886,11 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* Returns a new point with the absolute values of the specified {@link #x}
* and {@link #y} values. The object itself is not modified!
*
*
* @name Point#abs
* @function
* @return {Point}
*
*
* @example
* var point = new Point(-5, 10);
* var absPoint = point.abs();
@ -907,12 +907,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/**
* @name LinkedPoint
*
*
* @class An internal version of Point that notifies its owner of each change
* through setting itself again on the setter that corresponds to the getter
* that produced this LinkedPoint. See uses of LinkedPoint.create()
* Note: This prototype is not exported.
*
*
* @ignore
*/
var LinkedPoint = Point.extend({

136
src/basic/Rectangle.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Rectangle
*
*
* @class A Rectangle specifies an area that is enclosed by it's top-left
* point (x, y), its width, and its height. It should not be confused with a
* rectangular path, it is not an item.
@ -24,14 +24,14 @@
var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* Creates a Rectangle object.
*
*
* @name Rectangle#initialize
* @param {Point} point the top-left point of the rectangle
* @param {Size} size the size of the rectangle
*/
/**
* Creates a rectangle object.
*
*
* @name Rectangle#initialize
* @param {Number} x the left coordinate
* @param {Number} y the top coordinate
@ -42,14 +42,14 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
* Creates a rectangle object 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.
*
*
* @name Rectangle#initialize
* @param {Point} point1 The first point defining the rectangle
* @param {Point} point2 The second point defining the rectangle
*/
/**
* Creates a new rectangle object from the passed rectangle object.
*
*
* @name Rectangle#initialize
* @param {Rectangle} rt
*/
@ -100,28 +100,28 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The x position of the rectangle.
*
*
* @name Rectangle#x
* @type Number
*/
/**
* The y position of the rectangle.
*
*
* @name Rectangle#y
* @type Number
*/
/**
* The width of the rectangle.
*
*
* @name Rectangle#width
* @type Number
*/
/**
* The height of the rectangle.
*
*
* @name Rectangle#height
* @type Number
*/
@ -140,7 +140,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The top-left point of the rectangle
*
*
* @type Point
* @bean
*/
@ -157,7 +157,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The size of the rectangle
*
*
* @type Size
* @bean
*/
@ -174,10 +174,10 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* {@grouptitle Side Positions}
*
*
* The position of the left hand side of the rectangle. Note that this
* doesn't move the whole rectangle; the right hand side stays where it was.
*
*
* @type Number
* @bean
*/
@ -194,7 +194,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The top coordinate of the rectangle. Note that this doesn't move the
* whole rectangle: the bottom won't move.
*
*
* @type Number
* @bean
*/
@ -211,7 +211,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The position of the right hand side of the rectangle. Note that this
* doesn't move the whole rectangle; the left hand side stays where it was.
*
*
* @type Number
* @bean
*/
@ -227,7 +227,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The bottom coordinate of the rectangle. Note that this doesn't move the
* whole rectangle: the top won't move.
*
*
* @type Number
* @bean
*/
@ -242,7 +242,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The center-x coordinate of the rectangle.
*
*
* @type Number
* @bean
* @ignore
@ -258,7 +258,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The center-y coordinate of the rectangle.
*
*
* @type Number
* @bean
* @ignore
@ -274,9 +274,9 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* {@grouptitle Corner and Center Point Positions}
*
*
* The center point of the rectangle.
*
*
* @type Point
* @bean
*/
@ -292,56 +292,56 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* The top-left point of the rectangle.
*
*
* @name Rectangle#topLeft
* @type Point
*/
/**
* The top-right point of the rectangle.
*
*
* @name Rectangle#topRight
* @type Point
*/
/**
* The bottom-left point of the rectangle.
*
*
* @name Rectangle#bottomLeft
* @type Point
*/
/**
* The bottom-right point of the rectangle.
*
*
* @name Rectangle#bottomRight
* @type Point
*/
/**
* The left-center point of the rectangle.
*
*
* @name Rectangle#leftCenter
* @type Point
*/
/**
* The top-center point of the rectangle.
*
*
* @name Rectangle#topCenter
* @type Point
*/
/**
* The right-center point of the rectangle.
*
*
* @name Rectangle#rightCenter
* @type Point
*/
/**
* The bottom-center point of the rectangle.
*
*
* @name Rectangle#bottomCenter
* @type Point
*/
@ -349,7 +349,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* Checks whether the coordinates and size of the rectangle are equal to
* that of the supplied rectangle.
*
*
* @param {Rectangle} rect
* @return {Boolean} {@true if the rectangles are equal}
*/
@ -380,23 +380,23 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* {@grouptitle Geometric Tests}
*
*
* Tests if the specified point is inside the boundary of the rectangle.
*
*
* @name Rectangle#contains
* @function
* @param {Point} point the specified point
* @return {Boolean} {@true if the point is inside the rectangle's boundary}
*
*
* @example {@paperscript}
* // Checking whether the mouse position falls within the bounding
* // rectangle of an item:
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30.
* var circle = new Path.Circle(new Point(80, 50), 30);
* circle.fillColor = 'red';
*
*
* function onMouseMove(event) {
* // Check whether the mouse position intersects with the
* // bounding box of the item:
@ -412,35 +412,35 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* Tests if the interior of the rectangle entirely contains the specified
* rectangle.
*
*
* @name Rectangle#contains
* @function
* @param {Rectangle} rect The specified rectangle
* @return {Boolean} {@true if the rectangle entirely contains the specified
* rectangle}
*
*
* @example {@paperscript}
* // Checking whether the bounding box of one item is contained within
* // that of another item:
*
*
* // All newly created paths will inherit these styles:
* project.currentStyle = {
* fillColor: 'green',
* strokeColor: 'black'
* };
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 45.
* var largeCircle = new Path.Circle(new Point(80, 50), 45);
*
*
* // Create a smaller circle shaped path in the same position
* // with a radius of 30.
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* function onMouseMove(event) {
* // Move the circle to the position of the mouse:
* circle.position = event.point;
*
*
* // Check whether the bounding box of the smaller circle
* // is contained within the bounding box of the larger item:
* if (largeCircle.bounds.contains(circle.bounds)) {
@ -470,33 +470,33 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* Tests if the interior of this rectangle intersects the interior of
* another rectangle.
*
*
* @param {Rectangle} rect the specified rectangle
* @return {Boolean} {@true if the rectangle and the specified rectangle
* intersect each other}
*
*
* @example {@paperscript}
* // Checking whether the bounding box of one item intersects with
* // that of another item:
*
*
* // All newly created paths will inherit these styles:
* project.currentStyle = {
* fillColor: 'green',
* strokeColor: 'black'
* };
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 45.
* var largeCircle = new Path.Circle(new Point(80, 50), 45);
*
*
* // Create a smaller circle shaped path in the same position
* // with a radius of 30.
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* function onMouseMove(event) {
* // Move the circle to the position of the mouse:
* circle.position = event.point;
*
*
* // Check whether the bounding box of the two circle
* // shaped paths intersect:
* if (largeCircle.bounds.intersects(circle.bounds)) {
@ -520,40 +520,40 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* {@grouptitle Boolean Operations}
*
*
* Returns a new rectangle representing the intersection of this rectangle
* with the specified rectangle.
*
*
* @param {Rectangle} rect The rectangle to be intersected with this
* rectangle
* @return {Rectangle} The largest rectangle contained in both the specified
* rectangle and in this rectangle.
*
*
* @example {@paperscript}
* // Intersecting two rectangles and visualizing the result using rectangle
* // shaped paths:
*
*
* // Create two rectangles that overlap each other
* var size = new Size(50, 50);
* var rectangle1 = new Rectangle(new Point(25, 15), size);
* var rectangle2 = new Rectangle(new Point(50, 40), size);
*
*
* // The rectangle that represents the intersection of the
* // two rectangles:
* var intersected = rectangle1.intersect(rectangle2);
*
*
* // To visualize the intersecting of the rectangles, we will
* // create rectangle shaped paths using the Path.Rectangle
* // constructor.
*
*
* // Have all newly created paths inherit a black stroke:
* project.currentStyle.strokeColor = 'black';
*
*
* // Create two rectangle shaped paths using the abstract rectangles
* // we created before:
* new Path.Rectangle(rectangle1);
* new Path.Rectangle(rectangle2);
*
*
* // Create a path that represents the intersected rectangle,
* // and fill it with red:
* var intersectionPath = new Path.Rectangle(intersected);
@ -571,7 +571,7 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* Returns a new rectangle representing the union of this rectangle with the
* specified rectangle.
*
*
* @param {Rectangle} rect the rectangle to be combined with this rectangle
* @return {Rectangle} the smallest rectangle containing both the specified
* rectangle and this rectangle.
@ -589,14 +589,14 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
* Adds a point to this rectangle. The resulting rectangle is the
* smallest rectangle that contains both the original rectangle and the
* specified point.
*
*
* After adding a point, a call to {@link #contains(point)} with the added
* point as an argument does not necessarily return {@code true}.
* The {@link Rectangle#contains(point)} method does not return {@code true}
* for points on the right or bottom edges of a rectangle. Therefore, if the
* added point falls on the left or bottom edge of the enlarged rectangle,
* {@link Rectangle#contains(point)} returns {@code false} for that point.
*
*
* @param {Point} point
*/
include: function(point) {
@ -651,13 +651,13 @@ var Rectangle = this.Rectangle = Base.extend(/** @lends Rectangle# */{
/**
* @name LinkedRectangle
*
*
* @class An internal version of Rectangle that notifies its owner of each
* change through setting itself again on the setter that corresponds to the
* getter that produced this LinkedRectangle.
* See uses of LinkedRectangle.create()
* Note: This prototype is not exported.
*
*
* @private
*/
var LinkedRectangle = Rectangle.extend({
@ -676,7 +676,7 @@ var LinkedRectangle = Rectangle.extend({
* Provide a faster creator for Points out of two coordinates that
* does not rely on Point#initialize at all. This speeds up all math
* operations a lot.
*
*
* @ignore
*/
create: function(owner, setter, x, y, width, height) {
@ -699,7 +699,7 @@ var LinkedRectangle = Rectangle.extend({
this['set' + part] = function(value) {
this[internal] = value;
// Check if this setter is called from another one which sets
// Check if this setter is called from another one which sets
// _dontNotify, as it will notify itself
if (!this._dontNotify)
this._owner[this._setter](this);

120
src/basic/Size.js
View file

@ -1,25 +1,25 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Size
*
*
* @class The Size object is used to describe the size of something, through
* its {@link #width} and {@link #height} properties.
*
*
* @classexample
* // Create a size that is 10pt wide and 5pt high
* var size = new Size(10, 5);
@ -30,24 +30,24 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
// DOCS: improve Size class description
/**
* Creates a Size object with the given width and height values.
*
*
* @name Size#initialize
* @param {Number} width the width
* @param {Number} height the height
*
*
* @example
* // Create a size that is 10pt wide and 5pt high
* var size = new Size(10, 5);
* console.log(size.width); // 10
* console.log(size.height); // 5
*
*
/**
* Creates a Size object using the numbers in the given array as
* dimensions.
*
*
* @name Size#initialize
* @param {array} array
*
*
* @example
* // Creating a size of width: 320, height: 240 using an array of numbers:
* var array = [320, 240];
@ -57,13 +57,13 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
*/
/**
* Creates a Size object using the properties in the given object.
*
*
* @name Size#initialize
* @param {object} object
*
*
* @example
* // Creating a size of width: 10, height: 20 using an object literal:
*
*
* var size = new Size({
* width: 10,
* height: 20
@ -73,17 +73,17 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
*/
/**
* Creates a Size object using the coordinates of the given Size object.
*
*
* @name Size#initialize
* @param {Size} size
*/
/**
* Creates a Size object using the {@link Point#x} and {@link Point#y}
* values of the given Point object.
*
*
* @name Size#initialize
* @param {Point} point
*
*
* @example
* var point = new Point(50, 50);
* var size = new Size(point);
@ -127,14 +127,14 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* The width of the size
*
*
* @name Size#width
* @type Number
*/
/**
* The height of the size
*
*
* @name Size#height
* @type Number
*/
@ -155,12 +155,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the addition of the supplied value to the width and height of the
* size as a new size. The object itself is not modified!
*
*
* @name Size#add
* @function
* @param {Number} number the number to add
* @return {Size} the addition of the size and the value as a new size
*
*
* @example
* var size = new Size(5, 10);
* var result = size + 20;
@ -169,12 +169,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the addition of the width and height of the supplied size to the
* size as a new size. The object itself is not modified!
*
*
* @name Size#add
* @function
* @param {Size} size the size to add
* @return {Size} the addition of the two sizes as a new size
*
*
* @example
* var size1 = new Size(5, 10);
* var size2 = new Size(10, 20);
@ -190,12 +190,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
* Returns the subtraction of the supplied value from the width and height
* of the size as a new size. The object itself is not modified!
* The object itself is not modified!
*
*
* @name Size#subtract
* @function
* @param {Number} number the number to subtract
* @return {Size} the subtraction of the size and the value as a new size
*
*
* @example
* var size = new Size(10, 20);
* var result = size - 5;
@ -204,12 +204,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the subtraction of the width and height of the supplied size from
* the size as a new size. The object itself is not modified!
*
*
* @name Size#subtract
* @function
* @param {Size} size the size to subtract
* @return {Size} the subtraction of the two sizes as a new size
*
*
* @example
* var firstSize = new Size(10, 20);
* var secondSize = new Size(5, 5);
@ -224,12 +224,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the multiplication of the supplied value with the width and
* height of the size as a new size. The object itself is not modified!
*
*
* @name Size#multiply
* @function
* @param {Number} number the number to multiply by
* @return {Size} the multiplication of the size and the value as a new size
*
*
* @example
* var size = new Size(10, 20);
* var result = size * 2;
@ -238,12 +238,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the multiplication of the width and height of the supplied size
* with the size as a new size. The object itself is not modified!
*
*
* @name Size#multiply
* @function
* @param {Size} size the size to multiply by
* @return {Size} the multiplication of the two sizes as a new size
*
*
* @example
* var firstSize = new Size(5, 10);
* var secondSize = new Size(4, 2);
@ -258,12 +258,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the division of the supplied value by the width and height of the
* size as a new size. The object itself is not modified!
*
*
* @name Size#divide
* @function
* @param {Number} number the number to divide by
* @return {Size} the division of the size and the value as a new size
*
*
* @example
* var size = new Size(10, 20);
* var result = size / 2;
@ -272,12 +272,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns the division of the width and height of the supplied size by the
* size as a new size. The object itself is not modified!
*
*
* @name Size#divide
* @function
* @param {Size} size the size to divide by
* @return {Size} the division of the two sizes as a new size
*
*
* @example
* var firstSize = new Size(8, 10);
* var secondSize = new Size(2, 5);
@ -292,13 +292,13 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* The modulo operator returns the integer remainders of dividing the size
* by the supplied value as a new size.
*
*
* @name Size#modulo
* @function
* @param {Number} value
* @return {Size} the integer remainders of dividing the size by the value
* as a new size
*
*
* @example
* var size = new Size(12, 6);
* console.log(size % 5); // {width: 2, height: 1}
@ -306,13 +306,13 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* The modulo operator returns the integer remainders of dividing the size
* by the supplied size as a new size.
*
*
* @name Size#modulo
* @function
* @param {Size} size
* @return {Size} the integer remainders of dividing the sizes by each
* other as a new size
*
*
* @example
* var size = new Size(12, 6);
* console.log(size % new Size(5, 2)); // {width: 2, height: 0}
@ -329,10 +329,10 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Checks whether the width and height of the size are equal to those of the
* supplied size.
*
*
* @param {Size}
* @return {Boolean}
*
*
* @example
* var size = new Size(5, 10);
* console.log(size == new Size(5, 10)); // true
@ -347,7 +347,7 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* {@grouptitle Tests}
* Checks if this size has both the width and height set to 0.
*
*
* @return {Boolean} {@true both width and height are 0}
*/
isZero: function() {
@ -356,7 +356,7 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Checks if the width or the height of the size are NaN.
*
*
* @return {Boolean} {@true if the width or height of the size are NaN}
*/
isNaN: function() {
@ -372,12 +372,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns a new size object with the smallest {@link #width} and
* {@link #height} of the supplied sizes.
*
*
* @static
* @param {Size} size1
* @param {Size} size2
* @returns {Size} The newly created size object
*
*
* @example
* var size1 = new Size(10, 100);
* var size2 = new Size(200, 5);
@ -393,12 +393,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns a new size object with the largest {@link #width} and
* {@link #height} of the supplied sizes.
*
*
* @static
* @param {Size} size1
* @param {Size} size2
* @returns {Size} The newly created size object
*
*
* @example
* var size1 = new Size(10, 100);
* var size2 = new Size(200, 5);
@ -414,10 +414,10 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns a size object with random {@link #width} and {@link #height}
* values between {@code 0} and {@code 1}.
*
*
* @returns {Size} The newly created size object
* @static
*
*
* @example
* var maxSize = new Size(100, 100);
* var randomSize = Size.random();
@ -431,14 +431,14 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* {@grouptitle Math Functions}
*
*
* Returns a new size with rounded {@link #width} and {@link #height} values.
* The object itself is not modified!
*
*
* @name Size#round
* @function
* @return {Size}
*
*
* @example
* var size = new Size(10.2, 10.9);
* var roundSize = size.round();
@ -449,11 +449,11 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
* Returns a new size with the nearest greater non-fractional values to the
* specified {@link #width} and {@link #height} values. The object itself is not
* modified!
*
*
* @name Size#ceil
* @function
* @return {Size}
*
*
* @example
* var size = new Size(10.2, 10.9);
* var ceilSize = size.ceil();
@ -464,11 +464,11 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
* Returns a new size with the nearest smaller non-fractional values to the
* specified {@link #width} and {@link #height} values. The object itself is not
* modified!
*
*
* @name Size#floor
* @function
* @return {Size}
*
*
* @example
* var size = new Size(10.2, 10.9);
* var floorSize = size.floor();
@ -478,11 +478,11 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* Returns a new size with the absolute values of the specified {@link #width}
* and {@link #height} values. The object itself is not modified!
*
*
* @name Size#abs
* @function
* @return {Size}
*
*
* @example
* var size = new Size(-5, 10);
* var absSize = size.abs();
@ -499,12 +499,12 @@ var Size = this.Size = Base.extend(/** @lends Size# */{
/**
* @name LinkedSize
*
*
* @class An internal version of Size that notifies its owner of each change
* through setting itself again on the setter that corresponds to the getter
* that produced this LinkedSize. See uses of LinkedSize.create()
* Note: This prototype is not exported.
*
*
* @private
*/
var LinkedSize = Size.extend({

8
src/browser/DomElement.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

8
src/browser/DomEvent.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

110
src/color/Color.js
View file

@ -1,53 +1,53 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
// DOCS: write Color class documentation.
/**
* @name Color
*
*
* @class All properties and functions that expect color values accept
* instances of the different color classes such as {@link RGBColor},
* {@link HSBColor} and {@link GrayColor}, and also accept named colors
* and hex values as strings which are then converted to instances of
* {@link RGBColor} internally.
*
*
* @classexample {@paperscript}
* // Named color values:
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30.
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // Pass a color name to the fillColor property, which is internally
* // converted to an RGBColor.
* circle.fillColor = 'green';
*
*
* @classexample {@paperscript}
* // Hex color values:
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30.
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // Pass a hex string to the fillColor property, which is internally
* // converted to an RGBColor.
* circle.fillColor = '#ff0000';
*/
var Color = this.Color = Base.extend(new function() {
var components = {
gray: ['gray'],
rgb: ['red', 'green', 'blue'],
@ -247,7 +247,7 @@ var Color = this.Color = Base.extend(new function() {
/**
* Override Color.extend() to produce getters and setters based
* on the component types defined in _components.
*
*
* @ignore
*/
extend: function(src) {
@ -342,7 +342,7 @@ var Color = this.Color = Base.extend(new function() {
/**
* Returns the type of the color as a string.
*
*
* @type String('rgb', 'hsb', 'gray')
* @bean
*
@ -365,21 +365,21 @@ var Color = this.Color = Base.extend(new function() {
/**
* The color's alpha value as a number between {@code 0} and {@code 1}. All
* colors of the different subclasses support alpha values.
*
*
* @type Number
* @bean
*
*
* @example {@paperscript}
* // A filled path with a half transparent stroke:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // Fill the circle with red and give it a 20pt green stroke:
* circle.style = {
* fillColor: 'red',
* strokeColor: 'green',
* strokeWidth: 20
* };
*
*
* // Make the stroke half transparent:
* circle.strokeColor.alpha = 0.5;
*/
@ -395,7 +395,7 @@ var Color = this.Color = Base.extend(new function() {
/**
* Checks if the color has an alpha value.
*
*
* @return {Boolean} {@true if the color has an alpha value}
*/
hasAlpha: function() {
@ -405,7 +405,7 @@ var Color = this.Color = Base.extend(new function() {
/**
* Checks if the component color values of the color are the
* same as those of the supplied one.
*
*
* @param {Color} color the color to compare with
* @return {Boolean} {@true if the colors are the same}
*/
@ -459,22 +459,22 @@ var Color = this.Color = Base.extend(new function() {
getCanvasStyle: function() {
return this.toCssString();
}
/**
* {@grouptitle RGB Components}
*
*
* The amount of red in the color as a value between {@code 0} and
* {@code 1}.
*
*
* @name Color#red
* @property
* @type Number
*
*
* @example {@paperscript}
* // Changing the amount of red in a color:
* var circle = new Path.Circle(new Point(80, 50), 30);
* circle.fillColor = 'blue';
*
*
* // Blue + red = purple:
* circle.fillColor.red = 1;
*/
@ -482,18 +482,18 @@ var Color = this.Color = Base.extend(new function() {
/**
* The amount of green in the color as a value between {@code 0} and
* {@code 1}.
*
*
* @name Color#green
* @property
* @type Number
*
*
* @example {@paperscript}
* // Changing the amount of green in a color:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // First we set the fill color to red:
* circle.fillColor = 'red';
*
*
* // Red + green = yellow:
* circle.fillColor.green = 1;
*/
@ -501,28 +501,28 @@ var Color = this.Color = Base.extend(new function() {
/**
* The amount of blue in the color as a value between {@code 0} and
* {@code 1}.
*
*
* @name Color#blue
* @property
* @type Number
*
*
* @example {@paperscript}
* // Changing the amount of blue in a color:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // First we set the fill color to red:
* circle.fillColor = 'red';
*
*
* // Red + blue = purple:
* circle.fillColor.blue = 1;
*/
/**
* {@grouptitle Gray Components}
*
*
* The amount of gray in the color as a value between {@code 0} and
* {@code 1}.
*
*
* @name Color#gray
* @property
* @type Number
@ -530,28 +530,28 @@ var Color = this.Color = Base.extend(new function() {
/**
* {@grouptitle HSB Components}
*
*
* The hue of the color as a value in degrees between {@code 0} and
* {@code 360}.
*
*
* @name Color#hue
* @property
* @type Number
*
*
* @example {@paperscript}
* // Changing the hue of a color:
* var circle = new Path.Circle(new Point(80, 50), 30);
* circle.fillColor = 'red';
* circle.fillColor.hue += 30;
*
*
* @example {@paperscript}
* // Hue cycling:
*
*
* // Create a rectangle shaped path, using the dimensions
* // of the view:
* var path = new Path.Rectangle(view.bounds);
* path.fillColor = 'red';
*
*
* function onFrame(event) {
* path.fillColor.hue += 0.5;
* }
@ -559,7 +559,7 @@ var Color = this.Color = Base.extend(new function() {
/**
* The saturation of the color as a value between {@code 0} and {@code 1}.
*
*
* @name Color#saturation
* @property
* @type Number
@ -567,7 +567,7 @@ var Color = this.Color = Base.extend(new function() {
/**
* The brightness of the color as a value between {@code 0} and {@code 1}.
*
*
* @name Color#brightness
* @property
* @type Number
@ -583,20 +583,20 @@ var Color = this.Color = Base.extend(new function() {
var GrayColor = this.GrayColor = Color.extend(/** @lends GrayColor# */{
/**
* Creates a GrayColor object
*
*
* @name GrayColor#initialize
* @param {Number} gray the amount of gray in the color as a value
* between {@code 0} and {@code 1}
* @param {Number} [alpha] the alpha of the color as a value between
* {@code 0} and {@code 1}
*
*
* @example {@paperscript}
* // Creating a GrayColor:
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // Create a GrayColor with 50% gray:
* circle.fillColor = new GrayColor(0.5);
*/
@ -612,7 +612,7 @@ var GrayColor = this.GrayColor = Color.extend(/** @lends GrayColor# */{
var RGBColor = this.RGBColor = Color.extend(/** @lends RGBColor# */{
/**
* Creates an RGBColor object
*
*
* @name RGBColor#initialize
* @param {Number} red the amount of red in the color as a value
* between {@code 0} and {@code 1}
@ -622,14 +622,14 @@ var RGBColor = this.RGBColor = Color.extend(/** @lends RGBColor# */{
* between {@code 0} and {@code 1}
* @param {Number} [alpha] the alpha of the color as a value between
* {@code 0} and {@code 1}
*
*
* @example {@paperscript}
* // Creating an RGBColor:
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // 100% red, 0% blue, 50% blue:
* circle.fillColor = new RGBColor(1, 0, 0.5);
*/
@ -645,7 +645,7 @@ var RGBColor = this.RGBColor = Color.extend(/** @lends RGBColor# */{
var HSBColor = this.HSBColor = Color.extend(/** @lends HSBColor# */{
/**
* Creates an HSBColor object
*
*
* @name HSBColor#initialize
* @param {Number} hue the hue of the color as a value in degrees between
* {@code 0} and {@code 360}.
@ -655,14 +655,14 @@ var HSBColor = this.HSBColor = Color.extend(/** @lends HSBColor# */{
* between {@code 0} and {@code 1}
* @param {Number} [alpha] the alpha of the color as a value between
* {@code 0} and {@code 1}
*
*
* @example {@paperscript}
* // Creating an HSBColor:
*
*
* // Create a circle shaped path at {x: 80, y: 50}
* // with a radius of 30:
* var circle = new Path.Circle(new Point(80, 50), 30);
*
*
* // Create an HSBColor with a hue of 90 degrees, a saturation
* // 100% and a brightness of 100%:
* circle.fillColor = new HSBColor(90, 1, 1);

16
src/color/Gradient.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Gradient
*
*
* @class The Gradient object.
*/
var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
@ -24,7 +24,7 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
// boolean value?
/**
* Creates a gradient object
*
*
* @param {GradientStop[]} stops
* @param {String} [type='linear'] 'linear' or 'radial'
*/
@ -45,7 +45,7 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
/**
* The gradient stops on the gradient ramp.
*
*
* @type GradientStop[]
* @bean
*/
@ -68,7 +68,7 @@ var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
/**
* Checks whether the gradient is equal to the supplied gradient.
*
*
* @param {Gradient} gradient
* @return {Boolean} {@true they are equal}
*/

76
src/color/GradientColor.js
View file

@ -1,84 +1,84 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name GradientColor
*
*
* @class The GradientColor object.
*/
var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor# */{
/**
* Creates a gradient color object.
*
*
* @param {Gradient} gradient
* @param {Point} origin
* @param {Point} destination
* @param {Point} [hilite]
*
*
* @example {@paperscript height=200}
* // Applying a linear gradient color containing evenly distributed
* // color stops:
*
*
* // Define two points which we will be using to construct
* // the path and to position the gradient color:
* var topLeft = view.center - [80, 80];
* var bottomRight = view.center + [80, 80];
*
*
* // Create a rectangle shaped path between
* // the topLeft and bottomRight points:
* var path = new Path.Rectangle(topLeft, bottomRight);
*
*
* // Create the gradient, passing it an array of colors to be converted
* // to evenly distributed color stops:
* var gradient = new Gradient(['yellow', 'red', 'blue']);
*
*
* // Have the gradient color run between the topLeft and
* // bottomRight points we defined earlier:
* var gradientColor = new GradientColor(gradient, topLeft, bottomRight);
*
*
* // Set the fill color of the path to the gradient color:
* path.fillColor = gradientColor;
*
*
* @example {@paperscript height=200}
* // Applying a radial gradient color containing unevenly distributed
* // color stops:
*
*
* // Create a circle shaped path at the center of the view
* // with a radius of 80:
* var path = new Path.Circle(view.center, 80);
*
*
* // The stops array: yellow mixes with red between 0 and 15%,
* // 15% to 30% is pure red, red mixes with black between 30% to 100%:
* var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
*
*
* // Create a radial gradient using the color stops array:
* var gradient = new Gradient(stops, 'radial');
*
*
* // We will use the center point of the circle shaped path as
* // the origin point for our gradient color
* var from = path.position;
*
*
* // The destination point of the gradient color will be the
* // center point of the path + 80pt in horizontal direction:
* var to = path.position + [80, 0];
*
* // Create the gradient color:
*
* // Create the gradient color:
* var gradientColor = new GradientColor(gradient, from, to);
*
*
* // Set the fill color of the path to the gradient color:
* path.fillColor = gradientColor;
*/
@ -100,32 +100,32 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
/**
* The origin point of the gradient.
*
*
* @type Point
* @bean
*
*
* @example {@paperscript height=200}
* // Move the origin point of the gradient, by moving your mouse over
* // the view below:
*
*
* // Create a rectangle shaped path with the same dimensions as
* // that of the view and fill it with a gradient color:
* var path = new Path.Rectangle(view.bounds);
* var gradient = new Gradient(['yellow', 'red', 'blue']);
*
*
* // Have the gradient color run from the top left point of the view,
* // to the bottom right point of the view:
* var from = view.bounds.topLeft;
* var to = view.bounds.bottomRight;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
*
* function onMouseMove(event) {
* // Set the origin point of the path's gradient color
* // to the position of the mouse:
* path.fillColor.origin = event.point;
* }
*
*
*/
getOrigin: function() {
return this._origin;
@ -143,25 +143,25 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
/**
* The destination point of the gradient.
*
*
* @type Point
* @bean
*
*
* @example {@paperscript height=300}
* // Move the destination point of the gradient, by moving your mouse over
* // the view below:
*
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
*
*
* var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
* var from = view.center;
* var to = view.bounds.bottomRight;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
*
* function onMouseMove(event) {
* // Set the origin point of the path's gradient color
* // to the position of the mouse:
@ -183,14 +183,14 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
/**
* The hilite point of the gradient.
*
*
* @type Point
* @bean
*
*
* @example {@paperscript height=300}
* // Move the hilite point of the gradient, by moving your mouse over
* // the view below:
*
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
@ -200,7 +200,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
* var to = path.bounds.rightCenter;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
*
* function onMouseMove(event) {
* // Set the origin hilite of the path's gradient color
* // to the position of the mouse:
@ -245,7 +245,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
/**
* Checks if the gradient color has the same properties as that of the
* supplied one.
*
*
* @param {GradientColor} color
* @return {@true the GradientColor is the same}
*/
@ -258,7 +258,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
/**
* Transform the gradient color by the specified matrix.
*
*
* @param {Matrix} matrix the matrix to transform the gradient color by
*/
transform: function(matrix) {

36
src/color/GradientStop.js
View file

@ -1,29 +1,29 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
// TODO: Support midPoint? (initial tests didn't look nice)
/**
* @name GradientStop
*
*
* @class The GradientStop object.
*/
var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
/**
* Creates a GradientStop object.
*
*
* @param {Color} [color=new RGBColor(0, 0, 0)] the color of the stop
* @param {Number} [rampPoint=0] the position of the stop on the gradient
* ramp {@default 0}
@ -54,18 +54,18 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
/**
* The ramp-point of the gradient stop as a value between {@code 0} and
* {@code 1}.
*
*
* @type Number
* @bean
*
*
* @example {@paperscript height=300}
* // Animating a gradient's ramp points:
*
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
*
*
* // Prepare the gradient color and apply it to the path:
* var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
* var gradient = new Gradient(colors, 'radial');
@ -73,13 +73,13 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
* var to = path.bounds.rightCenter;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
*
* // This function is called each frame of the animation:
* function onFrame(event) {
* var blackStop = gradient.stops[2];
* // Animate the rampPoint between 0.7 and 0.9:
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
*
*
* // Animate the rampPoint between 0.2 and 0.4
* var redStop = gradient.stops[1];
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
@ -96,28 +96,28 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
/**
* The color of the gradient stop.
*
*
* @type Color
* @bean
*
*
* @example {@paperscript height=300}
* // Animating a gradient's ramp points:
*
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
*
*
* // Create a radial gradient that mixes red and black evenly:
* var gradient = new Gradient(['red', 'black'], 'radial');
*
*
* // Fill the path with a gradient color that runs from its center,
* // to the right center of its bounding rectangle:
* var from = path.position;
* var to = path.bounds.rightCenter;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
*
* // This function is called each frame of the animation:
* function onFrame(event) {
* // Change the hue of the first stop's color:

8
src/core/Base.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

34
src/core/PaperScope.js
View file

@ -1,31 +1,31 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name PaperScope
*
*
* @class Internal PaperScope class that handles all the fields available on the
* global paper object, which simply is a pointer to the currently active scope.
*
*
* @private
*/
var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* The version of Paper.js, as a float number.
*
*
* @type Number
*/
version: 0.1,
@ -70,7 +70,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* {@grouptitle View Event Handlers}
* A reference to the {@link View#onFrame} handler function.
*
*
* @name onFrame
* @property
* @type Function
@ -78,7 +78,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* A reference to the {@link View#onResize} handler function.
*
*
* @name onResize
* @property
* @type Function
@ -94,7 +94,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* A reference to the {@link Tool#onMouseDrag} handler function.
*
*
* @name onMouseDrag
* @property
* @type Function
@ -102,7 +102,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* A reference to the {@link Tool#onMouseMove} handler function.
*
*
* @name onMouseMove
* @property
* @type Function
@ -110,7 +110,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* A reference to the {@link Tool#onMouseUp} handler function.
*
*
* @name onMouseUp
* @property
* @type Function
@ -119,7 +119,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* {@grouptitle Keyboard Event Handlers}
* A reference to the {@link Tool#onKeyDown} handler function.
*
*
* @name onKeyDown
* @property
* @type Function
@ -127,7 +127,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* A reference to the {@link Tool#onKeyUp} handler function.
*
*
* @name onKeyUp
* @property
* @type Function
@ -144,7 +144,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
* Installs the paper scope into any other given scope. Can be used for
* examle to inject the currently active PaperScope into the window's global
* scope, to emulate PaperScript-style globally accessible Paper classes:
*
*
* paper.install(window);
* @ignore
*/
@ -187,7 +187,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* Retrieves a PaperScope object with the given id or associated with
* the passed canvas element.
*
*
* @param id
* @ignore
*/
@ -200,7 +200,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
/**
* A way to iterate over all active scopes without accessing _scopes
*
*
* @param iter
* @ignore
*/

10
src/core/PaperScript.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -158,7 +158,7 @@ var PaperScript = this.PaperScript = new function() {
tool = scope.tool = /on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)
&& new Tool(null, scope),
res;
// Define variables for potential handlers, so eval() calls below to
// Define variables for potential handlers, so eval() calls below to
// fetch their values do not require try-catch around them.
// Set currently active scope.
paper = scope;

8
src/item/ChangeFlag.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

32
src/item/Group.js
View file

@ -1,65 +1,65 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Group
*
*
* @class A Group is a collection of items. When you transform a Group, its
* children are treated as a single unit without changing their relative
* positions.
*
*
* @extends Item
*/
var Group = this.Group = Item.extend(/** @lends Group# */{
// DOCS: document new Group(item, item...);
/**
* Creates a new Group item and places it at the top of the active layer.
*
*
* @param {Item[]} [children] An array of children that will be added to the
* newly created group.
*
*
* @example {@paperscript split=true height=200}
* // Create a group containing two paths:
* var path = new Path(new Point(100, 100), new Point(100, 200));
* var path2 = new Path(new Point(50, 150), new Point(150, 150));
*
*
* // Create a group from the two paths:
* var group = new Group([path, path2]);
*
*
* // Set the stroke color of all items in the group:
* group.strokeColor = 'black';
*
*
* // Move the group to the center of the view:
* group.position = view.center;
*
*
* @example {@paperscript split=true height=320}
* // Click in the view to add a path to the group, which in turn is rotated
* // every frame:
* var group = new Group();
*
*
* function onMouseDown(event) {
* // Create a new circle shaped path at the position
* // of the mouse:
* var path = new Path.Circle(event.point, 5);
* path.fillColor = 'black';
*
*
* // Add the path to the group's children list:
* group.addChild(path);
* }
*
*
* function onFrame(event) {
* // Rotate the group by 1 degree from
* // the centerpoint of the view:
@ -103,7 +103,7 @@ var Group = this.Group = Item.extend(/** @lends Group# */{
* Specifies whether the group item is to be clipped.
* When setting to {@code true}, the first child in the group is
* automatically defined as the clipping mask.
*
*
* @type Boolean
* @bean
*/

386
src/item/Item.js
View file

File diff suppressed because it is too large Load diff

24
src/item/Layer.js
View file

@ -1,29 +1,29 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Layer
*
*
* @class The Layer item represents a layer in a Paper.js project.
*
*
* The layer which is currently active can be accessed through
* {@link Project#activeLayer}.
* An array of all layers in a project can be accessed through
* {@link Project#layers}.
*
*
* @extends Group
*/
var Layer = this.Layer = Group.extend(/** @lends Layer# */{
@ -32,10 +32,10 @@ var Layer = this.Layer = Group.extend(/** @lends Layer# */{
* Creates a new Layer item and places it at the end of the
* {@link Project#layers} array. The newly created layer will be activated,
* so all newly created items will be placed within it.
*
* @param {Item[]} [children] An array of items that will be added to the
*
* @param {Item[]} [children] An array of items that will be added to the
* newly created layer.
*
*
* @example
* var layer = new Layer();
*/
@ -58,7 +58,7 @@ var Layer = this.Layer = Group.extend(/** @lends Layer# */{
if (deselect)
this.setSelected(false);
Base.splice(this._project.layers, null, this._index, 1);
// Tell project we need a redraw. This is similar to _changed()
// Tell project we need a redraw. This is similar to _changed()
// mechanism.
this._project._needsRedraw();
return true;
@ -79,7 +79,7 @@ var Layer = this.Layer = Group.extend(/** @lends Layer# */{
// DOCS: improve Layer#activate() example.
/**
* Activates the layer.
*
*
* @example
* var layer = new Layer();
* layer.activate();

30
src/item/PlacedSymbol.js
View file

@ -1,36 +1,36 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name PlacedSymbol
*
*
* @class A PlacedSymbol represents an instance of a symbol which has been
* placed in a Paper.js project.
*
*
* @extends Item
*/
var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
/**
* Creates a new PlacedSymbol Item.
*
*
* @param {Symbol} symbol the symbol to place
* @param {Point|Matrix} [matrixOrOffset] the center point of the placed
* symbol or a {@link Matrix} transformation to transform the placed symbol
* with.
*
*
* @example {@paperscript split=true height=240}
* // Placing 100 instances of a symbol:
* var path = new Path.Star(new Point(0, 0), 6, 5, 13);
@ -38,25 +38,25 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
* fillColor: 'white',
* strokeColor: 'black'
* };
*
*
* // Create a symbol from the path:
* var symbol = new Symbol(path);
*
*
* // Remove the path:
* path.remove();
*
*
* // Place 100 instances of the symbol:
* for (var i = 0; i < 100; i++) {
* // Place an instance of the symbol in the project:
* var instance = new PlacedSymbol(symbol);
*
*
* // Move the instance to a random position within the view:
* instance.position = Point.random() * view.size;
*
*
* // Rotate the instance by a random amount between
* // 0 and 360 degrees:
* instance.rotate(Math.random() * 360);
*
*
* // Scale the instance between 0.25 and 1:
* instance.scale(0.25 + Math.random() * 0.75);
* }
@ -73,7 +73,7 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
/**
* The symbol that the placed symbol refers to:
*
*
* @name PlacedSymbol#symbol
* @type Symbol
*/

38
src/item/Raster.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -25,7 +25,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
// DOCS: Document Raster constructor.
/**
* Creates a new raster item and places it in the active layer.
*
*
* @param {HTMLImageElement|Canvas|string} [object]
*/
initialize: function(object) {
@ -58,7 +58,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The size of the raster in pixels.
*
*
* @type Size
* @bean
*/
@ -78,7 +78,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The width of the raster in pixels.
*
*
* @type Number
* @bean
*/
@ -88,7 +88,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The height of the raster in pixels.
*
*
* @type Number
* @bean
*/
@ -98,7 +98,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* Pixels per inch of the raster at its current size.
*
*
* @type Size
* @bean
*/
@ -115,7 +115,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The Canvas 2d drawing context of the raster.
*
*
* @type Context
* @bean
*/
@ -155,7 +155,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The HTMLImageElement or Canvas of the raster.
*
*
* @type HTMLImageElement|Canvas
* @bean
*/
@ -179,7 +179,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* @param {Rectangle} rect the boundaries of the sub image in pixel
* coordinates
*
*
* @return {Canvas}
*/
getSubImage: function(rect) {
@ -192,7 +192,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* Draws an image on the raster.
*
*
* @param {HTMLImageELement|Canvas} image
* @param {Point} point the offset of the image as a point in pixel
* coordinates
@ -206,7 +206,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
* Calculates the average color of the image within the given path,
* rectangle or point. This can be used for creating raster image
* effects.
*
*
* @param {Path|Rectangle|Point} object
* @return {RGBColor} the average color contained in the area covered by the
* specified path, rectangle or point.
@ -275,7 +275,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* {@grouptitle Pixels}
* Gets the color of a pixel in the raster.
*
*
* @name Raster#getPixel
* @function
* @param x the x offset of the pixel in pixel coordinates
@ -284,7 +284,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
*/
/**
* Gets the color of a pixel in the raster.
*
*
* @name Raster#getPixel
* @function
* @param point the offset of the pixel as a point in pixel coordinates
@ -301,7 +301,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* Sets the color of the specified pixel to the specified color.
*
*
* @name Raster#setPixel
* @function
* @param x the x offset of the pixel in pixel coordinates
@ -310,7 +310,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
*/
/**
* Sets the color of the specified pixel to the specified color.
*
*
* @name Raster#setPixel
* @function
* @param point the offset of the pixel as a point in pixel coordinates
@ -378,7 +378,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
new Rectangle(this._size).setCenter(0, 0)));
return this._bounds;
},
getStrokeBounds: function() {
return this.getBounds();
},

10
src/load.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -124,7 +124,7 @@ if (window.tests) {
}
for (var i = 0; i < sources.length; i++) {
document.write('<script type="text/javascript" src="' + (window.root || '')
document.write('<script type="text/javascript" src="' + (window.root || '')
+ sources[i] + '"></script>');
}

28
src/paper.js
View file

@ -1,38 +1,38 @@
/***
*
*
* Paper.js
*
*
* A JavaScript Vector Graphics Library, based on Scriptographer.org and
* designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*
*
***
*
*
* Bootstrap.js JavaScript Framework.
* http://bootstrapjs.org/
*
*
* Distributed under the MIT license.
*
*
* Copyright (c) 2006 - 2011 Juerg Lehni
* http://lehni.org/
*
*
***
*
*
* Parse-JS, A JavaScript tokenizer / parser / generator.
*
*
* Distributed under the BSD license.
*
*
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
* http://mihai.bazon.net/blog/
*
*
***/
/**

20
src/path/CompoundPath.js
View file

@ -1,42 +1,42 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name CompoundPath
*
*
* @class A compound path contains two or more paths, holes are drawn
* where the paths overlap. All the paths in a compound path take on the
* style of the backmost path and can be accessed through its
* {@link Item#children} list.
*
*
* @extends PathItem
*/
var CompoundPath = this.CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
/**
* Creates a new compound path item and places it in the active layer.
*
*
* @param {Path[]} [paths] the paths to place within the compound path.
*
*
* @example {@paperscript}
* // Create a circle shaped path with a hole in it:
* var circle = new Path.Circle(new Point(50, 50), 30);
* var innerCircle = new Path.Circle(new Point(50, 50), 10);
* var compoundPath = new CompoundPath([circle, innerCircle]);
* compoundPath.fillColor = 'red';
*
*
* // Move the inner circle 5pt to the right:
* compoundPath.children[1].position.x += 5;
*/
@ -66,7 +66,7 @@ var CompoundPath = this.CompoundPath = PathItem.extend(/** @lends CompoundPath#
* If this is a compound path with only one path inside,
* the path is moved outside and the compound path is erased.
* Otherwise, the compound path is returned unmodified.
*
*
* @return {CompoundPath|Path} the simplified compound path
*/
simplify: function() {

50
src/path/Curve.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Curve
*
*
* @class The Curve object represents the parts of a path that are connected by
* two following {@link Segment} objects. The curves of a path can be accessed
* through its {@link Path#curves} array.
@ -31,7 +31,7 @@
var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Creates a new curve object.
*
*
* @param {Segment} segment1
* @param {Segment} segment2
*/
@ -69,7 +69,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The first anchor point of the curve.
*
*
* @type Point
* @bean
*/
@ -84,7 +84,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The second anchor point of the curve.
*
*
* @type Point
* @bean
*/
@ -96,10 +96,10 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
point = Point.read(arguments);
this._segment2._point.set(point.x, point.y);
},
/**
* The handle point that describes the tangent in the first anchor point.
*
*
* @type Point
* @bean
*/
@ -114,7 +114,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The handle point that describes the tangent in the second anchor point.
*
*
* @type Point
* @bean
*/
@ -129,7 +129,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The first segment of the curve.
*
*
* @type Segment
* @bean
*/
@ -139,7 +139,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The second segment of the curve.
*
*
* @type Segment
* @bean
*/
@ -149,7 +149,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The path that the curve belongs to.
*
*
* @type Path
* @bean
*/
@ -159,7 +159,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The index of the curve in the {@link Path#curves} array.
*
*
* @type Number
* @bean
*/
@ -170,7 +170,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The next curve in the {@link Path#curves} array that the curve
* belongs to.
*
*
* @type Curve
* @bean
*/
@ -183,7 +183,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* The previous curve in the {@link Path#curves} array that the curve
* belongs to.
*
*
* @type Curve
* @bean
*/
@ -195,7 +195,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Specifies whether the handles of the curve are selected.
*
*
* @type Boolean
* @bean
*/
@ -215,7 +215,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
// DOCS: document Curve#getLength(from, to)
/**
* The approximated length of the curve in points.
*
*
* @type Number
* @bean
*/
@ -273,7 +273,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Returns the point on the curve at the specified position.
*
*
* @param {Number} parameter the position at which to find the point as
* a value between {@code 0} and {@code 1}.
* @return {Point}
@ -284,7 +284,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Returns the tangent point on the curve at the specified position.
*
*
* @param {Number} parameter the position at which to find the tangent
* point as a value between {@code 0} and {@code 1}.
*/
@ -294,7 +294,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Returns the normal point on the curve at the specified position.
*
*
* @param {Number} parameter the position at which to find the normal
* point as a value between {@code 0} and {@code 1}.
*/
@ -310,7 +310,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Returns a reversed version of the curve, without modifying the curve
* itself.
*
*
* @return {Curve} a reversed version of the curve
*/
reverse: function() {
@ -322,7 +322,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
/**
* Returns a copy of the curve.
*
*
* @return {Curve}
*/
clone: function() {
@ -416,7 +416,7 @@ var Curve = this.Curve = Base.extend(/** @lends Curve# */{
cy = 3 * (c1y - p1y),
by = 3 * (c2y - c1y) - cy,
ay = p2y - p1y - cy - by;
switch (type) {
case 0: // point
// Calculate the curve point at parameter value t

34
src/path/CurveLocation.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name CurveLocation
*
*
* @class CurveLocation objects describe a location on {@link Curve}
* objects, as defined by the curve {@link #parameter}, a value between
* {@code 0} (beginning of the curve) and {@code 1} (end of the curve). If
@ -32,7 +32,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
// {@link PathItem#getIntersections(PathItem)}, etc.
/**
* Creates a new CurveLocation object.
*
*
* @param {Curve} curve
* @param {Number} parameter
* @param {Point} point
@ -45,7 +45,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The segment of the curve which is closer to the described location.
*
*
* @type Segment
* @bean
*/
@ -71,7 +71,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The curve by which the location is defined.
*
*
* @type Curve
* @bean
*/
@ -81,7 +81,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The item this curve belongs to, if any.
*
*
* @type Item
* @bean
*/
@ -92,7 +92,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The index of the curve within the {@link Path#curves} list, if the
* curve is part of a {@link Path} item.
*
*
* @type Index
* @bean
*/
@ -103,7 +103,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The length of the path from its beginning up to the location described
* by this object.
*
*
* @type Number
* @bean
*/
@ -115,7 +115,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The length of the curve from its beginning up to the location described
* by this object.
*
*
* @type Number
* @bean
*/
@ -128,7 +128,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
* The curve parameter, as used by various bezier curve calculations. It is
* value between {@code 0} (beginning of the curve) and {@code 1} (end of
* the curve).
*
*
* @type Number
* @bean
*/
@ -141,7 +141,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The point which is defined by the {@link #curve} and
* {@link #parameter}.
*
*
* @type Point
* @bean
*/
@ -156,7 +156,7 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
/**
* The tangential vector to the {@link #curve} at the given location.
*
*
* @type Point
* @bean
*/
@ -165,10 +165,10 @@ CurveLocation = Base.extend(/** @lends CurveLocation# */{
return parameter != null && this._curve
&& this._curve.getTangent(parameter);
},
/**
* The normal vector to the {@link #curve} at the given location.
*
*
* @type Point
* @bean
*/

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

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -29,11 +29,11 @@ Path.inject({ statics: new function() {
* {@grouptitle Shaped Paths}
*
* Creates a Path Item with two anchor points forming a line.
*
*
* @param {Point} pt1 the first anchor point of the path
* @param {Point} pt2 the second anchor point of the path
* @return {Path} the newly created path
*
*
* @example
* var from = new Point(20, 20);
* var to = new Point(100, 100);
@ -50,12 +50,12 @@ Path.inject({ statics: new function() {
/**
* Creates a rectangle shaped Path Item from the passed point and size.
*
*
* @name Path.Rectangle
* @param {Point} point
* @param {Size} size
* @return {Path} the newly created path
*
*
* @example
* var point = new Point(100, 100);
* var size = new Size(100, 100);
@ -67,12 +67,12 @@ Path.inject({ statics: new function() {
* 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.
*
*
* @name Path.Rectangle
* @param {Point} point1 The first point defining the rectangle
* @param {Point} point2 The second point defining the rectangle
* @return {Path} the newly created path
*
*
* @example
* var point = new Point(100, 100);
* var point2 = new Point(200, 300);
@ -82,10 +82,10 @@ Path.inject({ statics: new function() {
/**
* Creates a rectangle shaped Path Item from the passed abstract
* {@link Rectangle}.
*
*
* @param {Rectangle} rect
* @return {Path} the newly created path
*
*
* @example
* var point = new Point(100, 100);
* var size = new Size(100, 100);
@ -108,11 +108,11 @@ Path.inject({ statics: new function() {
/**
* Creates a rectangular Path Item with rounded corners.
*
*
* @param {Rectangle} rect
* @param {Size} size the size of the rounded corners
* @return {Path} the newly created path
*
*
* @example
* var point = new Point(100, 100);
* var size = new Size(100, 100);
@ -154,14 +154,14 @@ Path.inject({ statics: new function() {
/**
* Creates an oval 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
* the rectangle.
* @return {Path} the newly created path
*
*
* @example
* var topLeft = new Point(100, 100);
* var size = new Size(150, 100);
@ -190,11 +190,11 @@ Path.inject({ statics: new function() {
/**
* Creates a circle shaped Path Item.
*
*
* @param {Point} center the center point of the circle
* @param {Number} radius the radius of the circle
* @return {Path} the newly created path
*
*
* @example
* var path = new Path.Circle(new Point(100, 100), 50);
*/
@ -211,12 +211,12 @@ Path.inject({ statics: new function() {
/**
* Creates a circular arc shaped Path Item.
*
*
* @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
*
*
* @example
* var start = new Point(0, 0);
* var through = new Point(100, 100);
@ -233,12 +233,12 @@ Path.inject({ statics: new function() {
/**
* Creates a regular polygon shaped Path Item.
*
*
* @param {Point} center the center point of the polygon
* @param {Number} numSides the number of sides of the polygon
* @param {Number} radius the radius of the polygon
* @return {Path} the newly created path
*
*
* @example
* // Create a triangle shaped path
* var center = new Point(100, 100);
@ -246,7 +246,7 @@ Path.inject({ statics: new function() {
* var radius = 50;
* var triangle = new Path.RegularPolygon(center, sides, radius);
* triangle.fillColor = 'black';
*
*
* @example
* // Create a decahedron shaped path
* var center = new Point(100, 100);
@ -274,17 +274,17 @@ Path.inject({ statics: new function() {
/**
* Creates a star shaped Path Item.
*
*
* 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.
*
*
* @param {Point} center the center point of the star
* @param {Number} numPoints the number of points of the star
* @param {Number} radius1
* @param {Number} radius2
* @return {Path} the newly created path
*
*
* @example
* var center = new Point(100, 100);
* var points = 6;
@ -292,7 +292,7 @@ Path.inject({ statics: new function() {
* var radius2 = 50;
* var path = new Path.Star(center, points, radius1, radius2);
* path.fillColor = 'black';
*/
*/
Star: function(center, numPoints, radius1, radius2) {
center = Point.read(arguments, 0, 1);
numPoints *= 2;

292
src/path/Path.js
View file

@ -1,40 +1,40 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Path
*
*
* @class The Path item represents a path in a Paper.js project.
*
*
* @extends PathItem
*/
var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Creates a new Path item and places it at the top of the active layer.
*
*
* @param {Segment[]} [segments] An array of segments (or points to be
* converted to segments) that will be added to the path.
*
*
* @example
* // Create an empty path and add segments to it:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(30, 30));
* path.add(new Point(100, 100));
*
*
* @example
* // Create a path with two segments:
* var segments = [new Point(30, 30), new Point(100, 100)];
@ -75,7 +75,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The segments contained within the path.
*
*
* @type Segment[]
* @bean
*/
@ -98,7 +98,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The first Segment contained within the path.
*
*
* @type Segment
* @bean
*/
@ -108,7 +108,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The last Segment contained within the path.
*
*
* @type Segment
* @bean
*/
@ -118,7 +118,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The curves contained within the path.
*
*
* @type Curve[]
* @bean
*/
@ -140,7 +140,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The first Curve contained within the path.
*
*
* @type Curve
* @bean
*/
@ -150,7 +150,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The last Curve contained within the path.
*
*
* @type Curve
* @bean
*/
@ -162,17 +162,17 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Specifies whether the path is closed. If it is closed, Paper.js connects
* the first and last segments.
*
*
* @type Boolean
* @bean
*
*
* @example {@paperscript}
* var myPath = new Path();
* myPath.strokeColor = 'black';
* myPath.add(new Point(50, 75));
* myPath.add(new Point(100, 25));
* myPath.add(new Point(150, 75));
*
*
* // Close the path:
* myPath.closed = true;
*/
@ -286,64 +286,64 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Adds one or more segments to the end of the {@link #segments} array of
* this path.
*
*
* @param {Segment|Point} segment the segment or point to be added.
* @return {Segment} the added segment. This is not necessarily the same
* object, e.g. if the segment to be added already belongs to another path.
* @operator none
*
*
* @example {@paperscript}
* // Adding segments to a path using point objects:
* var path = new Path();
* path.strokeColor = 'black';
*
*
* // Add a segment at {x: 30, y: 75}
* path.add(new Point(30, 75));
*
*
* // Add two segments in one go at {x: 100, y: 20}
* // and {x: 170, y: 75}:
* path.add(new Point(100, 20), new Point(170, 75));
*
*
* @example {@paperscript}
* // Adding segments to a path using arrays containing number pairs:
* var path = new Path();
* path.strokeColor = 'black';
*
*
* // Add a segment at {x: 30, y: 75}
* path.add([30, 75]);
*
*
* // Add two segments in one go at {x: 100, y: 20}
* // and {x: 170, y: 75}:
* path.add([100, 20], [170, 75]);
*
*
* @example {@paperscript}
* // Adding segments to a path using objects:
* var path = new Path();
* path.strokeColor = 'black';
*
*
* // Add a segment at {x: 30, y: 75}
* path.add({x: 30, y: 75});
*
*
* // Add two segments in one go at {x: 100, y: 20}
* // and {x: 170, y: 75}:
* path.add({x: 100, y: 20}, {x: 170, y: 75});
*
*
* @example {@paperscript}
* // Adding a segment with handles to a path:
* var path = new Path();
* path.strokeColor = 'black';
*
*
* path.add(new Point(30, 75));
*
*
* // Add a segment with handles:
* var point = new Point(100, 20);
* var handleIn = new Point(-50, 0);
* var handleOut = new Point(50, 0);
* var added = path.add(new Segment(point, handleIn, handleOut));
*
*
* // Select the added segment, so we can see its handles:
* added.selected = true;
*
*
* path.add(new Point(170, 75));
*/
add: function(segment1 /*, segment2, ... */) {
@ -358,35 +358,35 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Inserts one or more segments at a given index in the list of this path's
* segments.
*
*
* @param {Number} index the index at which to insert the segment.
* @param {Segment|Point} segment the segment or point to be inserted.
* @return {Segment} the added segment. This is not necessarily the same
* object, e.g. if the segment to be added already belongs to another path.
*
*
* @example {@paperscript}
* // Inserting a segment:
* var myPath = new Path();
* myPath.strokeColor = 'black';
* myPath.add(new Point(50, 75));
* myPath.add(new Point(150, 75));
*
*
* // Insert a new segment into myPath at index 1:
* myPath.insert(1, new Point(100, 25));
*
*
* // Select the segment which we just inserted:
* myPath.segments[1].selected = true;
*
*
* @example {@paperscript}
* // Inserting multiple segments:
* var myPath = new Path();
* myPath.strokeColor = 'black';
* myPath.add(new Point(50, 75));
* myPath.add(new Point(150, 75));
*
*
* // Insert two segments into myPath at index 1:
* myPath.insert(1, [80, 25], [120, 25]);
*
*
* // Select the segments which we just inserted:
* myPath.segments[1].selected = true;
* myPath.segments[2].selected = true;
@ -413,39 +413,39 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Adds an array of segments (or types that can be converted to segments)
* to the end of the {@link #segments} array.
*
*
* @param {Segment[]} segments
* @return {Segment[]} an array of the added segments. These segments are
* not necessarily the same objects, e.g. if the segment to be added already
* belongs to another path.
*
*
* @example {@paperscript}
* // Adding an array of Point objects:
* var path = new Path();
* path.strokeColor = 'black';
* var points = [new Point(30, 50), new Point(170, 50)];
* path.addSegments(points);
*
*
* @example {@paperscript}
* // Adding an array of [x, y] arrays:
* var path = new Path();
* path.strokeColor = 'black';
* var array = [[30, 75], [100, 20], [170, 75]];
* path.addSegments(array);
*
*
* @example {@paperscript}
* // Adding segments from one path to another:
*
*
* var path = new Path();
* path.strokeColor = 'black';
* path.addSegments([[30, 75], [100, 20], [170, 75]]);
*
*
* var path2 = new Path();
* path2.strokeColor = 'red';
*
*
* // Add the second and third segments of path to path2:
* path2.add(path.segments[1], path.segments[2]);
*
*
* // Move path2 30pt to the right:
* path2.position.x += 30;
*/
@ -457,7 +457,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Inserts an array of segments at a given index in the path's
* {@link #segments} array.
*
*
* @param {Number} index the index at which to insert the segments.
* @param {Segment[]} segments the segments to be inserted.
* @return {Segment[]} an array of the added segments. These segments are
@ -472,21 +472,21 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Removes the segment at the specified index of the path's
* {@link #segments} array.
*
*
* @param {Number} index the index of the segment to be removed
* @return {Segment} the removed segment
*
*
* @example {@paperscript}
* // Removing a segment from a path:
*
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var path = new Path.Circle(new Point(80, 50), 35);
* path.strokeColor = 'black';
*
*
* // Remove its second segment:
* path.removeSegment(1);
*
*
* // Select the path, so we can see its segments:
* path.selected = true;
*/
@ -498,7 +498,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
// PORT: Add to Scriptographer
/**
* Removes all segments from the path's {@link #segments} array.
*
*
* @name Path#removeSegments
* @function
* @return {Segment[]} an array containing the removed segments
@ -506,22 +506,22 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Removes the segments from the specified {@code from} index to the
* {@code to} index from the path's {@link #segments} array.
*
*
* @param {Number} from the beginning index, inclusive
* @param {Number} [to=segments.length] the ending index, exclusive
* @return {Segment[]} an array containing the removed segments
*
*
* @example {@paperscript}
* // Removing segments from a path:
*
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var path = new Path.Circle(new Point(80, 50), 35);
* path.strokeColor = 'black';
*
*
* // Remove the segments from index 1 till index 2:
* path.removeSegments(1, 2);
*
*
* // Select the path, so we can see its segments:
* path.selected = true;
*/
@ -568,59 +568,59 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
* Specifies whether an path is selected and will also return {@code true}
* if the path is partially selected, i.e. one or more of its segments is
* selected.
*
*
* Paper.js draws the visual outlines of selected items on top of your
* project. This can be useful for debugging, as it allows you to see the
* construction of paths, position of path curves, individual segment points
* and bounding boxes of symbol and raster items.
*
*
* @type Boolean
* @bean
* @see Project#selectedItems
* @see Segment#selected
* @see Point#selected
*
*
* @example {@paperscript}
* // Selecting an item:
* var path = new Path.Circle(new Size(80, 50), 35);
* path.selected = true; // Select the path
*
*
* @example {@paperscript}
* // A path is selected, if one or more of its segments is selected:
* var path = new Path.Circle(new Size(80, 50), 35);
*
*
* // Select the second segment of the path:
* path.segments[1].selected = true;
*
*
* // If the path is selected (which it is), set its fill color to red:
* if (path.selected) {
* path.fillColor = 'red';
* }
*
*
*/
/**
* Specifies whether the path and all its segments are selected.
*
*
* @type Boolean
* @bean
*
*
* @example {@paperscript}
* // A path is fully selected, if all of its segments are selected:
* var path = new Path.Circle(new Size(80, 50), 35);
* path.fullySelected = true;
*
*
* var path2 = new Path.Circle(new Size(180, 50), 35);
* path2.fullySelected = true;
*
*
* // Deselect the second segment of the second path:
* path2.segments[1].selected = false;
*
*
* // If the path is fully selected (which it is),
* // set its fill color to red:
* if (path.fullySelected) {
* path.fillColor = 'red';
* }
*
*
* // If the second path is fully selected (which it isn't, since we just
* // deselected its second segment),
* // set its fill color to red:
@ -657,26 +657,26 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
* Converts the curves in a path to straight lines with an even distribution
* of points. The distance between the produced segments is as close as
* possible to the value specified by the {@code maxDistance} parameter.
*
*
* @param {Number} maxDistance the maximum distance between the points
*
*
* @example {@paperscript}
* // Flattening a circle shaped path:
*
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var path = new Path.Circle(new Size(80, 50), 35);
*
*
* // Select the path, so we can inspect its segments:
* path.selected = true;
*
*
* // Create a copy of the path and move it 150 points to the right:
* var copy = path.clone();
* copy.position.x += 150;
*
*
* // Convert its curves to points, with a max distance of 20:
* copy.flatten(20);
*
*
* // Select the copy, so we can inspect its segments:
* copy.selected = true;
*/
@ -700,20 +700,20 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
* Smooths a path by simplifying it. The {@link Path#segments} array is
* analyzed and replaced by a more optimal set of segments, reducing memory
* usage and speeding up drawing.
*
*
* @param {Number} [tolerance=2.5]
*
*
* @example {@paperscript height=300}
* // Click and drag below to draw to draw a line, when you release the
* // mouse, the is made smooth using path.simplify():
*
*
* var path;
* function onMouseDown(event) {
* // If we already made a path before, deselect it:
* if (path) {
* path.selected = false;
* }
*
*
* // Create a new path and add the position of the mouse
* // as its first segment. Select it, so we can see the
* // segment points:
@ -722,13 +722,13 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
* path.add(event.point);
* path.selected = true;
* }
*
*
* function onMouseDrag(event) {
* // On every drag event, add a segment to the path
* // at the position of the mouse:
* path.add(event.point);
* }
*
*
* function onMouseUp(event) {
* // When the mouse is released, simplify the path:
* path.simplify();
@ -747,7 +747,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Specifies whether the path is oriented clock-wise.
*
*
* @type Boolean
* @bean
*/
@ -814,53 +814,53 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Joins the path with the specified path, which will be removed in the
* process.
*
*
* @param {Path} path
*
*
* @example {@paperscript}
* // Joining two paths:
* var path = new Path([30, 25], [30, 75]);
* path.strokeColor = 'black';
*
*
* var path2 = new Path([200, 25], [200, 75]);
* path2.strokeColor = 'black';
*
*
* // Join the paths:
* path.join(path2);
*
*
* @example {@paperscript}
* // Joining two paths that share a point at the start or end of their
* // segments array:
* var path = new Path([30, 25], [30, 75]);
* path.strokeColor = 'black';
*
*
* var path2 = new Path([30, 25], [80, 25]);
* path2.strokeColor = 'black';
*
*
* // Join the paths:
* path.join(path2);
*
*
* // After joining, path with have 3 segments, since it
* // shared its first segment point with the first
* // segment point of path2.
*
*
* // Select the path to show that they have joined:
* path.selected = true;
*
*
* @example {@paperscript}
* // Joining two paths that connect at two points:
* var path = new Path([30, 25], [80, 25], [80, 75]);
* path.strokeColor = 'black';
*
*
* var path2 = new Path([30, 25], [30, 75], [80, 75]);
* path2.strokeColor = 'black';
*
*
* // Join the paths:
* path.join(path2);
*
*
* // Because the paths were joined at two points, the path is closed
* // and has 4 segments.
*
*
* // Select the path to show that they have joined:
* path.selected = true;
*/
@ -905,7 +905,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The length of the perimeter of the path.
*
*
* @type Number
* @bean
*/
@ -937,7 +937,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
// DOCS: document Path#getLocationAt
/**
* {@grouptitle Positions on Paths and Curves}
*
*
* @param {Number} offset
* @param {Boolean} [isParameter=false]
* @return {CurveLocation}
@ -971,48 +971,48 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
// DOCS: improve Path#getPointAt documenation.
/**
* Get the point on the path at the given offset.
*
*
* @param {Number} offset
* @param {Boolean} [isParameter=false]
* @return {Point} the point at the given offset
*
*
* @example {@paperscript height=150}
* // Finding the point on a path at a given offset:
*
*
* // Create an arc shaped path:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(40, 100));
* path.arcTo(new Point(150, 100));
*
*
* // We're going to be working with a third of the length
* // of the path as the offset:
* var offset = path.length / 3;
*
*
* // Find the point on the path:
* var point = path.getPointAt(offset);
*
*
* // Create a small circle shaped path at the point:
* var circle = new Path.Circle(point, 3);
* circle.fillColor = 'red';
*
*
* @example {@paperscript height=150}
* // Iterating over the length of a path:
*
*
* // Create an arc shaped path:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(40, 100));
* path.arcTo(new Point(150, 100));
*
*
* var amount = 5;
* var length = path.length;
* for (var i = 0; i < amount + 1; i++) {
* var offset = i / amount * length;
*
*
* // Find the point on the path at the given offset:
* var point = path.getPointAt(offset);
*
*
* // Create a small circle shaped path at the point:
* var circle = new Path.Circle(point, 3);
* circle.fillColor = 'red';
@ -1026,61 +1026,61 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Get the tangent to the path at the given offset as a vector
* point.
*
*
* @param {Number} offset
* @param {Boolean} [isParameter=false]
* @return {Point} the tangent vector at the given offset
*
*
* @example {@paperscript height=150}
* // Working with the tangent vector at a given offset:
*
*
* // Create an arc shaped path:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(40, 100));
* path.arcTo(new Point(150, 100));
*
*
* // We're going to be working with a third of the length
* // of the path as the offset:
* var offset = path.length / 3;
*
*
* // Find the point on the path:
* var point = path.getPointAt(offset);
*
*
* // Find the tangent vector at the given offset:
* var tangent = path.getTangentAt(offset);
*
*
* // Make the tangent vector 60pt long:
* tangent.length = 60;
*
*
* var path = new Path();
* path.strokeColor = 'red';
* path.add(point);
* path.add(point + tangent);
*
*
* @example {@paperscript height=200}
* // Iterating over the length of a path:
*
*
* // Create an arc shaped path:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(40, 100));
* path.arcTo(new Point(150, 100));
*
*
* var amount = 6;
* var length = path.length;
* for (var i = 0; i < amount + 1; i++) {
* var offset = i / amount * length;
*
*
* // Find the point on the path at the given offset:
* var point = path.getPointAt(offset);
*
*
* // Find the normal vector on the path at the given offset:
* var tangent = path.getTangentAt(offset);
*
*
* // Make the tangent vector 60pt long:
* tangent.length = 60;
*
*
* var line = new Path();
* line.strokeColor = 'red';
* line.add(point);
@ -1094,61 +1094,61 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Get the normal to the path at the given offset as a vector point.
*
*
* @param {Number} offset
* @param {Boolean} [isParameter=false]
* @return {Point} the normal vector at the given offset
*
*
* @example {@paperscript height=150}
* // Working with the normal vector at a given offset:
*
*
* // Create an arc shaped path:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(40, 100));
* path.arcTo(new Point(150, 100));
*
*
* // We're going to be working with a third of the length
* // of the path as the offset:
* var offset = path.length / 3;
*
*
* // Find the point on the path:
* var point = path.getPointAt(offset);
*
*
* // Find the normal vector at the given offset:
* var normal = path.getNormalAt(offset);
*
*
* // Make the normal vector 30pt long:
* normal.length = 30;
*
*
* var path = new Path();
* path.strokeColor = 'red';
* path.add(point);
* path.add(point + normal);
*
*
* @example {@paperscript height=200}
* // Iterating over the length of a path:
*
*
* // Create an arc shaped path:
* var path = new Path();
* path.strokeColor = 'black';
* path.add(new Point(40, 100));
* path.arcTo(new Point(150, 100));
*
*
* var amount = 10;
* var length = path.length;
* for (var i = 0; i < amount + 1; i++) {
* var offset = i / amount * length;
*
*
* // Find the point on the path at the given offset:
* var point = path.getPointAt(offset);
*
*
* // Find the normal vector on the path at the given offset:
* var normal = path.getNormalAt(offset);
*
*
* // Make the normal vector 30pt long:
* normal.length = 30;
*
*
* var line = new Path();
* line.strokeColor = 'red';
* line.add(point);
@ -1311,7 +1311,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* Solves a tri-diagonal system for one of coordinates (x or y) of first
* bezier control points.
*
*
* @param rhs right hand side vector.
* @return Solution vector.
*/
@ -1775,7 +1775,7 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
*/
getBounds: function(/* matrix */) {
var useCache = arguments.length == 0;
// Pass the matrix hidden from Bootstrap, so it still inject
// Pass the matrix hidden from Bootstrap, so it still inject
// getBounds as bean too.
if (!useCache || !this._bounds) {
var bounds = this._createBounds(getBounds(this, arguments[0]));

12
src/path/PathFitter.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -152,7 +152,7 @@ var PathFitter = Base.extend({
var segLength = pt2.getDistance(pt1);
epsilon *= segLength;
if (alpha1 < epsilon || alpha2 < epsilon) {
// fall back on standard (probably inaccurate) formula,
// fall back on standard (probably inaccurate) formula,
// and subdivide further if needed.
alpha1 = alpha2 = segLength / 3;
}
@ -211,7 +211,7 @@ var PathFitter = Base.extend({
return tmp[0];
},
// Assign parameter values to digitized points
// Assign parameter values to digitized points
// using relative distances between points.
chordLengthParameterize: function(first, last) {
var u = [0];

12
src/path/PathFlattener.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -25,7 +25,7 @@ var PathFlattener = Base.extend({
// Instead of relying on path.curves, we only use segments here and
// get the curve values from them.
// Now walk through all curves and compute the parts for each of them,
// by recursively calling _computeParts().
var segments = path._segments,
@ -93,7 +93,7 @@ var PathFlattener = Base.extend({
// Now get the previous part so we can linearly interpolate
// the curve parameter
var prev = this.parts[i - 1];
// Make sure we only use the previous parameter value if its
// Make sure we only use the previous parameter value if its
// for the same curve, by checking index. Use 0 otherwise.
var prevVal = prev && prev.index == part.index ? prev.value : 0,
prevLen = prev ? prev.offset : 0;

126
src/path/PathItem.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -26,61 +26,61 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
* Smooth bezier curves without changing the amount of segments or their
* points, by only smoothing and adjusting their handle points, for both
* open ended and closed paths.
*
*
* @name PathItem#smooth
* @function
*
*
* @example {@paperscript}
* // Smoothing a closed shape:
*
*
* // Create a rectangular path with its top-left point at
* // {x: 30, y: 25} and a size of {width: 50, height: 50}:
* var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
* path.strokeColor = 'black';
*
*
* // Select the path, so we can see its handles:
* path.selected = true;
*
*
* // Create a copy of the path and move it 100pt to the right:
* var copy = path.clone();
* copy.position.x += 100;
*
*
* // Smooth the segments of the copy:
* copy.smooth();
*
*
* @example {@paperscript height=220}
* var path = new Path();
* path.strokeColor = 'black';
*
*
* path.add(new Point(30, 50));
*
*
* var y = 5;
* var x = 3;
*
*
* for (var i = 0; i < 28; i++) {
* y *= -1.1;
* x *= 1.1;
* path.lineBy(x, y);
* }
*
*
* // Create a copy of the path and move it 100pt down:
* var copy = path.clone();
* copy.position.y += 120;
*
*
* // Set its stroke color to red:
* copy.strokeColor = 'red';
*
*
* // Smooth the segments of the copy:
* copy.smooth();
*/
/**
* {@grouptitle Postscript Style Drawing Commands}
*
*
* If called on a {@link CompoundPath}, a new {@link Path} is created as a
* child and the point is added as its first segment. On a normal empty
* {@link Path}, the point is simply added as its first segment.
*
*
* @name PathItem#moveTo
* @function
* @param {Point} point
@ -96,7 +96,7 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
/**
* Adds a cubic bezier curve to the path, defined by two handles and a to
* point.
*
*
* @name PathItem#cubicCurveTo
* @function
* @param {Point} handle1
@ -107,7 +107,7 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
/**
* Adds a quadratic bezier curve to the path, defined by a handle and a to
* point.
*
*
* @name PathItem#quadraticCurveTo
* @function
* @param {Point} handle
@ -119,36 +119,36 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
* Draws a curve from the position of the last segment point in the path
* that goes through the specified {@code through} point, to the specified
* {@code to} point by adding one segment to the path.
*
*
* @name PathItem#curveTo
* @function
* @param {Point} through the point through which the curve should go
* @param {Point} to the point where the curve should end
* @param {Number} [parameter=0.5]
*
*
* @example {@paperscript height=300}
* // Interactive example. Click and drag in the view below:
*
*
* var myPath;
* function onMouseDrag(event) {
* // If we created a path before, remove it:
* if (myPath) {
* myPath.remove();
* }
*
*
* // Create a new path and add a segment point to it
* // at {x: 150, y: 150):
* myPath = new Path();
* myPath.add(150, 150);
*
*
* // Draw a curve through the position of the mouse to 'toPoint'
* var toPoint = new Point(350, 150);
* myPath.curveTo(event.point, toPoint);
*
*
* // Select the path, so we can see its segments:
* myPath.selected = true;
* }
*
*
* // When the mouse is released, deselect the path
* // and set its stroke-color to black:
* function onMouseUp(event) {
@ -161,55 +161,55 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
* Draws an arc from the position of the last segment point in the path that
* goes through the specified {@code through} point, to the specified
* {@code to} point by adding one or more segments to the path.
*
*
* @name PathItem#arcTo
* @function
* @param {Point} through the point where the arc should pass through
* @param {Point} to the point where the arc should end
*
*
* @example {@paperscript}
* var path = new Path();
* path.strokeColor = 'black';
*
*
* var firstPoint = new Point(30, 75);
* path.add(firstPoint);
*
*
* // The point through which we will create the arc:
* var throughPoint = new Point(40, 40);
*
*
* // The point at which the arc will end:
* var toPoint = new Point(130, 75);
*
*
* // Draw an arc through 'throughPoint' to 'toPoint'
* path.arcTo(throughPoint, toPoint);
*
*
* // Add a red circle shaped path at the position of 'throughPoint':
* var circle = new Path.Circle(throughPoint, 3);
* circle.fillColor = 'red';
*
*
* @example {@paperscript height=300}
* // Interactive example. Click and drag in the view below:
*
*
* var myPath;
* function onMouseDrag(event) {
* // If we created a path before, remove it:
* if (myPath) {
* myPath.remove();
* }
*
*
* // Create a new path and add a segment point to it
* // at {x: 150, y: 150):
* myPath = new Path();
* myPath.add(150, 150);
*
*
* // Draw an arc through the position of the mouse to 'toPoint'
* var toPoint = new Point(350, 150);
* myPath.arcTo(event.point, toPoint);
*
*
* // Select the path, so we can see its segments:
* myPath.selected = true;
* }
*
*
* // When the mouse is released, deselect the path
* // and fill it with black.
* function onMouseUp(event) {
@ -220,36 +220,36 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
/**
* Draws an arc from the position of the last segment point in the path to
* the specified point by adding one or more segments to the path.
*
*
* @name PathItem#arcTo
* @function
* @param {Point} to the point where the arc should end
* @param {Boolean} [clockwise=true] specifies whether the arc should be
* drawn in clockwise direction.
*
*
* @example {@paperscript}
* var path = new Path();
* path.strokeColor = 'black';
*
*
* path.add(new Point(30, 75));
* path.arcTo(new Point(130, 75));
*
*
* var path2 = new Path();
* path2.strokeColor = 'red';
* path2.add(new Point(180, 25));
*
*
* // To draw an arc in anticlockwise direction,
* // we pass 'false' as the second argument to arcTo:
* path2.arcTo(new Point(280, 25), false);
*
*
* @example {@paperscript height=300}
* // Interactive example. Click and drag in the view below:
* var myPath;
*
*
* // The mouse has to move at least 20 points before
* // the next mouse drag event is fired:
* tool.minDistance = 20;
*
*
* // When the user clicks, create a new path and add
* // the current mouse position to it as its first segment:
* function onMouseDown(event) {
@ -257,7 +257,7 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
* myPath.strokeColor = 'black';
* myPath.add(event.point);
* }
*
*
* // On each mouse drag event, draw an arc to the current
* // position of the mouse:
* function onMouseDrag(event) {
@ -268,7 +268,7 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
/**
* Closes the path. When closed, Paper.js connects the first and last
* segments.
*
*
* @name PathItem#closePath
* @function
* @see Path#closed
@ -276,11 +276,11 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
/**
* {@grouptitle Relative Drawing Commands}
*
*
* If called on a {@link CompoundPath}, a new {@link Path} is created as a
* child and the point is added as its first segment relative to the
* position of the last segment of the current path.
*
*
* @name PathItem#moveBy
* @function
* @param {Point} point
@ -288,34 +288,34 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
/**
* Adds a segment relative to the last segment point of the path.
*
*
* @name PathItem#lineBy
* @function
* @param {Point} vector The vector which is added to the position of the
* last segment of the path, to become the new segment.
*
*
* @example {@paperscript}
* var path = new Path();
* path.strokeColor = 'black';
*
*
* // Add a segment at {x: 50, y: 50}
* path.add(25, 25);
*
*
* // Add a segment relative to the last segment of the path.
* // 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
* path.lineBy(50, 0);
*
*
* // 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
* path.lineBy(0, 50);
*
*
* @example {@paperscript height=300}
* // Drawing a spiral using lineBy:
* var path = new Path();
* path.strokeColor = 'black';
*
*
* // Add the first segment at {x: 50, y: 50}
* path.add(view.center);
*
*
* // Loop 500 times:
* for (var i = 0; i < 500; i++) {
* // Create a vector with an ever increasing length
@ -327,10 +327,10 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
* // Add the vector relatively to the last segment point:
* path.lineBy(vector);
* }
*
*
* // Smooth the handles of the path:
* path.smooth();
*
*
* // Uncomment the following line and click on 'run' to see
* // the construction of the path:
* // path.selected = true;

46
src/path/Segment.js
View file

@ -1,26 +1,26 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Segment
*
*
* @class The Segment object represents the points of a path through which its
* {@link Curve} objects pass. The segments of a path can be accessed through
* its {@link Path#segments} array.
*
*
* Each segment consists of an anchor point ({@link Segment#point}) and
* optionaly an incoming and an outgoing handle ({@link Segment#handleIn} and
* {@link Segment#handleOut}), describing the tangents of the two {@link Curve}
@ -29,7 +29,7 @@
var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* Creates a new Segment object.
*
*
* @param {Point} [point={x: 0, y: 0}] the anchor point of the segment
* @param {Point} [handleIn={x: 0, y: 0}] the handle point relative to the
* anchor point of the segment that describes the in tangent of the
@ -37,17 +37,17 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
* @param {Point} [handleOut={x: 0, y: 0}] the handle point relative to the
* anchor point of the segment that describes the out tangent of the
* segment.
*
*
* @example {@paperscript}
* var handleIn = new Point(-80, -100);
* var handleOut = new Point(80, 100);
*
*
* var firstPoint = new Point(100, 50);
* var firstSegment = new Segment(firstPoint, null, handleOut);
*
*
* var secondPoint = new Point(300, 50);
* var secondSegment = new Segment(secondPoint, handleIn, null);
*
*
* var path = new Path(firstSegment, secondSegment);
* path.strokeColor = 'black';
*/
@ -109,7 +109,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The anchor point of the segment.
*
*
* @type Point
* @bean
*/
@ -127,7 +127,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The handle point relative to the anchor point of the segment that
* describes the in tangent of the segment.
*
*
* @type Point
* @bean
*/
@ -151,7 +151,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The handle point relative to the anchor point of the segment that
* describes the out tangent of the segment.
*
*
* @type Point
* @bean
*/
@ -225,7 +225,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
path._updateSelection(this, state, this._selectionState);
},
/**
* Specifies whether the {@link #point} of the segment is selected.
@ -242,10 +242,10 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* {@grouptitle Hierarchy}
*
*
* The index of the segment in the {@link Path#segments} array that the
* segment belongs to.
*
*
* @type Number
* @bean
*/
@ -255,7 +255,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The path that the segment belongs to.
*
*
* @type Path
* @bean
*/
@ -265,7 +265,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The curve that the segment belongs to.
*
*
* @type Curve
* @bean
*/
@ -282,11 +282,11 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* {@grouptitle Sibling Segments}
*
*
* The next segment in the {@link Path#segments} array that the segment
* belongs to. If the segments belongs to a closed path, the first segment
* is returned for the last segment of the path.
*
*
* @type Segment
* @bean
*/
@ -300,7 +300,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
* The previous segment in the {@link Path#segments} array that the
* segment belongs to. If the segments belongs to a closed path, the last
* segment is returned for the first segment of the path.
*
*
* @type Segment
* @bean
*/
@ -344,7 +344,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
var point = this._point,
// If a matrix is defined, only transform handles if they are set.
// This saves some computation time. If no matrix is set, always
// use the real handles, as we just want to receive a filled
// use the real handles, as we just want to receive a filled
// coords array for getBounds().
handleIn = matrix && this.getHandleInIfSet() || this._handleIn,
handleOut = matrix && this.getHandleOutIfSet() || this._handleOut,

16
src/path/SegmentPoint.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -18,7 +18,7 @@
* @name SegmentPoint
* @class An internal version of Point that notifies its segment of each change
* Note: This prototype is not exported.
*
*
* @private
*/
var SegmentPoint = Point.extend({
@ -46,15 +46,15 @@ var SegmentPoint = Point.extend({
this._y = y;
this._owner._changed(this);
},
setSelected: function(selected) {
this._owner._setSelected(this, selected);
},
isSelected: function() {
return this._owner._isSelected(this);
},
statics: {
create: function(segment, key, pt) {
var point = new SegmentPoint(SegmentPoint.dont),

8
src/path/SelectionState.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

50
src/project/Project.js
View file

@ -1,36 +1,36 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
/**
* @name Project
*
*
* @class A Project object in Paper.js is what usually is refered to as the
* document: The top level object that holds all the items contained in the
* scene graph. As the term document is already taken in the browser context,
* it is called Project.
*
*
* Projects allow the manipluation of the styles that are applied to all newly
* created items, give access to the selected items, and will in future versions
* offer ways to query for items in the scene graph defining specific
* requirements, and means to persist and load from different formats, such as
* SVG and PDF.
*
*
* The currently active project can be accessed through the global
* {@see _global_#project} variable.
*
*
* An array of all open projects is accessible through the global
* {@see _global_#projects} variable.
*/
@ -38,7 +38,7 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
// TODO: Add arguments to define pages
/**
* Creates a Paper.js project.
*
*
* When working with PaperScript, a project is automatically created for us
* and the global {@see _global_#project} variable points to it.
*/
@ -66,25 +66,25 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
/**
* The currently active path style. All selected items and newly
* created items will be styled with this style.
*
*
* @type PathStyle
* @bean
*
*
* @example {@paperscript}
* project.currentStyle = {
* fillColor: 'red',
* strokeColor: 'black',
* strokeWidth: 5
* }
*
*
* // The following paths will take over all style properties of
* // the current style:
* var path = new Path.Circle(new Point(75, 50), 30);
* var path2 = new Path.Circle(new Point(175, 50), 20);
*
*
* @example {@paperscript}
* project.currentStyle.fillColor = 'red';
*
*
* // The following path will take over the fill color we just set:
* var path = new Path.Circle(new Point(75, 50), 30);
* var path2 = new Path.Circle(new Point(175, 50), 20);
@ -127,7 +127,7 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
/**
* The index of the project in the global projects array.
*
*
* @type Number
* @bean
*/
@ -137,7 +137,7 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
/**
* The selected items contained within the project.
*
*
* @type Item[]
* @bean
*/
@ -154,7 +154,7 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
},
// TODO: Implement setSelectedItems?
_updateSelection: function(item) {
if (item._selected) {
this._selectedItemCount++;
@ -164,7 +164,7 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
delete this._selectedItems[item.getId()];
}
},
/**
* Selects all items in the project.
*/
@ -183,9 +183,9 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
/**
* {@grouptitle Project Hierarchy}
*
*
* The layers contained within the project.
*
*
* @name Project#layers
* @type Layer[]
*/
@ -193,28 +193,28 @@ var Project = this.Project = Base.extend(/** @lends Project# */{
/**
* The layer which is currently active. New items will be created on this
* layer by default.
*
*
* @name Project#activeLayer
* @type Layer
*/
/**
* The symbols contained within the project.
*
*
* @name Project#symbols
* @type Symbol[]
*/
/**
* The views contained within the project.
*
*
* @name Project#views
* @type View[]
*/
/**
* The view which is currently active.
*
*
* @name Project#activeView
* @type View
*/

34
src/project/Symbol.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Symbol
*
*
* @class Symbols allow you to place multiple instances of an item in your
* project. This can save memory, since all instances of a symbol simply refer
* to the original item and it can speed up moving around complex objects, since
@ -26,10 +26,10 @@
var Symbol = this.Symbol = Base.extend(/** @lends Symbol# */{
/**
* Creates a Symbol item.
*
*
* @param {Item} item the source item which is copied as the definition of
* the symbol
*
*
* @example {@paperscript split=true height=240}
* // Placing 100 instances of a symbol:
* var path = new Path.Star(new Point(0, 0), 6, 5, 13);
@ -37,25 +37,25 @@ var Symbol = this.Symbol = Base.extend(/** @lends Symbol# */{
* fillColor: 'white',
* strokeColor: 'black'
* };
*
*
* // Create a symbol from the path:
* var symbol = new Symbol(path);
*
*
* // Remove the path:
* path.remove();
*
*
* // Place 100 instances of the symbol:
* for (var i = 0; i < 100; i++) {
* // Place an instance of the symbol in the project:
* var instance = symbol.place();
*
*
* // Move the instance to a random position within the view:
* instance.position = Point.random() * view.size;
*
*
* // Rotate the instance by a random amount between
* // 0 and 360 degrees:
* instance.rotate(Math.random() * 360);
*
*
* // Scale the instance between 0.25 and 1:
* instance.scale(0.25 + Math.random() * 0.75);
* }
@ -71,7 +71,7 @@ var Symbol = this.Symbol = Base.extend(/** @lends Symbol# */{
/**
* The project that this symbol belongs to.
*
*
* @type Project
* @readonly
* @name Symbol#project
@ -79,7 +79,7 @@ var Symbol = this.Symbol = Base.extend(/** @lends Symbol# */{
/**
* The symbol definition.
*
*
* @type Item
* @bean
*/
@ -97,7 +97,7 @@ var Symbol = this.Symbol = Base.extend(/** @lends Symbol# */{
/**
* Places in instance of the symbol in the project.
*
*
* @param [position] The position of the placed symbol.
* @return {PlacedSymbol}
*/
@ -107,7 +107,7 @@ var Symbol = this.Symbol = Base.extend(/** @lends Symbol# */{
/**
* Returns a copy of the symbol.
*
*
* @return {Symbol}
*/
clone: function() {

16
src/style/CharacterStyle.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -19,7 +19,7 @@
*
* @class The CharacterStyle object represents the character style of a text
* item ({@link TextItem#characterStyle})
*
*
* @extends PathStyle
*
* @classexample
@ -44,14 +44,14 @@ var CharacterStyle = this.CharacterStyle = PathStyle.extend(/** @lends Character
* CharacterStyle objects don't need to be created directly. Just pass an
* object to {@link TextItem#characterStyle}, it will be converted to a
* CharacterStyle object internally.
*
*
* @name CharacterStyle#initialize
* @param {object} style
*/
/**
* The font of the character style.
*
*
* @name CharacterStyle#font
* @default 'sans-serif'
* @type String
@ -59,7 +59,7 @@ var CharacterStyle = this.CharacterStyle = PathStyle.extend(/** @lends Character
/**
* The font size of the character style in points.
*
*
* @name CharacterStyle#fontSize
* @default 10
* @type Number

18
src/style/ParagraphStyle.js
View file

@ -1,29 +1,29 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name ParagraphStyle
*
*
* @class The ParagraphStyle object represents the paragraph style of a text
* item ({@link TextItem#paragraphStyle}).
*
*
* Currently, the ParagraphStyle object may seem a bit empty, with just the
* {@link #justification} property. Yet, we have lots in store for Paper.js
* when it comes to typography. Please stay tuned.
*
*
* @classexample
* var text = new PointText(new Point(0,0));
* text.fillColor = 'black';
@ -41,14 +41,14 @@ var ParagraphStyle = this.ParagraphStyle = Style.extend(/** @lends ParagraphStyl
* ParagraphStyle objects don't need to be created directly. Just pass an
* object to {@link TextItem#paragraphStyle}, it will be converted to a
* ParagraphStyle object internally.
*
*
* @name ParagraphStyle#initialize
* @param {object} style
*/
/**
* The justification of the paragraph.
*
*
* @name ParagraphStyle#justification
* @default 'left'
* @type String('left', 'right', 'center')

84
src/style/PathStyle.js
View file

@ -1,40 +1,40 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name PathStyle
*
*
* @class PathStyle is used for changing the visual styles of items
* contained within a Paper.js project and is returned by
* {@link Item#style} and {@link Project#currentStyle}.
*
*
* All properties of PathStyle are also reflected directly in {@link Item},
* i.e.: {@link Item#fillColor}.
*
*
* To set multiple style properties in one go, you can pass an object to
* {@link Item#style}. This is a convenient way to define a style once and
* apply it to a series of items:
*
*
* @classexample {@paperscript}
* var circleStyle = {
* fillColor: new RGBColor(1, 0, 0),
* strokeColor: 'black',
* strokeWidth: 5
* };
*
*
* var path = new Path.Circle(new Point(80, 50), 30);
* path.style = circleStyle;
*/
@ -65,49 +65,49 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
* PathStyle objects don't need to be created directly. Just pass an
* object to {@link Item#style} or {@link Project#currentStyle}, it will
* be converted to a PathStyle object internally.
*
*
* @name PathStyle#initialize
* @param {object} style
*/
/**
* {@grouptitle Stroke Style}
*
*
* The color of the stroke.
*
*
* @property
* @name PathStyle#strokeColor
* @type RGBColor|HSBColor|GrayColor
*
*
* @example {@paperscript}
* // Setting the stroke color of a path:
*
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var circle = new Path.Circle(new Point(80, 50), 35);
*
*
* // Set its stroke color to RGB red:
* circle.strokeColor = new RGBColor(1, 0, 0);
*/
/**
* The width of the stroke.
*
*
* @property
* @name PathStyle#strokeWidth
* @default 1
* @type Number
*
*
* @example {@paperscript}
* // Setting an item's stroke width:
*
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var circle = new Path.Circle(new Point(80, 50), 35);
*
*
* // Set its stroke color to black:
* circle.strokeColor = 'black';
*
*
* // Set its stroke width to 10:
* circle.strokeWidth = 10;
*/
@ -115,30 +115,30 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
/**
* The shape to be used at the end of open {@link Path} items, when they
* have a stroke.
*
*
* @property
* @name PathStyle#strokeCap
* @default 'butt'
* @type String('round', 'square', 'butt')
*
*
* @example {@paperscript height=200}
* // A look at the different stroke caps:
*
*
* var line = new Path(new Point(80, 50), new Point(420, 50));
* line.strokeColor = 'black';
* line.strokeWidth = 20;
*
*
* // Select the path, so we can see where the stroke is formed:
* line.selected = true;
*
*
* // Set the stroke cap of the line to be round:
* line.strokeCap = 'round';
*
*
* // Copy the path and set its stroke cap to be square:
* var line2 = line.clone();
* line2.position.y += 50;
* line2.strokeCap = 'square';
*
*
* // Make another copy and set its stroke cap to be butt:
* var line2 = line.clone();
* line2.position.y += 100;
@ -147,12 +147,12 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
/**
* The shape to be used at the corners of paths when they have a stroke.
*
*
* @property
* @name PathStyle#strokeJoin
* @default 'miter'
* @type String ('miter', 'round', 'bevel')
*
*
* @example {@paperscript height=120}
* // A look at the different stroke joins:
* var path = new Path();
@ -161,14 +161,14 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
* path.add(new Point(160, 100));
* path.strokeColor = 'black';
* path.strokeWidth = 20;
*
*
* // Select the path, so we can see where the stroke is formed:
* path.selected = true;
*
*
* var path2 = path.clone();
* path2.position.x += path2.bounds.width * 1.5;
* path2.strokeJoin = 'round';
*
*
* var path3 = path2.clone();
* path3.position.x += path3.bounds.width * 1.5;
* path3.strokeJoin = 'bevel';
@ -176,7 +176,7 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
/**
* The dash offset of the stroke.
*
*
* @property
* @name PathStyle#dashOffset
* @default 0
@ -185,15 +185,15 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
/**
* Specifies an array containing the dash and gap lengths of the stroke.
*
*
* @example {@paperscript}
* var path = new Path.Circle(new Point(80, 50), 40);
* path.strokeWidth = 2;
* path.strokeColor = 'black';
*
*
* // Set the dashed stroke to [10pt dash, 4pt gap]:
* path.dashArray = [10, 4];
*
*
* @property
* @name PathStyle#dashArray
* @default []
@ -206,7 +206,7 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
* specified for {@link #strokeJoin}, it is possible for the miter to extend
* far beyond the {@link #strokeWidth} of the path. The miterLimit imposes a
* limit on the ratio of the miter length to the {@link #strokeWidth}.
*
*
* @property
* @default 10
* @name PathStyle#miterLimit
@ -215,20 +215,20 @@ var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
/**
* {@grouptitle Fill Style}
*
*
* The fill color.
*
*
* @property
* @name PathStyle#fillColor
* @type RGBColor|HSBColor|GrayColor
*
*
* @example {@paperscript}
* // Setting the fill color of a path to red:
*
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var circle = new Path.Circle(new Point(80, 50), 35);
*
*
* // Set the fill color of the circle to RGB red:
* circle.fillColor = new RGBColor(1, 0, 0);
*/

8
src/style/Style.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

28
src/text/PointText.js
View file

@ -1,34 +1,34 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name PointText
*
*
* @class A PointText item represents a piece of typography in your Paper.js
* project which starts from a certain point and extends by the amount of
* characters contained in it.
*
*
* @extends TextItem
*/
var PointText = this.PointText = TextItem.extend(/** @lends PointText# */{
/**
* Creates a point text item
*
*
* @param {Point} point the position where the text will start
*
*
* @example
* var text = new PointText(new Point(50, 100));
* text.justification = 'center';
@ -51,7 +51,7 @@ var PointText = this.PointText = TextItem.extend(/** @lends PointText# */{
/**
* The PointText's anchor point
*
*
* @type Point
* @bean
*/
@ -63,17 +63,17 @@ var PointText = this.PointText = TextItem.extend(/** @lends PointText# */{
this._transform(new Matrix().translate(
Point.read(arguments).subtract(this._point)));
},
// TODO: Position should be the center point of the bounds but we currently
// don't support bounds for PointText.
getPosition: function() {
return this._point;
},
setPosition: function(point) {
this.setPoint.apply(this, arguments);
},
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
// We need to transform the LinkedPoint, passing true for dontNotify so
@ -81,7 +81,7 @@ var PointText = this.PointText = TextItem.extend(/** @lends PointText# */{
// recursion.
matrix._transformPoint(this._point, this._point, true);
},
draw: function(ctx) {
if (!this._content)
return;
@ -89,7 +89,7 @@ var PointText = this.PointText = TextItem.extend(/** @lends PointText# */{
ctx.font = this.getFontSize() + 'pt ' + this.getFont();
ctx.textAlign = this.getJustification();
this._matrix.applyToContext(ctx);
var fillColor = this.getFillColor();
var strokeColor = this.getStrokeColor();
if (!fillColor || !strokeColor)

34
src/text/TextItem.js
View file

@ -1,28 +1,28 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name TextItem
*
*
* @class The TextItem type allows you to create typography. Its
* functionality is inherited by different text item types such as
* {@link PointText}, and {@link AreaText} (coming soon). They each add a
* layer of functionality that is unique to their type, but share the
* underlying properties and functions that they inherit from TextItem.
*
*
* @extends Item
*/
var TextItem = this.TextItem = Item.extend(/** @lends TextItem# */{
@ -37,29 +37,29 @@ var TextItem = this.TextItem = Item.extend(/** @lends TextItem# */{
/**
* The text contents of the text item.
*
*
* @name TextItem#content
* @type String
*
*
* @example {@paperscript}
* // Setting the content of a PointText item:
*
*
* // Create a point-text item at {x: 30, y: 30}:
* var text = new PointText(new Point(30, 30));
* text.fillColor = 'black';
*
*
* // Set the content of the text item:
* text.content = 'Hello world';
*
*
* @example {@paperscript}
* // Interactive example, move your mouse over the view below:
*
*
* // Create a point-text item at {x: 30, y: 30}:
* var text = new PointText(new Point(30, 30));
* text.fillColor = 'black';
*
*
* text.content = 'Move your mouse over the view, to see its position';
*
*
* function onMouseMove(event) {
* // Each time the mouse is moved, set the content of
* // the point text to describe the position of the mouse:
@ -85,9 +85,9 @@ var TextItem = this.TextItem = Item.extend(/** @lends TextItem# */{
/**
* {@grouptitle Style Properties}
*
*
* The character style of the text item.
*
*
* @type CharacterStyle
* @bean
*/
@ -101,7 +101,7 @@ var TextItem = this.TextItem = Item.extend(/** @lends TextItem# */{
/**
* The paragraph style of the text item.
*
*
* @type ParagraphStyle
* @bean
*/

70
src/tool/Tool.js
View file

@ -1,46 +1,46 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name Tool
*
*
* @class The Tool object refers to a script that the user can interact with
* by using the mouse and keyboard and can be accessed through the global
* {@code tool} variable. All its properties are also available in the paper
* scope.
*
*
* The global {@code tool} variable only exists in scripts that contain mouse
* handler functions ({@link #onMouseMove}, {@link #onMouseDown},
* {@link #onMouseDrag}, {@link #onMouseUp}) or a keyboard handler
* function ({@link #onKeyDown}, {@link #onKeyUp}).
*
*
* @classexample
* var path;
*
*
* // Only execute onMouseDrag when the mouse
* // has moved at least 10 points:
* tool.distanceThreshold = 10;
*
*
* function onMouseDown(event) {
* // Create a new path every time the mouse is clicked
* path = new Path();
* path.add(event.point);
* path.strokeColor = 'black';
* }
*
*
* function onMouseDrag(event) {
* // Add a point to the path every time the mouse is dragged
* path.add(event.point);
@ -65,7 +65,7 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
* {@link #onMouseDrag} event. Setting this to an interval means the
* {@link #onMouseDrag} event is called repeatedly after the initial
* {@link #onMouseDown} until the user releases the mouse.
*
*
* @type Number
*/
eventInterval: null,
@ -73,7 +73,7 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
/**
* The minimum distance the mouse has to drag before firing the onMouseDrag
* event, since the last onMouseDrag event.
*
*
* @type Number
* @bean
*/
@ -92,7 +92,7 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
/**
* The maximum distance the mouse has to drag before firing the onMouseDrag
* event, since the last onMouseDrag event.
*
*
* @type Number
* @bean
*/
@ -125,15 +125,15 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
/**
* {@grouptitle Mouse Event Handlers}
*
*
* The function to be called when the mouse button is pushed down. The
* function receives a {@link ToolEvent} object which contains information
* about the mouse event.
*
*
* @name Tool#onMouseDown
* @property
* @type Function
*
*
* @example {@paperscript}
* // Creating circle shaped paths where the user presses the mouse button:
* function onMouseDown(event) {
@ -148,21 +148,21 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
* The function to be called when the mouse position changes while the mouse
* is being dragged. The function receives a {@link ToolEvent} object which
* contains information about the mouse event.
*
*
* This function can also be called periodically while the mouse doesn't
* move by setting the {@link #eventInterval}
*
*
* @name Tool#onMouseDrag
* @property
* @type Function
*
*
* @example {@paperscript}
* // Draw a line by adding a segment to a path on every mouse drag event:
*
*
* // Create an empty path:
* var path = new Path();
* path.strokeColor = 'black';
*
*
* function onMouseDrag(event) {
* // Add a segment to the path at the position of the mouse:
* path.add(event.point);
@ -173,18 +173,18 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
* The function to be called the mouse moves within the project view. The
* function receives a {@link ToolEvent} object which contains information
* about the mouse event.
*
*
* @name Tool#onMouseMove
* @property
* @type Function
*
*
* @example {@paperscript}
* // Moving a path to the position of the mouse:
*
*
* // Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
* var path = new Path.Circle([0, 0], 10);
* path.fillColor = 'black';
*
*
* function onMouseMove(event) {
* // Whenever the user moves the mouse, move the path
* // to that position:
@ -196,11 +196,11 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
* The function to be called when the mouse button is released. The function
* receives a {@link ToolEvent} object which contains information about the
* mouse event.
*
*
* @name Tool#onMouseUp
* @property
* @type Function
*
*
* @example {@paperscript}
* // Creating circle shaped paths where the user releases the mouse:
* function onMouseUp(event) {
@ -213,7 +213,7 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
/**
* {@grouptitle Keyboard Event Handlers}
*
*
* The function to be called when the user presses a key on the keyboard.
* The function receives a {@link KeyEvent} object which contains
* information about the keyboard event.
@ -221,23 +221,23 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
* prevented from bubbling up. This can be used for example to stop the
* window from scrolling, when you need the user to interact with arrow
* keys.
*
*
* @name Tool#onKeyDown
* @property
* @type Function
*
*
* @example {@paperscript}
* // Scaling a path whenever the user presses the space bar:
*
*
* // Create a circle shaped path:
* var path = new Path.Circle(new Point(50, 50), 30);
* path.fillColor = 'red';
*
*
* function onKeyDown(event) {
* if(event.key == 'space') {
* // Scale the path by 110%:
* path.scale(1.1);
*
*
* // Prevent the key event from bubbling
* return false;
* }
@ -252,11 +252,11 @@ var Tool = this.Tool = Base.extend(/** @lends Tool# */{
* prevented from bubbling up. This can be used for example to stop the
* window from scrolling, when you need the user to interact with arrow
* keys.
*
*
* @name Tool#onKeyUp
* @property
* @type Function
*
*
* @example
* function onKeyUp(event) {
* if(event.key == 'space') {

30
src/tool/ToolEvent.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name ToolEvent
*
*
* @class ToolEvent The ToolEvent object is received by the {@link Tool}'s mouse
* event handlers {@link Tool#onMouseDown}, {@link Tool#onMouseDrag},
* {@link Tool#onMouseMove} and {@link Tool#onMouseUp}. The ToolEvent
@ -43,18 +43,18 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
/**
* The position of the mouse in project coordinates when the event was
* fired.
*
*
* @example
* function onMouseDrag(event) {
* // the position of the mouse when it is dragged
* console.log(event.point);
* }
*
*
* function onMouseUp(event) {
* // the position of the mouse when it is released
* console.log(event.point);
* }
*
*
* @type Point
* @bean
*/
@ -69,7 +69,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
/**
* The position of the mouse in project coordinates when the previous
* event was fired.
*
*
* @type Point
* @bean
*/
@ -84,7 +84,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
/**
* The position of the mouse in project coordinates when the mouse button
* was last clicked.
*
*
* @type Point
* @bean
*/
@ -101,7 +101,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
* {@link #point}. This is a useful position to use when creating
* artwork based on the moving direction of the mouse, as returned by
* {@link #delta}.
*
*
* @type Point
* @bean
*/
@ -122,7 +122,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
* The difference between the current position and the last position of the
* mouse when the event was fired. In case of the mouseup event, the
* difference to the mousedown position is returned.
*
*
* @type Point
* @bean
*/
@ -143,7 +143,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
/**
* The number of times the mouse event was fired.
*
*
* @type Number
* @bean
*/
@ -176,7 +176,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
// }
// return item;
// }
//
//
// setItem: function(Item item) {
// this.item = item;
// }
@ -185,7 +185,7 @@ var ToolEvent = this.ToolEvent = Event.extend(/** @lends ToolEvent# */{
* @return {String} A string representation of the tool event.
*/
toString: function() {
return '{ type: ' + this.type
return '{ type: ' + this.type
+ ', point: ' + this.getPoint()
+ ', count: ' + this.getCount()
+ ', modifiers: ' + this.getModifiers()

8
src/ui/Event.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

14
src/ui/Key.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -59,7 +59,7 @@ var Key = this.Key = new function() {
// characters, we need to perform a little trickery here to use these codes
// in onKeyDown/Up: keydown is used to store the downCode and handle
// modifiers and special keys such as arrows, space, etc, keypress fires the
// actual onKeyDown event and maps the keydown keyCode to the keypress
// actual onKeyDown event and maps the keydown keyCode to the keypress
// charCode so keyup can do the right thing too.
charCodeMap = {}, // keyCode -> charCode mappings for pressed keys
keyMap = {}, // Map for currently pressed keys
@ -138,12 +138,12 @@ var Key = this.Key = new function() {
/**
* Checks whether the specified key is pressed.
*
*
* @param {String} key One of: 'backspace', 'enter', 'shift', 'control',
* 'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home',
* 'left', 'up', 'right', 'down', 'delete', 'command'
* @return {Boolean} {@true if the key is pressed}
*
*
* @example
* // Whenever the user clicks, create a circle shaped path. If the
* // 'a' key is pressed, fill it with red, otherwise fill it with blue:

18
src/ui/KeyEvent.js
View file

@ -1,22 +1,22 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
/**
* @name KeyEvent
*
*
* @class KeyEvent The KeyEvent object is received by the {@link Tool}'s
* keyboard handlers {@link Tool#onKeyDown}, {@link Tool#onKeyUp},
* The KeyEvent object is the only parameter passed to these functions
@ -35,21 +35,21 @@ var KeyEvent = this.KeyEvent = Event.extend(new function() {
/**
* The type of key event.
*
*
* @name KeyEvent#type
* @type String('keydown', 'keyup')
*/
/**
* The string character of the key that caused this key event.
*
*
* @name KeyEvent#character
* @type String
*/
/**
* The key that caused this key event.
*
*
* @name KeyEvent#key
* @type String
*/
@ -58,7 +58,7 @@ var KeyEvent = this.KeyEvent = Event.extend(new function() {
* @return {String} A string representation of the key event.
*/
toString: function() {
return '{ type: ' + this.type
return '{ type: ' + this.type
+ ', key: ' + this.key
+ ', character: ' + this.character
+ ', modifiers: ' + this.getModifiers()

34
src/ui/View.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/
@ -124,7 +124,7 @@ var View = this.View = Base.extend(/** @lends View# */{
/**
* The size of the view canvas. Changing the view's size will resize it's
* underlying canvas.
*
*
* @type Size
* @bean
*/
@ -152,7 +152,7 @@ var View = this.View = Base.extend(/** @lends View# */{
/**
* The bounds of the currently visible area in project coordinates.
*
*
* @type Rectangle
* @bean
*/
@ -189,7 +189,7 @@ var View = this.View = Base.extend(/** @lends View# */{
/**
* The zoom factor by which the project coordinates are magnified.
*
*
* @type Number
* @bean
*/
@ -206,7 +206,7 @@ var View = this.View = Base.extend(/** @lends View# */{
/**
* Checks whether the view is currently visible within the current browser
* viewport.
*
*
* @return {Boolean} Whether the view is visible.
*/
isVisible: function() {
@ -300,26 +300,26 @@ var View = this.View = Base.extend(/** @lends View# */{
* Handler function to be called on each frame of an animation.
* The function receives an event object which contains information about
* the frame event:
*
*
* <b>{@code event.count}</b>: the number of times the frame event was fired.
* <b>{@code event.time}</b>: the total amount of time passed since the first frame
* event in seconds.
* <b>{@code event.delta}</b>: the time passed in seconds since the last frame
* event.
*
*
* @example {@paperscript}
* // Creating an animation:
*
*
* // Create a rectangle shaped path with its top left point at:
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
* path.fillColor = 'black';
*
*
* function onFrame(event) {
* // Every frame, rotate the path by 3 degrees:
* path.rotate(3);
* }
*
*
* @type Function
* @bean
*/
@ -369,19 +369,19 @@ var View = this.View = Base.extend(/** @lends View# */{
/**
* Handler function that is called whenever a view is resized.
*
*
* @example
* // Repositioning items when a view is resized:
*
*
* // Create a circle shaped path in the center of the view:
* var path = new Path.Circle(view.bounds.center, 30);
* path.fillColor = 'red';
*
*
* function onResize(event) {
* // Whenever the view is resized, move the path to its center:
* path.position = view.center;
* }
*
*
* @type Function
*/
onResize: null

8
src/util/BlendMode.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

8
src/util/CanvasProvider.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/

8
src/util/Numerical.js
View file

@ -1,16 +1,16 @@
/*
* Paper.js
*
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/
* http://scriptographer.org/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
*
* All rights reserved.
*/