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

Merge remote branch 'origin/master'

Browse source
This commit is contained in:
Jonathan Puckey 2011-07-04 15:10:26 +02:00
commit 724fdcd727
122 changed files with 4141 additions and 1713 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -100,7 +100,7 @@ Also, in your first contribution, add yourself to the end of `AUTHORS.md` (which
As mentioned earlier in this article, we prefer that you send a [*pull request*](http://help.github.com/pull-requests/) on GitHub.
1. Create a fork of the upstream repository by visiting <https://github.com/paperjs/paper.js/fork>. If you feel insecure, here's a great guide: <http://help.github.com/forking/>
1. Create a fork of the upstream repository by visiting <https://github.com/paperjs/paper.js/fork>. If you feel insecure, here's a great guide: <http://help.github.com/forking/>
2. Clone of your repository: `git clone https://yourusername@github.com/yourusername/paper.js.git`
@ -117,7 +117,7 @@ If you are fixing a ticket, a convenient way to name the branch is to use the UR
Before we can accept any contributions to Paper.js, you need to sign this [CLA](http://en.wikipedia.org/wiki/Contributor_License_Agreement):
[http://paperjs.org/cla.html](http://paperjs.org/cla.html)
[Contributor License Agreement](https://spreadsheets.google.com/a/paperjs.org/spreadsheet/embeddedform?formkey=dENxd0JBVDY2REo3THVuRmh4YjdWRlE6MQ)
> The purpose of this agreement is to clearly define the terms under which intellectual property has been contributed to Paper.js and thereby allow us to defend the project should there be a legal dispute regarding the software at some future time.

4
build/build.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
# Usage:
# build.sh MODE

4
build/dist.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
echo "Building paper.js"
./build.sh

4
build/docs.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
# Generate documentation
#

2
build/jsdoc-toolkit

@ -1 +1 @@
Subproject commit 122c76276bddfbd9e0fc1c41b8fa33019fbc4f05
Subproject commit 87368e6dcbcd01b5fae9c1fbc5af558603d0af79

4
build/load.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
# Generate a paper.js file that uses load.js to directly load the library
# through the seperate source files in the src directory. Very useful during

4
build/parse-js.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
# Generate a paper.js file that uses load.js to directly load the library
# through the seperate source files in the src directory. Very useful during

4
build/preprocess.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
# preprocess.sh
#

4
build/zip.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/
#
# All rights reserved. See LICENSE file for details.
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.
if [ -f paperjs.zip ]
then

2
dist/docs/resources/js/paper.js vendored
View file

@ -5010,7 +5010,7 @@ var TextItem = this.TextItem = Item.extend({
setContent: function(content) {
this._changed(Change.CONTENT);
this._content = content;
this._content = '' + content;
},
getCharacterStyle: function() {

117
dist/paper.js vendored
View file

File diff suppressed because one or more lines are too long

2
examples/Animated/AnimatedStar.html
View file

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

2
examples/Animated/Extruded.html
View file

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

2
examples/Animated/FutureSplash.html
View file

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

2
examples/Animated/Lines.html
View file

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

2
examples/Animated/RadialRainbows.html
View file

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

4
examples/Animated/Raster.html
View file

@ -1,8 +1,8 @@
<!-- <!DOCTYPE html> -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<title>Raster</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">

2
examples/Animated/RoundedRectangles.html
View file

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

2
examples/Animated/Smoothing.html
View file

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

2
examples/Animated/Space.html
View file

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

2
examples/Animated/Tadpoles.html
View file

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

2
examples/Scripts/Arcs.html
View file

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

2
examples/Scripts/BouncingBalls.html
View file

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

2
examples/Scripts/Chain.html
View file

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

2
examples/Scripts/Circle.html
View file

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

2
examples/Scripts/CompoundPath.html
View file

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

2
examples/Scripts/CurveTimeParametrization.html → examples/Scripts/CurveTimeParameterization.html
View file

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

4
examples/Scripts/DivisionRaster.html
View file

@ -1,8 +1,8 @@
<!-- <!DOCTYPE html> -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<title>Division Raster</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">

2
examples/Scripts/Fitting.html
View file

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

2
examples/Scripts/Letter.html
View file

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

4
examples/Scripts/PathStructure.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<title>Path Structure</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -15,7 +15,7 @@
for (var i = 0; i < 3; i++) {
var text = new PointText();
text.content = '' + i;
text.content = i;
text.justification = 'center';
text.fontSize = 9;
segmentTexts.push(text);

2
examples/Scripts/PhyllotaxisRaster.html
View file

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

4
examples/Scripts/RotationRaster.html
View file

@ -1,8 +1,8 @@
<!-- <!DOCTYPE html> -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<title>Rotation Raster</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">

2
examples/Scripts/RoundRectangle.html
View file

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

14
examples/Scripts/StrokeBounds.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<title>Stroke Bounds</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
@ -17,13 +17,12 @@
path.arcTo([250, 20], false);
path.rotate(-5);
path.strokeWidth = 30;
paths.push(path);
path.miterLimit = 3;
paths.push(path);
return path;
}
var path = makePath();
path.fullySelected = true;
path.strokeColor = 'black';
path.strokeCap = 'butt';
path.strokeJoin = 'round';
@ -70,14 +69,19 @@
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
path.fullySelected = true;
path.scale(1.5, new Point(300, 0));
var rect = new Path.Rectangle(path.strokeBounds);
rect.strokeWidth = 0.25;
rect.strokeColor = 'black'
rect.strokeColor = 'black';
rect.fillColor = null;
var rect = new Path.Rectangle(path.bounds);
rect.strokeWidth = 0.25;
rect.strokeColor = 'red'
rect.strokeColor = 'red';
rect.fillColor = null;
var rect = new Path.Rectangle(path.controlBounds);
rect.strokeWidth = 0.25;
rect.strokeColor = 'green';
rect.fillColor = null;
}

2
examples/Tools/BezierTool.html
View file

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

2
examples/Tools/Circles.html
View file

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

2
examples/Tools/Clouds.html
View file

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

2
examples/Tools/Dripping Brush.html → examples/Tools/DrippingBrush.html
View file

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

2
examples/Tools/Fancy Brush.html → examples/Tools/FancyBrush.html
View file

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

2
examples/Tools/Grid.html
View file

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

2
examples/Tools/MetaBalls.html
View file

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

2
examples/Tools/MultiLines.html
View file

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

2
examples/Tools/Simplify.html
View file

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

2
examples/Tools/SquareRounded.html
View file

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

2
examples/Tools/Stars.html
View file

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

2
examples/Tools/Vektor.html
View file

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

2
examples/Tools/Wave.html
View file

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

2
examples/Tools/Worm Farm.html → examples/Tools/WormFarm.html
View file

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

2
lib/parse-js-min.js vendored
View file

File diff suppressed because one or more lines are too long

1969
lib/parse-js-unicode.js Normal file
View file

File diff suppressed because it is too large Load diff

275
lib/parse-js.js
View file

@ -1,16 +1,16 @@
/**
* A JavaScript tokenizer / parser / generator.
*
* Distributed under the BSD license.
*
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
* http://marijn.haverbeke.nl/parse-js/
*
* Ported by to JavaScript by Mihai Bazon
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
* http://mihai.bazon.net/blog/
*
* Modifications and adaption to browser (c) 2011, Juerg Lehni
*
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
* http://lehni.org/
*
* Based on parse-js, (c) Marijn Haverbeke
* http://marijn.haverbeke.nl/parse-js/
*
* Distributed under the BSD license.
*/
var parse_js = new function() {
@ -140,7 +140,6 @@ var OPERATORS = array_to_hash([
">>=",
"<<=",
">>>=",
"%=",
"|=",
"^=",
"&=",
@ -158,22 +157,29 @@ var REGEXP_MODIFIERS = array_to_hash(characters("gmsiy"));
/* -----[ Tokenizer ]----- */
function is_alphanumeric_char(ch) {
function is_letter(ch) {
ch = ch.charCodeAt(0);
return (ch >= 48 && ch <= 57) ||
(ch >= 65 && ch <= 90) ||
return (ch >= 65 && ch <= 90) ||
(ch >= 97 && ch <= 122);
};
function is_identifier_char(ch) {
return is_alphanumeric_char(ch) || ch == "$" || ch == "_";
};
function is_digit(ch) {
ch = ch.charCodeAt(0);
return ch >= 48 && ch <= 57;
};
function is_alphanumeric_char(ch) {
return is_digit(ch) || is_letter(ch);
};
function is_identifier_start(ch) {
return ch == "$" || ch == "_" || is_letter(ch);
};
function is_identifier_char(ch) {
return is_identifier_start(ch) || is_digit(ch);
};
function parse_js_number(num) {
if (RE_HEX_NUMBER.test(num)) {
return parseInt(num.substr(2), 16);
@ -308,7 +314,7 @@ function tokenizer($TEXT) {
if (ch == "+") return after_e;
after_e = false;
if (ch == ".") {
if (!has_dot)
if (!has_dot && !has_x)
return has_dot = true;
return false;
}
@ -486,7 +492,7 @@ function tokenizer($TEXT) {
if (ch == ".") return handle_dot();
if (ch == "/") return handle_slash();
if (HOP(OPERATOR_CHARS, ch)) return read_operator();
if (is_identifier_char(ch)) return read_word();
if (ch == "\\" || is_identifier_start(ch)) return read_word();
parse_error("Unexpected character '" + ch + "'");
};
@ -565,7 +571,7 @@ function NodeWithToken(str, start, end) {
NodeWithToken.prototype.toString = function() { return this.name; };
function parse($TEXT, strict_mode, embed_tokens) {
function parse($TEXT, exigent_mode, embed_tokens) {
var S = {
input : typeof $TEXT == "string" ? tokenizer($TEXT, true) : $TEXT,
@ -628,7 +634,7 @@ function parse($TEXT, strict_mode, embed_tokens) {
function expect(punc) { return expect_token("punc", punc); };
function can_insert_semicolon() {
return !strict_mode && (
return !exigent_mode && (
S.token.nlb || is("eof") || is("punc", "}")
);
};
@ -653,14 +659,17 @@ function parse($TEXT, strict_mode, embed_tokens) {
return str instanceof NodeWithToken ? str : new NodeWithToken(str, start, end);
};
var statement = embed_tokens ? function() {
var start = S.token;
var ast = $statement.apply(this, arguments);
ast[0] = add_tokens(ast[0], start, prev());
return ast;
} : $statement;
function maybe_embed_tokens(parser) {
if (embed_tokens) return function() {
var start = S.token;
var ast = parser.apply(this, arguments);
ast[0] = add_tokens(ast[0], start, prev());
return ast;
};
else return parser;
};
function $statement() {
var statement = maybe_embed_tokens(function() {
if (is("operator", "/")) {
S.peeked = null;
S.token = S.input(true); // force regexp
@ -754,12 +763,12 @@ function parse($TEXT, strict_mode, embed_tokens) {
unexpected();
}
}
};
});
function labeled_statement(label) {
S.labels.push(label);
var start = S.token, stat = statement();
if (strict_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
if (exigent_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
unexpected(start);
S.labels.pop();
return as("label", label, stat);
@ -770,7 +779,10 @@ function parse($TEXT, strict_mode, embed_tokens) {
};
function break_cont(type) {
var name = is("name") ? S.token.value : null;
var name;
if (!can_insert_semicolon()) {
name = is("name") ? S.token.value : null;
}
if (name != null) {
next();
if (!member(name, S.labels))
@ -784,36 +796,35 @@ function parse($TEXT, strict_mode, embed_tokens) {
function for_() {
expect("(");
var has_var = is("keyword", "var");
if (has_var)
next();
if (is("name") && is_token(peek(), "operator", "in")) {
// for (i in foo)
var name = S.token.value;
next(); next();
var obj = expression();
expect(")");
return as("for-in", has_var, name, obj, in_loop(statement));
} else {
// classic for
var init = is("punc", ";") ? null : has_var ? var_() : expression();
expect(";");
var test = is("punc", ";") ? null : expression();
expect(";");
var step = is("punc", ")") ? null : expression();
expect(")");
return as("for", init, test, step, in_loop(statement));
var init = null;
if (!is("punc", ";")) {
init = is("keyword", "var")
? (next(), var_(true))
: expression(true, true);
if (is("operator", "in"))
return for_in(init);
}
return regular_for(init);
};
var function_ = embed_tokens ? function() {
var start = prev();
var ast = $function_.apply(this, arguments);
ast[0] = add_tokens(ast[0], start, prev());
return ast;
} : $function_;
function regular_for(init) {
expect(";");
var test = is("punc", ";") ? null : expression();
expect(";");
var step = is("punc", ")") ? null : expression();
expect(")");
return as("for", init, test, step, in_loop(statement));
};
function $function_(in_statement) {
function for_in(init) {
var lhs = init[0] == "var" ? as("name", init[1][0]) : init;
next();
var obj = expression();
expect(")");
return as("for-in", init, lhs, obj, in_loop(statement));
};
var function_ = maybe_embed_tokens(function(in_statement) {
var name = is("name") ? prog1(S.token.value, next) : null;
if (in_statement && !name)
unexpected();
@ -841,7 +852,7 @@ function parse($TEXT, strict_mode, embed_tokens) {
S.in_loop = loop;
return a;
})());
};
});
function if_() {
var cond = parenthesised(), body = statement(), belse;
@ -910,7 +921,7 @@ function parse($TEXT, strict_mode, embed_tokens) {
return as("try", body, bcatch, bfinally);
};
function vardefs() {
function vardefs(no_in) {
var a = [];
for (;;) {
if (!is("name"))
@ -919,7 +930,7 @@ function parse($TEXT, strict_mode, embed_tokens) {
next();
if (is("operator", "=")) {
next();
a.push([ name, expression(false) ]);
a.push([ name, expression(false, no_in) ]);
} else {
a.push([ name ]);
}
@ -930,8 +941,8 @@ function parse($TEXT, strict_mode, embed_tokens) {
return a;
};
function var_() {
return as("var", vardefs());
function var_(no_in) {
return as("var", vardefs(no_in));
};
function const_() {
@ -949,7 +960,7 @@ function parse($TEXT, strict_mode, embed_tokens) {
return subscripts(as("new", newexp, args), true);
};
function expr_atom(allow_calls) {
var expr_atom = maybe_embed_tokens(function(allow_calls) {
if (is("operator", "new")) {
next();
return new_();
@ -984,7 +995,7 @@ function parse($TEXT, strict_mode, embed_tokens) {
return subscripts(prog1(atom, next), allow_calls);
}
unexpected();
};
});
function expr_list(closing, allow_trailing_comma, allow_empty) {
var first = true, a = [];
@ -1002,14 +1013,14 @@ function parse($TEXT, strict_mode, embed_tokens) {
};
function array_() {
return as("array", expr_list("]", !strict_mode, true));
return as("array", expr_list("]", !exigent_mode, true));
};
function object_() {
var first = true, a = [];
while (!is("punc", "}")) {
if (first) first = false; else expect(",");
if (!strict_mode && is("punc", "}"))
if (!exigent_mode && is("punc", "}"))
// allow trailing comma
break;
var type = S.token.type;
@ -1072,64 +1083,68 @@ function parse($TEXT, strict_mode, embed_tokens) {
return as(tag, op, expr);
};
function expr_op(left, min_prec) {
function expr_op(left, min_prec, no_in) {
var op = is("operator") ? S.token.value : null;
if (op && op == "in" && no_in) op = null;
var prec = op != null ? PRECEDENCE[op] : null;
if (prec != null && prec > min_prec) {
next();
var right = expr_op(expr_atom(true), prec);
return expr_op(as("binary", op, left, right), min_prec);
var right = expr_op(expr_atom(true), prec, no_in);
return expr_op(as("binary", op, left, right), min_prec, no_in);
}
return left;
};
function expr_ops() {
return expr_op(expr_atom(true), 0);
function expr_ops(no_in) {
return expr_op(expr_atom(true), 0, no_in);
};
function maybe_conditional() {
var expr = expr_ops();
function maybe_conditional(no_in) {
var expr = expr_ops(no_in);
if (is("operator", "?")) {
next();
var yes = expression(false);
expect(":");
return as("conditional", expr, yes, expression(false));
return as("conditional", expr, yes, expression(false, no_in));
}
return expr;
};
function is_assignable(expr) {
if (!exigent_mode) return true;
switch (expr[0]) {
case "dot":
case "sub":
case "new":
case "call":
return true;
case "name":
return expr[1] != "this";
}
};
function maybe_assign() {
var left = maybe_conditional(), val = S.token.value;
function maybe_assign(no_in) {
var left = maybe_conditional(no_in), val = S.token.value;
if (is("operator") && HOP(ASSIGNMENT, val)) {
if (is_assignable(left)) {
next();
return as("assign", ASSIGNMENT[val], left, maybe_assign());
return as("assign", ASSIGNMENT[val], left, maybe_assign(no_in));
}
croak("Invalid assignment");
}
return left;
};
function expression(commas) {
var expression = maybe_embed_tokens(function(commas, no_in) {
if (arguments.length == 0)
commas = true;
var expr = maybe_assign();
var expr = maybe_assign(no_in);
if (commas && is("punc", ",")) {
next();
return as("seq", expr, expression());
return as("seq", expr, expression(true, no_in));
}
return expr;
};
});
function in_loop(cont) {
try {
@ -1159,6 +1174,12 @@ function ast_walker() {
return a;
}) ];
};
function _block(statements) {
var out = [ this[0] ];
if (statements != null)
out.push(MAP(statements, walk));
return out;
};
var walkers = {
"string": function(str) {
return [ this[0], str ];
@ -1172,12 +1193,8 @@ function ast_walker() {
"toplevel": function(statements) {
return [ this[0], MAP(statements, walk) ];
},
"block": function(statements) {
var out = [ this[0] ];
if (statements != null)
out.push(MAP(statements, walk));
return out;
},
"block": _block,
"splice": _block,
"var": _vardefs,
"const": _vardefs,
"try": function(t, c, f) {
@ -1230,8 +1247,8 @@ function ast_walker() {
"for": function(init, cond, step, block) {
return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
},
"for-in": function(has_var, key, hash, block) {
return [ this[0], has_var, key, walk(hash), walk(block) ];
"for-in": function(vvar, key, hash, block) {
return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
},
"while": function(cond, block) {
return [ this[0], walk(cond), walk(block) ];
@ -1340,6 +1357,7 @@ function empty(b) {
var DOT_CALL_NO_PARENS = array_to_hash([
"name",
"array",
"object",
"string",
"dot",
"sub",
@ -1362,29 +1380,34 @@ function make_string(str) {
}
return s;
});
if (dq > sq) {
return "'" + str.replace(/\x27/g, "\\'") + "'";
} else {
return '"' + str.replace(/\x22/g, '\\"') + '"';
}
if (dq > sq) return "'" + str.replace(/\x27/g, "\\'") + "'";
else return '"' + str.replace(/\x22/g, '\\"') + '"';
};
function gen_code(ast, beautify) {
if (beautify) beautify = defaults(beautify, {
var SPLICE_NEEDS_BRACKETS = array_to_hash([ "if", "while", "do", "for", "for-in", "with" ]);
function gen_code(ast, options) {
options = defaults(options, {
indent_start : 0,
indent_level : 4,
quote_keys : false,
space_colon : false
space_colon : false,
beautify : false
});
var beautify = !!options.beautify;
var indentation = 0,
newline = beautify ? "\n" : "",
space = beautify ? " " : "";
function make_name(name) {
return name.toString();
};
function indent(line) {
if (line == null)
line = "";
if (beautify)
line = new Array(beautify.indent_start + indentation * beautify.indent_level).join(" ") + line;
line = repeat_string(" ", options.indent_start + indentation * options.indent_level) + line;
return line;
};
@ -1438,7 +1461,7 @@ function gen_code(ast, beautify) {
};
function needs_parens(expr) {
if (expr[0] == "function") {
if (expr[0] == "function" || expr[0] == "object") {
// dot/call on a literal function requires the
// function literal itself to be parenthesized
// only if it's the first "thing" in a
@ -1450,9 +1473,8 @@ function gen_code(ast, beautify) {
var a = slice($stack), self = a.pop(), p = a.pop();
while (p) {
if (p[0] == "stat") return true;
if ((p[0] == "seq" && p[1] === self) ||
(p[0] == "call" && p[1] === self) ||
(p[0] == "binary" && p[2] === self)) {
if (((p[0] == "seq" || p[0] == "call" || p[0] == "dot" || p[0] == "sub" || p[0] == "conditional") && p[1] === self) ||
((p[0] == "binary" || p[0] == "assign" || p[0] == "unary-postfix") && p[2] === self)) {
self = p;
p = a.pop();
} else {
@ -1486,6 +1508,19 @@ function gen_code(ast, beautify) {
return make_block_statements(statements)
.join(newline + newline);
},
"splice": function(statements) {
var parent = $stack[$stack.length - 2][0];
if (HOP(SPLICE_NEEDS_BRACKETS, parent)) {
// we need block brackets in this case
return make_block.apply(this, arguments);
} else {
return MAP(make_block_statements(statements, true),
function(line, i) {
// the first line is already indented
return i > 0 ? indent(line) : line;
}).join(newline);
}
},
"block": make_block,
"var": function(defs) {
return "var " + add_commas(MAP(defs, make_1vardef)) + ";";
@ -1547,9 +1582,10 @@ function gen_code(ast, beautify) {
},
"dot": function(expr) {
var out = make(expr), i = 1;
if (expr[0] == "num")
out += ".";
else if (needs_parens(expr))
if (expr[0] == "num") {
if (!/\./.test(expr[1]))
out += ".";
} else if (needs_parens(expr))
out = "(" + out + ")";
while (i < arguments.length)
out += "." + make_name(arguments[i++]);
@ -1582,12 +1618,11 @@ function gen_code(ast, beautify) {
out.push("(" + args + ")", make(block));
return add_spaces(out);
},
"for-in": function(has_var, key, hash, block) {
var out = add_spaces([ "for", "(" ]);
if (has_var)
out += "var ";
out += add_spaces([ make_name(key) + " in " + make(hash) + ")", make(block) ]);
return out;
"for-in": function(vvar, key, hash, block) {
return add_spaces([ "for", "(" +
(vvar ? make(vvar).replace(/;+$/, "") : make(key)),
"in",
make(hash) + ")", make(block) ]);
},
"while": function(condition, block) {
return add_spaces([ "while", "(" + make(condition) + ")", make(block) ]);
@ -1645,7 +1680,7 @@ function gen_code(ast, beautify) {
return indent(make_function(p[0], p[1][2], p[1][3], p[2]));
}
var key = p[0], val = make(p[1]);
if (beautify && beautify.quote_keys) {
if (options.quote_keys) {
key = make_string(key);
} else if ((typeof key == "number" || !beautify && +key + "" == key)
&& parseFloat(key) >= 0) {
@ -1653,7 +1688,7 @@ function gen_code(ast, beautify) {
} else if (!is_identifier(key)) {
key = make_string(key);
}
return indent(add_spaces(beautify && beautify.space_colon
return indent(add_spaces(beautify && options.space_colon
? [ key, ":", val ]
: [ key + ":", val ]));
}).join("," + newline);
@ -1726,11 +1761,7 @@ function gen_code(ast, beautify) {
return add_spaces([ out, make_block(body) ]);
};
function make_name(name) {
return name.toString();
};
function make_block_statements(statements) {
function make_block_statements(statements, noindent) {
for (var a = [], last = statements.length - 1, i = 0; i <= last; ++i) {
var stat = statements[i];
var code = make(stat);
@ -1748,7 +1779,7 @@ function gen_code(ast, beautify) {
a.push(code);
}
}
return MAP(a, indent);
return noindent ? a : MAP(a, indent);
};
function make_switch_block(body) {
@ -1779,7 +1810,7 @@ function gen_code(ast, beautify) {
function make_1vardef(def) {
var name = def[0], val = def[1];
if (val != null)
name = add_spaces([ name, "=", make(val) ]);
name = add_spaces([ make_name(name), "=", parenthesize(val, "seq") ]);
return name;
};
@ -1836,6 +1867,10 @@ function member(name, array) {
return false;
};
function repeat_string(str, i) {
return i < 1 ? "" : new Array(i + 1).join(str);
};
function defaults(args, defs) {
var ret = {};
if (args === true)

20
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*/

146
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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,31 +116,31 @@ 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.
* @param {Number} sy The y-axis scaling factor.
* @param {Number} hor The horizontal scaling factor.
* @param {Number} ver The vertical scaling factor.
* @param {Point} [center] The center for the scaling
* transformation.
* @return {Matrix} This affine transform.
*/
scale: function(sx, sy /* | scale */, center) {
if (arguments.length < 2 || typeof sy === 'object') {
// sx is the single scale parameter, representing both sx and sy
// Read center first from argument 1, then set sy = sx (thus
scale: function(hor, ver /* | scale */, center) {
if (arguments.length < 2 || typeof ver === 'object') {
// hor is the single scale parameter, representing both hor and ver
// Read center first from argument 1, then set ver = hor (thus
// modifing the content of argument 1!)
center = Point.read(arguments, 1);
sy = sx;
ver = hor;
} else {
center = Point.read(arguments, 2);
}
if (center)
this.translate(center);
this._m00 *= sx;
this._m10 *= sx;
this._m01 *= sy;
this._m11 *= sy;
this._m00 *= hor;
this._m10 *= hor;
this._m01 *= ver;
this._m11 *= ver;
if (center)
this.translate(center.negate());
return this;
@ -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,19 +208,19 @@ 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.
* @param {Number} shy The y shear factor.
* @param {Number} hor The horizontal shear factor.
* @param {Number} ver The vertical shear factor.
* @param {Point} [center] The center for the shear transformation.
* @return {Matrix} This affine transform.
*/
shear: function(shx, shy, center) {
shear: function(hor, ver, center) {
// See #scale() for explanation of this:
if (arguments.length < 2 || typeof shy === 'object') {
if (arguments.length < 2 || typeof ver === 'object') {
center = Point.read(arguments, 1);
sy = sx;
ver = hor;
} else {
center = Point.read(arguments, 2);
}
@ -228,10 +228,10 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
this.translate(center);
var m00 = this._m00;
var m10 = this._m10;
this._m00 += shy * this._m01;
this._m10 += shy * this._m11;
this._m01 += shx * m00;
this._m11 += shx * m10;
this._m00 += ver * this._m01;
this._m10 += ver * this._m11;
this._m01 += hor * m00;
this._m11 += hor * m10;
if (center)
this.translate(center.negate());
return this;
@ -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) {
@ -416,9 +416,9 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
},
getScaling: function() {
var sx = Math.sqrt(this._m00 * this._m00 + this._m10 * this._m10),
sy = Math.sqrt(this._m01 * this._m01 + this._m11 * this._m11);
return new Point(this._m00 < 0 ? -sx : sx, this._m01 < 0 ? -sy : sy);
var hor = Math.sqrt(this._m00 * this._m00 + this._m10 * this._m10),
ver = Math.sqrt(this._m01 * this._m01 + this._m11 * this._m11);
return new Point(this._m00 < 0 ? -hor : hor, this._m01 < 0 ? -ver : ver);
},
/**
@ -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,18 +489,18 @@ 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.
*
* @param {Number} hor The horizontal scaling factor.
* @param {Number} ver The vertical scaling factor.
* @return {Matrix} This affine transform.
*/
setToScale: function(sx, sy) {
return this.set(sx, 0, 0, sy, 0, 0);
setToScale: function(hor, ver) {
return this.set(hor, 0, 0, ver, 0, 0);
},
/**
* 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,18 +512,18 @@ 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.
*
* @param {Number} hor The horizontal shear factor.
* @param {Number} ver The vertical shear factor.
* @return {Matrix} This affine transform.
*/
setToShear: function(shx, shy) {
return this.set(1, shy, shx, 1, 0, 0);
setToShear: function(hor, ver) {
return this.set(1, ver, hor, 1, 0, 0);
},
/**
* 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,20 +563,20 @@ 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.
*
* @param {Number} hor The horizontal scaling factor.
* @param {Number} ver The vertical scaling factor.
* @return {Matrix} A transform representing a scaling
* transformation.
*/
getScaleInstance: function(sx, sy) {
getScaleInstance: function(hor, ver) {
var mx = new Matrix();
return mx.setToScale.apply(mx, arguments);
},
/**
* 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,19 +589,19 @@ 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.
*
* @param {Number} hor The horizontal shear factor.
* @param {Number} ver The vertical shear factor.
* @return {Matrix} A transform representing a shearing transformation.
*/
getShearInstance: function(shx, shy, center) {
getShearInstance: function(hor, ver, center) {
var mx = new Matrix();
return mx.setToShear.apply(mx, arguments);
},
/**
* 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.

210
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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({

138
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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);

122
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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({

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

112
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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);

18
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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}
*/

78
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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) {

38
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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:

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

36
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*/

12
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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;

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

34
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*/

431
src/item/Item.js
View file

File diff suppressed because it is too large Load diff

26
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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();

54
src/item/PlacedItem.js Normal file
View file

@ -0,0 +1,54 @@
/*
* 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/
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name PlacedItem
*
* @class The PlacedItem class is the base for any items that have a matrix
* associated with them, describing their placement in the project, such as
* {@link Raster} and {@link PlacedSymbol}.
*
* @extends Item
*/
var PlacedItem = this.PlacedItem = Item.extend(/** @lends PlacedItem# */{
_transform: function(matrix, flags) {
// In order to set the right context transformation when drawing the
// raster, simply preconcatenate the internal matrix with the provided
// one.
this._matrix.preConcatenate(matrix);
},
/**
* The item's transformation matrix, defining position and dimensions in the
* document.
*
* @type Matrix
* @bean
*/
getMatrix: function() {
return this._matrix;
},
setMatrix: function(matrix) {
this._matrix = matrix.clone();
this._changed(Change.GEOMETRY);
},
getStrokeBounds: function() {
return this.getBounds();
}
});

57
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*
* @extends PlacedItem
*/
var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
var PlacedSymbol = this.PlacedSymbol = PlacedItem.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);
* }
@ -64,7 +64,7 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
initialize: function(symbol, matrixOrOffset) {
this.base();
this.symbol = symbol instanceof Symbol ? symbol : new Symbol(symbol);
this.matrix = matrixOrOffset !== undefined
this._matrix = matrixOrOffset !== undefined
? matrixOrOffset instanceof Matrix
? matrixOrOffset
: new Matrix().translate(Point.read(arguments, 1))
@ -73,40 +73,29 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
/**
* The symbol that the placed symbol refers to:
*
*
* @name PlacedSymbol#symbol
* @type Symbol
*/
clone: function() {
return this._clone(new PlacedSymbol(this.symbol, this.matrix.clone()));
},
_transform: function(matrix, flags) {
// In order to set the right context transformation when drawing the
// raster, simply preconcatenate the internal matrix with the provided
// one.
this.matrix.preConcatenate(matrix);
return this._clone(new PlacedSymbol(this.symbol, this._matrix.clone()));
},
getBounds: function() {
if (!this._bounds)
this._bounds = this._createBounds(
this.symbol._definition.getStrokeBounds(this.matrix))
this.symbol._definition.getStrokeBounds(this._matrix))
return this._bounds;
},
getStrokeBounds: function() {
return this.getBounds();
},
draw: function(ctx, param) {
if (param.selection) {
Item.drawSelectedBounds(this.symbol._definition.getStrokeBounds(),
ctx, this.matrix);
ctx, this._matrix);
} else {
ctx.save();
this.matrix.applyToContext(ctx);
this._matrix.applyToContext(ctx);
Item.draw(this.symbol.getDefinition(), ctx, param);
ctx.restore();
}

70
src/item/Raster.js
View file

@ -1,31 +1,33 @@
/*
* 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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name Raster
*
* @class The Raster item represents an image in a Paper.js project.
* @extends Item
*
* @extends PlacedItem
*/
var Raster = this.Raster = Item.extend(/** @lends Raster# */{
var Raster = this.Raster = PlacedItem.extend(/** @lends Raster# */{
// TODO: Implement url / type, width, height.
// TODO: Have PlacedSymbol & Raster inherit from a shared class?
// DOCS: Document Raster constructor.
/**
* Creates a new raster item and places it in the active layer.
*
*
* @param {HTMLImageElement|Canvas|string} [object]
*/
initialize: function(object) {
@ -40,7 +42,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
//#endif // BROWSER
this.setImage(object);
}
this.matrix = new Matrix();
this._matrix = new Matrix();
},
clone: function() {
@ -52,13 +54,13 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
image.getContext('2d').drawImage(this._canvas, 0, 0);
}
var copy = new Raster(image);
copy.matrix = this.matrix.clone();
copy._matrix = this._matrix.clone();
return this._clone(copy);
},
/**
* The size of the raster in pixels.
*
*
* @type Size
* @bean
*/
@ -78,7 +80,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The width of the raster in pixels.
*
*
* @type Number
* @bean
*/
@ -88,7 +90,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The height of the raster in pixels.
*
*
* @type Number
* @bean
*/
@ -98,12 +100,12 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* Pixels per inch of the raster at its current size.
*
*
* @type Size
* @bean
*/
getPpi: function() {
var matrix = this.matrix,
var matrix = this._matrix,
orig = new Point(0, 0).transform(matrix),
u = new Point(1, 0).transform(matrix).subtract(orig),
v = new Point(0, 1).transform(matrix).subtract(orig);
@ -115,7 +117,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The Canvas 2d drawing context of the raster.
*
*
* @type Context
* @bean
*/
@ -155,7 +157,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/**
* The HTMLImageElement or Canvas of the raster.
*
*
* @type HTMLImageElement|Canvas
* @bean
*/
@ -179,7 +181,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 +194,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 +208,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.
@ -249,7 +251,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
if (path)
path.draw(ctx, { clip: true });
// Now draw the image clipped into it.
this.matrix.applyToContext(ctx);
this._matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image,
-this._size.width / 2, -this._size.height / 2);
ctx.restore();
@ -275,7 +277,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 +286,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 +303,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 +312,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
@ -341,6 +343,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
return this.getContext().createImageData(size.width, size.height);
},
// TODO: Rename to #get/setImageData, as it will conflict with Item#getData
// DOCS: document Raster#getData
/**
* @param {Rectangle} rect
@ -365,31 +368,20 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
this.getContext(true).putImageData(data, point.x, point.y);
},
_transform: function(matrix, flags) {
// In order to set the right context transformation when drawing the
// raster, simply preconcatenate the internal matrix with the provided
// one.
this.matrix.preConcatenate(matrix);
},
getBounds: function() {
if (!this._bounds)
this._bounds = this._createBounds(this.matrix._transformBounds(
this._bounds = this._createBounds(this._matrix._transformBounds(
new Rectangle(this._size).setCenter(0, 0)));
return this._bounds;
},
getStrokeBounds: function() {
return this.getBounds();
},
draw: function(ctx, param) {
if (param.selection) {
var bounds = new Rectangle(this._size).setCenter(0, 0);
Item.drawSelectedBounds(bounds, ctx, this.matrix);
Item.drawSelectedBounds(bounds, ctx, this._matrix);
} else {
ctx.save();
this.matrix.applyToContext(ctx);
this._matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image,
-this._size.width / 2, -this._size.height / 2);
ctx.restore();

13
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
@ -42,6 +42,7 @@ var sources = [
'src/item/Item.js',
'src/item/Group.js',
'src/item/Layer.js',
'src/item/PlacedItem.js',
'src/item/Raster.js',
'src/item/PlacedSymbol.js',
@ -124,7 +125,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>');
}

45
src/paper.js
View file

@ -1,38 +1,46 @@
/***
*
*
* 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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*
*
***
*
*
* Bootstrap.js JavaScript Framework.
* http://bootstrapjs.org/
*
* Distributed under the MIT license.
*
*
* Copyright (c) 2006 - 2011 Juerg Lehni
* http://lehni.org/
*
*
* Distributed under the MIT license.
*
***
*
* Parse-JS, A JavaScript tokenizer / parser / generator.
*
* Distributed under the BSD license.
*
*
* Parse-js
*
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
* http://marijn.haverbeke.nl/parse-js/
*
* Ported by to JavaScript by Mihai Bazon
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
* http://mihai.bazon.net/blog/
*
*
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
* http://lehni.org/
*
* Distributed under the BSD license.
*
***/
/**
@ -64,6 +72,7 @@ var paper = new function() {
//#include "item/Item.js"
//#include "item/Group.js"
//#include "item/Layer.js"
//#include "item/PlacedItem.js"
//#include "item/Raster.js"
//#include "item/PlacedSymbol.js"

22
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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() {

52
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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

36
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*/

56
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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;

346
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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);
@ -1159,6 +1159,14 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
var loc = this.getLocationAt(offset, isParameter);
return loc && loc.getNormal();
}
// TODO: intersects(item)
// TODO: contains(item)
// TODO: contains(point)
// TODO: intersect(item)
// TODO: unite(item)
// TODO: exclude(item)
// TODO: getIntersections(path)
}, new function() { // Scope for drawing
// Note that in the code below we're often accessing _x and _y on point
@ -1311,7 +1319,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 +1783,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]));
@ -1826,11 +1834,10 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
}
function addJoin(segment, join) {
var handleIn = segment.getHandleInIfSet(),
handleOut = segment.getHandleOutIfSet();
// When both handles are set in a segment, the join setting is
// ignored and round is always used.
if (join === 'round' || handleIn && handleOut) {
if (join === 'round' || !segment._handleIn.isZero()
&& !segment._handleOut.isZero()) {
bounds = bounds.unite(joinBounds.setCenter(matrix
? matrix.transform(segment._point) : segment._point));
} else if (join == 'bevel') {
@ -1895,17 +1902,38 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
/**
* The bounding rectangle of the item including handles.
*
* @type Rectangle
* @bean
*/
getControlBounds: function() {
// TODO: Implement!
getHandleBounds: function() {
var x1 = Infinity,
x2 = -Infinity,
y1 = x1,
y2 = x2;
function add(point, handle) {
var x = point._x,
y = point._y;
if (handle) {
x += handle._x;
y += handle._y;
}
if (x < x1) x1 = x;
if (x > x2) x2 = x;
if (y < y1) y1 = y;
if (y > y2) y2 = y;
}
for (var i = 0, l = this._segments.length; i < l; i++) {
var segment = this._segments[i],
point = segment._point;
add(point);
add(point, segment._handleIn);
add(point, segment._handleOut);
}
return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
}
// TODO: intersects(item)
// TODO: contains(item)
// TODO: contains(point)
// TODO: intersect(item)
// TODO: unite(item)
// TODO: exclude(item)
// TODO: getIntersections(path)
};
});

14
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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];

14
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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;

134
src/path/PathItem.js
View file

@ -1,22 +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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name PathItem
* @class
*
* @class The PathItem class is the base for any items that describe paths
* and offer standardised methods for drawing and path manipulation, such as
* {@link Path} and {@link CompoundPath}.
*
* @extends Item
*/
var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{
@ -26,61 +30,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 +100,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 +111,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 +123,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 +165,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 +224,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 +261,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 +272,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 +280,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 +292,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 +331,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;

128
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*/
@ -143,15 +143,10 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
// this.corner = !this._handleIn.isColinear(this._handleOut);
},
getHandleInIfSet: function() {
return this._handleIn._x == 0 && this._handleIn._y == 0
? null : this._handleIn;
},
/**
* The handle point relative to the anchor point of the segment that
* describes the out tangent of the segment.
*
*
* @type Point
* @bean
*/
@ -167,11 +162,6 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
// this.corner = !this._handleIn.isColinear(this._handleOut);
},
getHandleOutIfSet: function() {
return this._handleOut._x == 0 && this._handleOut._y == 0
? null : this._handleOut;
},
_isSelected: function(point) {
var state = this._selectionState;
return point == this._point ? !!(state & SelectionState.POINT)
@ -225,7 +215,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 +232,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 +245,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The path that the segment belongs to.
*
*
* @type Path
* @bean
*/
@ -265,7 +255,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/**
* The curve that the segment belongs to.
*
*
* @type Curve
* @bean
*/
@ -282,11 +272,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 +290,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
*/
@ -342,12 +332,16 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
// points for largely improved performance, as no calls to
// Point.read() and Point constructors are necessary.
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
// If change is true, only transform handles if they are set, as
// _transformCoordinates is called only to change the segment, no
// to receive the coords.
// This saves some computation time. If change is false, always
// 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,
handleIn = !change || !this._handleIn.isZero()
? this._handleIn : null,
handleOut = !change || !this._handleOut.isZero()
? this._handleOut : null,
x = point._x,
y = point._y,
i = 2;
@ -363,34 +357,36 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
coords[i++] = handleOut._x + x;
coords[i++] = handleOut._y + y;
}
if (matrix) {
matrix._transformCoordinates(coords, 0, coords, 0, i / 2);
x = coords[0];
y = coords[1];
if (change) {
// If change is true, we need to set the new values back
point._x = x;
point._y = y;
i = 2;
if (handleIn) {
handleIn._x = coords[i++] - x;
handleIn._y = coords[i++] - y;
}
if (handleOut) {
handleOut._x = coords[i++] - x;
handleOut._y = coords[i++] - y;
}
} else {
// We want to receive the results in coords, so make sure
// handleIn and out are defined too, even if they're 0
if (!handleIn) {
coords[i++] = x;
coords[i++] = y;
}
if (!handleOut) {
coords[i++] = x;
coords[i++] = y;
}
// If no matrix was previded, this was just called to get the coords and
// we are done now.
if (!matrix)
return;
matrix._transformCoordinates(coords, 0, coords, 0, i / 2);
x = coords[0];
y = coords[1];
if (change) {
// If change is true, we need to set the new values back
point._x = x;
point._y = y;
i = 2;
if (handleIn) {
handleIn._x = coords[i++] - x;
handleIn._y = coords[i++] - y;
}
if (handleOut) {
handleOut._x = coords[i++] - x;
handleOut._y = coords[i++] - y;
}
} else {
// We want to receive the results in coords, so make sure
// handleIn and out are defined too, even if they're 0
if (!handleIn) {
coords[i++] = x;
coords[i++] = y;
}
if (!handleOut) {
coords[i++] = x;
coords[i++] = y;
}
}
}

18
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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),

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

52
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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
*/

36
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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() {

18
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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

20
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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')

86
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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);
*/

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

30
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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)

38
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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:
@ -80,14 +80,14 @@ var TextItem = this.TextItem = Item.extend(/** @lends TextItem# */{
setContent: function(content) {
this._changed(Change.CONTENT);
this._content = content;
this._content = '' + content;
},
/**
* {@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
*/

72
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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') {

32
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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()

10
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/

16
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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:

20
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* 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()

55
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/
*
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
@ -54,15 +54,9 @@ var View = this.View = Base.extend(/** @lends View# */{
if (!DomElement.isInvisible(canvas))
offset = DomElement.getOffset(canvas, false, true);
// Set the size now, which internally calls onResize
// and redraws the view
that.setViewSize(DomElement.getViewportSize(canvas)
.subtract(offset));
// If there's a _onFrameCallback, call it staight away,
// but without requesting another animation frame.
if (that._onFrameCallback) {
that._onFrameCallback(0, true);
} else {
that.draw(true);
}
}
});
} else {
@ -124,7 +118,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
*/
@ -135,6 +129,8 @@ var View = this.View = Base.extend(/** @lends View# */{
setViewSize: function(size) {
size = Size.read(arguments);
var delta = size.subtract(this._viewSize);
if (delta.isZero())
return;
this._canvas.width = size.width;
this._canvas.height = size.height;
// Call onResize handler on any size change
@ -148,11 +144,20 @@ var View = this.View = Base.extend(/** @lends View# */{
this._viewSize.set(size.width, size.height, true);
// Force recalculation
this._bounds = null;
this._redrawNeeded = true;
if (this._onFrameCallback) {
// If there's a _onFrameCallback, call it staight away,
// but without requesting another animation frame.
this._onFrameCallback(0, true);
} else {
// Otherwise simply redraw the view now
this.draw(true);
}
},
/**
* The bounds of the currently visible area in project coordinates.
*
*
* @type Rectangle
* @bean
*/
@ -189,7 +194,7 @@ var View = this.View = Base.extend(/** @lends View# */{
/**
* The zoom factor by which the project coordinates are magnified.
*
*
* @type Number
* @bean
*/
@ -206,7 +211,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 +305,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 +374,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

Some files were not shown because too many files have changed in this diff Show more