scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-04 03:45:58 -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. 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` 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): 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. > 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 # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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: # Usage:
# build.sh MODE # build.sh MODE

4
build/dist.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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" echo "Building paper.js"
./build.sh ./build.sh

4
build/docs.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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 # 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 # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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 # 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 # 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 # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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 # 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 # 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 # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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 # preprocess.sh
# #

4
build/zip.sh
View file

@ -9,7 +9,9 @@
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey # Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
# http://lehni.org/ & http://jonathanpuckey.com/ # 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 ] if [ -f paperjs.zip ]
then then

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

@ -5010,7 +5010,7 @@ var TextItem = this.TextItem = Item.extend({
setContent: function(content) { setContent: function(content) {
this._changed(Change.CONTENT); this._changed(Change.CONTENT);
this._content = content; this._content = '' + content;
}, },
getCharacterStyle: function() { 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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">

2
examples/Animated/Extruded.html
View file

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

2
examples/Animated/FutureSplash.html
View file

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

2
examples/Animated/Lines.html
View file

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

2
examples/Animated/RadialRainbows.html
View file

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

4
examples/Animated/Raster.html
View file

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

2
examples/Animated/RoundedRectangles.html
View file

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

2
examples/Animated/Smoothing.html
View file

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

2
examples/Animated/Space.html
View file

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

2
examples/Animated/Tadpoles.html
View file

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

2
examples/Scripts/Arcs.html
View file

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

2
examples/Scripts/BouncingBalls.html
View file

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

2
examples/Scripts/Chain.html
View file

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

2
examples/Scripts/Circle.html
View file

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

2
examples/Scripts/CompoundPath.html
View file

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

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

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

4
examples/Scripts/DivisionRaster.html
View file

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

2
examples/Scripts/Fitting.html
View file

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

2
examples/Scripts/Letter.html
View file

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

4
examples/Scripts/PathStructure.html
View file

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

2
examples/Scripts/PhyllotaxisRaster.html
View file

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

4
examples/Scripts/RotationRaster.html
View file

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

2
examples/Scripts/RoundRectangle.html
View file

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

14
examples/Scripts/StrokeBounds.html
View file

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

2
examples/Tools/BezierTool.html
View file

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

2
examples/Tools/Circles.html
View file

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

2
examples/Tools/Clouds.html
View file

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

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

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

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

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

2
examples/Tools/Grid.html
View file

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

2
examples/Tools/MetaBalls.html
View file

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

2
examples/Tools/MultiLines.html
View file

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

2
examples/Tools/Simplify.html
View file

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

2
examples/Tools/SquareRounded.html
View file

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

2
examples/Tools/Stars.html
View file

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

2
examples/Tools/Vektor.html
View file

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

2
examples/Tools/Wave.html
View file

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

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

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

20
src/basic/Line.js
View file

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

146
src/basic/Matrix.js
View file

@ -1,16 +1,16 @@
/* /*
* Paper.js * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
@ -21,11 +21,11 @@
/** /**
* @name Matrix * @name Matrix
* *
* @class An affine transform performs a linear mapping from 2D coordinates * @class An affine transform performs a linear mapping from 2D coordinates
* to other 2D coordinates that preserves the "straightness" and * to other 2D coordinates that preserves the "straightness" and
* "parallelness" of lines. * "parallelness" of lines.
* *
* Such a coordinate transformation can be represented by a 3 row by 3 * 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 * column matrix with an implied last row of [ 0 0 1 ]. This matrix
* transforms source coordinates (x,y) into destination coordinates (x',y') * transforms source coordinates (x,y) into destination coordinates (x',y')
@ -36,7 +36,7 @@
* [ y'] = [ m10 m11 m12 ] [ y ] = [ m10x + m11y + m12 ] * [ y'] = [ m10 m11 m12 ] [ y ] = [ m10x + m11y + m12 ]
* [ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ] * [ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ]
* </pre> * </pre>
* *
* This class is optimized for speed and minimizes calculations based on its * This class is optimized for speed and minimizes calculations based on its
* knowledge of the underlying matrix (as opposed to say simply performing * knowledge of the underlying matrix (as opposed to say simply performing
* matrix multiplication). * matrix multiplication).
@ -44,7 +44,7 @@
var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/** /**
* Creates a 2D affine transform. * Creates a 2D affine transform.
* *
* @param {Number} m00 The m00 coordinate of the transform. * @param {Number} m00 The m00 coordinate of the transform.
* @param {Number} m10 The m10 coordinate of the transform. * @param {Number} m10 The m10 coordinate of the transform.
* @param {Number} m01 The m01 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); this.set.apply(this, m00);
} else { } else {
ok = false; ok = false;
} }
} else if (arguments.length > 0) { } else if (arguments.length > 0) {
ok = false; ok = false;
} else { } else {
@ -85,7 +85,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/** /**
* Sets this transform to the matrix specified by the 6 values. * Sets this transform to the matrix specified by the 6 values.
* *
* @param {Number} m00 The m00 coordinate of the transform. * @param {Number} m00 The m00 coordinate of the transform.
* @param {Number} m10 The m10 coordinate of the transform. * @param {Number} m10 The m10 coordinate of the transform.
* @param {Number} m01 The m01 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. * Concatentates this transform with a scaling transformation.
* *
* @name Matrix#scale * @name Matrix#scale
* @function * @function
* @param {Number} scale The scaling factor. * @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. * Concatentates this transform with a scaling transformation.
* *
* @name Matrix#scale * @name Matrix#scale
* @function * @function
* @param {Number} sx The x-axis scaling factor. * @param {Number} hor The horizontal scaling factor.
* @param {Number} sy The y-axis scaling factor. * @param {Number} ver The vertical scaling factor.
* @param {Point} [center] The center for the scaling * @param {Point} [center] The center for the scaling
* transformation. * transformation.
* @return {Matrix} This affine transform. * @return {Matrix} This affine transform.
*/ */
scale: function(sx, sy /* | scale */, center) { scale: function(hor, ver /* | scale */, center) {
if (arguments.length < 2 || typeof sy === 'object') { if (arguments.length < 2 || typeof ver === 'object') {
// sx is the single scale parameter, representing both sx and sy // hor is the single scale parameter, representing both hor and ver
// Read center first from argument 1, then set sy = sx (thus // Read center first from argument 1, then set ver = hor (thus
// modifing the content of argument 1!) // modifing the content of argument 1!)
center = Point.read(arguments, 1); center = Point.read(arguments, 1);
sy = sx; ver = hor;
} else { } else {
center = Point.read(arguments, 2); center = Point.read(arguments, 2);
} }
if (center) if (center)
this.translate(center); this.translate(center);
this._m00 *= sx; this._m00 *= hor;
this._m10 *= sx; this._m10 *= hor;
this._m01 *= sy; this._m01 *= ver;
this._m11 *= sy; this._m11 *= ver;
if (center) if (center)
this.translate(center.negate()); this.translate(center.negate());
return this; return this;
@ -148,7 +148,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/** /**
* Concatentates this transform with a translate transformation. * Concatentates this transform with a translate transformation.
* *
* @name Matrix#translate * @name Matrix#translate
* @function * @function
* @param {Point} point The vector to translate by. * @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. * Concatentates this transform with a translate transformation.
* *
* @name Matrix#translate * @name Matrix#translate
* @function * @function
* @param {Number} dx The distance to translate in the x direction. * @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 * Concatentates this transform with a rotation transformation around an
* anchor point. * anchor point.
* *
* @name Matrix#rotate * @name Matrix#rotate
* @function * @function
* @param {Number} angle The angle of rotation measured in degrees. * @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 * Concatentates this transform with a rotation transformation around an
* anchor point. * anchor point.
* *
* @name Matrix#rotate * @name Matrix#rotate
* @function * @function
* @param {Number} angle The angle of rotation measured in degrees. * @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. * Concatentates this transform with a shear transformation.
* *
* @name Matrix#shear * @name Matrix#shear
* @function * @function
* @param {Point} point The shear factor in x and y direction. * @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. * Concatentates this transform with a shear transformation.
* *
* @name Matrix#shear * @name Matrix#shear
* @function * @function
* @param {Number} shx The x shear factor. * @param {Number} hor The horizontal shear factor.
* @param {Number} shy The y shear factor. * @param {Number} ver The vertical shear factor.
* @param {Point} [center] The center for the shear transformation. * @param {Point} [center] The center for the shear transformation.
* @return {Matrix} This affine transform. * @return {Matrix} This affine transform.
*/ */
shear: function(shx, shy, center) { shear: function(hor, ver, center) {
// See #scale() for explanation of this: // 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); center = Point.read(arguments, 1);
sy = sx; ver = hor;
} else { } else {
center = Point.read(arguments, 2); center = Point.read(arguments, 2);
} }
@ -228,10 +228,10 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
this.translate(center); this.translate(center);
var m00 = this._m00; var m00 = this._m00;
var m10 = this._m10; var m10 = this._m10;
this._m00 += shy * this._m01; this._m00 += ver * this._m01;
this._m10 += shy * this._m11; this._m10 += ver * this._m11;
this._m01 += shx * m00; this._m01 += hor * m00;
this._m11 += shx * m10; this._m11 += hor * m10;
if (center) if (center)
this.translate(center.negate()); this.translate(center.negate());
return this; return this;
@ -247,7 +247,7 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
+ [format(this._m10), format(this._m11), + [format(this._m10), format(this._m11),
format(this._m12)].join(', ') + ']]'; format(this._m12)].join(', ') + ']]';
}, },
/** /**
* @return {Number} The scaling factor in the x-direction (m00). * @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. * Concatenates an affine transform to this transform.
* *
* @param {Matrix} mx The transform to concatenate. * @param {Matrix} mx The transform to concatenate.
* @return {Matrix} This affine transform. * @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. * Pre-concatenates an affine transform to this transform.
* *
* @param {Matrix} mx The transform to preconcatenate. * @param {Matrix} mx The transform to preconcatenate.
* @return {Matrix} This affine transform. * @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 * 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 * the result. If an array is transformed, the the result is stored into a
* destination array. * destination array.
* *
* @param {Point} point The point to be transformed. * @param {Point} point The point to be transformed.
* *
* @param {Number[]} src The array containing the source points * @param {Number[]} src The array containing the source points
* as x, y value pairs. * as x, y value pairs.
* @param {Number} srcOff The offset to the first point to be transformed. * @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. * attempt to convert it.
*/ */
_transformPoint: function(point, dest, dontNotify) { _transformPoint: function(point, dest, dontNotify) {
@ -416,9 +416,9 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
}, },
getScaling: function() { getScaling: function() {
var sx = Math.sqrt(this._m00 * this._m00 + this._m10 * this._m10), var hor = Math.sqrt(this._m00 * this._m00 + this._m10 * this._m10),
sy = Math.sqrt(this._m01 * this._m01 + this._m11 * this._m11); ver = Math.sqrt(this._m01 * this._m01 + this._m11 * this._m11);
return new Point(this._m00 < 0 ? -sx : sx, this._m01 < 0 ? -sy : sy); 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 * Returns whether the transform is invertible. A transform is not
* invertible if the determinant is 0 or any value is non-finite or NaN. * invertible if the determinant is 0 or any value is non-finite or NaN.
* *
* @return {Boolean} Whether the transform is invertible. * @return {Boolean} Whether the transform is invertible.
*/ */
isInvertible: function() { 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 * Checks whether the matrix is singular or not. Singular matrices cannot be
* inverted. * inverted.
* *
* @return {Boolean} Whether the matrix is singular. * @return {Boolean} Whether the matrix is singular.
*/ */
isSingular: function() { isSingular: function() {
@ -489,18 +489,18 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/** /**
* Sets this transform to a scaling transformation. * Sets this transform to a scaling transformation.
* *
* @param {Number} sx The x-axis scaling factor. * @param {Number} hor The horizontal scaling factor.
* @param {Number} sy The y-axis scaling factor. * @param {Number} ver The vertical scaling factor.
* @return {Matrix} This affine transform. * @return {Matrix} This affine transform.
*/ */
setToScale: function(sx, sy) { setToScale: function(hor, ver) {
return this.set(sx, 0, 0, sy, 0, 0); return this.set(hor, 0, 0, ver, 0, 0);
}, },
/** /**
* Sets this transform to a translation transformation. * Sets this transform to a translation transformation.
* *
* @param {Number} dx The distance to translate in the x direction. * @param {Number} dx The distance to translate in the x direction.
* @param {Number} dy The distance to translate in the y direction. * @param {Number} dy The distance to translate in the y direction.
* @return {Matrix} This affine transform. * @return {Matrix} This affine transform.
@ -512,18 +512,18 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/** /**
* Sets this transform to a shearing transformation. * Sets this transform to a shearing transformation.
* *
* @param {Number} shx The x-axis shear factor. * @param {Number} hor The horizontal shear factor.
* @param {Number} shy The y-axis shear factor. * @param {Number} ver The vertical shear factor.
* @return {Matrix} This affine transform. * @return {Matrix} This affine transform.
*/ */
setToShear: function(shx, shy) { setToShear: function(hor, ver) {
return this.set(1, shy, shx, 1, 0, 0); return this.set(1, ver, hor, 1, 0, 0);
}, },
/** /**
* Sets this transform to a rotation transformation. * Sets this transform to a rotation transformation.
* *
* @param {Number} angle The angle of rotation measured in degrees. * @param {Number} angle The angle of rotation measured in degrees.
* @param {Number} x The x coordinate of the anchor point. * @param {Number} x The x coordinate of the anchor point.
* @param {Number} y The y 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. * Applies this matrix to the specified Canvas Context.
* *
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @param {Boolean} [reset=false] * @param {Boolean} [reset=false]
*/ */
@ -563,20 +563,20 @@ var Matrix = this.Matrix = Base.extend(/** @lends Matrix# */{
/** /**
* Creates a transform representing a scaling transformation. * Creates a transform representing a scaling transformation.
* *
* @param {Number} sx The x-axis scaling factor. * @param {Number} hor The horizontal scaling factor.
* @param {Number} sy The y-axis scaling factor. * @param {Number} ver The vertical scaling factor.
* @return {Matrix} A transform representing a scaling * @return {Matrix} A transform representing a scaling
* transformation. * transformation.
*/ */
getScaleInstance: function(sx, sy) { getScaleInstance: function(hor, ver) {
var mx = new Matrix(); var mx = new Matrix();
return mx.setToScale.apply(mx, arguments); return mx.setToScale.apply(mx, arguments);
}, },
/** /**
* Creates a transform representing a translation transformation. * Creates a transform representing a translation transformation.
* *
* @param {Number} dx The distance to translate in the x direction. * @param {Number} dx The distance to translate in the x direction.
* @param {Number} dy The distance to translate in the y direction. * @param {Number} dy The distance to translate in the y direction.
* @return {Matrix} A transform representing a translation * @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. * Creates a transform representing a shearing transformation.
* *
* @param {Number} shx The x-axis shear factor. * @param {Number} hor The horizontal shear factor.
* @param {Number} shy The y-axis shear factor. * @param {Number} ver The vertical shear factor.
* @return {Matrix} A transform representing a shearing transformation. * @return {Matrix} A transform representing a shearing transformation.
*/ */
getShearInstance: function(shx, shy, center) { getShearInstance: function(hor, ver, center) {
var mx = new Matrix(); var mx = new Matrix();
return mx.setToShear.apply(mx, arguments); return mx.setToShear.apply(mx, arguments);
}, },
/** /**
* Creates a transform representing a rotation transformation. * Creates a transform representing a rotation transformation.
* *
* @param {Number} angle The angle of rotation measured in degrees. * @param {Number} angle The angle of rotation measured in degrees.
* @param {Number} x The x coordinate of the anchor point. * @param {Number} x The x coordinate of the anchor point.
* @param {Number} y The y 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 * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name Point * @name Point
* *
* @class The Point object represents a point in the two dimensional space * @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 * of the Paper.js project. It is also used to represent two dimensional
* vector objects. * vector objects.
* *
* @classexample * @classexample
* // Create a point at x: 10, y: 5 * // Create a point at x: 10, y: 5
* var point = new Point(10, 5); * var point = new Point(10, 5);
@ -30,11 +30,11 @@
var Point = this.Point = Base.extend(/** @lends Point# */{ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* Creates a Point object with the given x and y coordinates. * Creates a Point object with the given x and y coordinates.
* *
* @name Point#initialize * @name Point#initialize
* @param {Number} x the x coordinate * @param {Number} x the x coordinate
* @param {Number} y the y coordinate * @param {Number} y the y coordinate
* *
* @example * @example
* // Create a point at x: 10, y: 5 * // Create a point at x: 10, y: 5
* var point = new Point(10, 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 * Creates a Point object using the numbers in the given array as
* coordinates. * coordinates.
* *
* @name Point#initialize * @name Point#initialize
* @param {array} array * @param {array} array
* *
* @example * @example
* // Creating a point at x: 10, y: 5 using an array of numbers: * // Creating a point at x: 10, y: 5 using an array of numbers:
* var array = [10, 5]; * var array = [10, 5];
* var point = new Point(array); * var point = new Point(array);
* console.log(point.x); // 10 * console.log(point.x); // 10
* console.log(point.y); // 5 * console.log(point.y); // 5
* *
* @example * @example
* // Passing an array to a functionality that expects a point: * // Passing an array to a functionality that expects a point:
* *
* // Create a circle shaped path at x: 50, y: 50 * // Create a circle shaped path at x: 50, y: 50
* // with a radius of 30: * // with a radius of 30:
* var path = new Path.Circle([50, 50], 30); * var path = new Path.Circle([50, 50], 30);
* path.fillColor = 'red'; * path.fillColor = 'red';
* *
* // Which is the same as doing: * // Which is the same as doing:
* var path = new Path.Circle(new Point(50, 50), 30); * var path = new Path.Circle(new Point(50, 50), 30);
* path.fillColor = 'red'; * path.fillColor = 'red';
*/ */
/** /**
* Creates a Point object using the properties in the given object. * Creates a Point object using the properties in the given object.
* *
* @name Point#initialize * @name Point#initialize
* @param {object} object * @param {object} object
* *
* @example * @example
* // Creating a point using an object literal with length and angle * // Creating a point using an object literal with length and angle
* // properties: * // properties:
* *
* var point = new Point({ * var point = new Point({
* length: 10, * length: 10,
* angle: 90 * angle: 90
* }); * });
* console.log(point.length); // 10 * console.log(point.length); // 10
* console.log(point.angle); // 90 * console.log(point.angle); // 90
* *
* @example * @example
* // Creating a point at x: 10, y: 20 using an object literal: * // Creating a point at x: 10, y: 20 using an object literal:
* *
* var point = new Point({ * var point = new Point({
* x: 10, * x: 10,
* y: 20 * y: 20
* }); * });
* console.log(point.x); // 10 * console.log(point.x); // 10
* console.log(point.y); // 20 * console.log(point.y); // 20
* *
* @example * @example
* // Passing an object to a functionality that expects a point: * // Passing an object to a functionality that expects a point:
* *
* var center = { * var center = {
* x: 50, * x: 50,
* y: 50 * y: 50
* }; * };
* *
* // Creates a circle shaped path at x: 50, y: 50 * // Creates a circle shaped path at x: 50, y: 50
* // with a radius of 30: * // with a radius of 30:
* var path = new Path.Circle(center, 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 * Creates a Point object using the width and height values of the given
* Size object. * Size object.
* *
* @name Point#initialize * @name Point#initialize
* @param {Size} size * @param {Size} size
* *
* @example * @example
* // Creating a point using a size object. * // Creating a point using a size object.
* *
* // Create a Size with a width of 100pt and a height of 50pt * // Create a Size with a width of 100pt and a height of 50pt
* var size = new Size(100, 50); * var size = new Size(100, 50);
* console.log(size); // { width: 100, height: 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. * Creates a Point object using the coordinates of the given Point object.
* *
* @param {Point} point * @param {Point} point
* @name Point#initialize * @name Point#initialize
*/ */
@ -161,14 +161,14 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* The x coordinate of the point * The x coordinate of the point
* *
* @name Point#x * @name Point#x
* @type Number * @type Number
*/ */
/** /**
* The y coordinate of the point * The y coordinate of the point
* *
* @name Point#y * @name Point#y
* @type Number * @type Number
*/ */
@ -181,15 +181,15 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* Returns a copy of the point. * Returns a copy of the point.
* *
* @example * @example
* var point1 = new Point(); * var point1 = new Point();
* var point2 = point1; * var point2 = point1;
* point2.x = 1; // also changes point1.x * point2.x = 1; // also changes point1.x
* *
* var point2 = point1.clone(); * var point2 = point1.clone();
* point2.x = 1; // doesn't change point1.x * point2.x = 1; // doesn't change point1.x
* *
* @returns {Point} the cloned point * @returns {Point} the cloned point
*/ */
clone: function() { 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 * Returns the addition of the supplied value to both coordinates of
* the point as a new point. * the point as a new point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#add * @name Point#add
* @function * @function
* @param {Number} number the number to add * @param {Number} number the number to add
* @return {Point} the addition of the point and the value as a new point * @return {Point} the addition of the point and the value as a new point
* *
* @example * @example
* var point = new Point(5, 10); * var point = new Point(5, 10);
* var result = point + 20; * 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 * Returns the addition of the supplied point to the point as a new
* point. * point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#add * @name Point#add
* @function * @function
* @param {Point} point the point to add * @param {Point} point the point to add
* @return {Point} the addition of the two points as a new point * @return {Point} the addition of the two points as a new point
* *
* @example * @example
* var point1 = new Point(5, 10); * var point1 = new Point(5, 10);
* var point2 = new Point(10, 20); * 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 * Returns the subtraction of the supplied value to both coordinates of
* the point as a new point. * the point as a new point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#subtract * @name Point#subtract
* @function * @function
* @param {Number} number the number to subtract * @param {Number} number the number to subtract
* @return {Point} the subtraction of the point and the value as a new point * @return {Point} the subtraction of the point and the value as a new point
* *
* @example * @example
* var point = new Point(10, 20); * var point = new Point(10, 20);
* var result = point - 5; * 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 * Returns the subtraction of the supplied point to the point as a new
* point. * point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#subtract * @name Point#subtract
* @function * @function
* @param {Point} point the point to subtract * @param {Point} point the point to subtract
* @return {Point} the subtraction of the two points as a new point * @return {Point} the subtraction of the two points as a new point
* *
* @example * @example
* var firstPoint = new Point(10, 20); * var firstPoint = new Point(10, 20);
* var secondPoint = new Point(5, 5); * 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 * Returns the multiplication of the supplied value to both coordinates of
* the point as a new point. * the point as a new point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#multiply * @name Point#multiply
* @function * @function
* @param {Number} number the number to multiply by * @param {Number} number the number to multiply by
* @return {Point} the multiplication of the point and the value as a new point * @return {Point} the multiplication of the point and the value as a new point
* *
* @example * @example
* var point = new Point(10, 20); * var point = new Point(10, 20);
* var result = point * 2; * 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 * Returns the multiplication of the supplied point to the point as a new
* point. * point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#multiply * @name Point#multiply
* @function * @function
* @param {Point} point the point to multiply by * @param {Point} point the point to multiply by
* @return {Point} the multiplication of the two points as a new point * @return {Point} the multiplication of the two points as a new point
* *
* @example * @example
* var firstPoint = new Point(5, 10); * var firstPoint = new Point(5, 10);
* var secondPoint = new Point(4, 2); * 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 * Returns the division of the supplied value to both coordinates of
* the point as a new point. * the point as a new point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#divide * @name Point#divide
* @function * @function
* @param {Number} number the number to divide by * @param {Number} number the number to divide by
* @return {Point} the division of the point and the value as a new point * @return {Point} the division of the point and the value as a new point
* *
* @example * @example
* var point = new Point(10, 20); * var point = new Point(10, 20);
* var result = point / 2; * 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 * Returns the division of the supplied point to the point as a new
* point. * point.
* The object itself is not modified! * The object itself is not modified!
* *
* @name Point#divide * @name Point#divide
* @function * @function
* @param {Point} point the point to divide by * @param {Point} point the point to divide by
* @return {Point} the division of the two points as a new point * @return {Point} the division of the two points as a new point
* *
* @example * @example
* var firstPoint = new Point(8, 10); * var firstPoint = new Point(8, 10);
* var secondPoint = new Point(2, 5); * 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 * The modulo operator returns the integer remainders of dividing the point
* by the supplied value as a new point. * by the supplied value as a new point.
* *
* @name Point#modulo * @name Point#modulo
* @function * @function
* @param {Number} value * @param {Number} value
* @return {Point} the integer remainders of dividing the point by the value * @return {Point} the integer remainders of dividing the point by the value
* as a new point * as a new point
* *
* @example * @example
* var point = new Point(12, 6); * var point = new Point(12, 6);
* console.log(point % 5); // {x: 2, y: 1} * 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 * The modulo operator returns the integer remainders of dividing the point
* by the supplied value as a new point. * by the supplied value as a new point.
* *
* @name Point#modulo * @name Point#modulo
* @function * @function
* @param {Point} point * @param {Point} point
* @return {Point} the integer remainders of dividing the points by each * @return {Point} the integer remainders of dividing the points by each
* other as a new point * other as a new point
* *
* @example * @example
* var point = new Point(12, 6); * var point = new Point(12, 6);
* console.log(point % new Point(5, 2)); // {x: 2, y: 0} * 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 * Transforms the point by the matrix as a new point. The object itself
* is not modified! * is not modified!
* *
* @param {Matrix} matrix * @param {Matrix} matrix
* @return {Point} the transformed point * @return {Point} the transformed point
*/ */
@ -398,9 +398,9 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* {@grouptitle Distance & Length} * {@grouptitle Distance & Length}
* *
* Returns the distance between the point and another point. * Returns the distance between the point and another point.
* *
* @param {Point} point * @param {Point} point
* @return {Number} * @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 * Each point can be interpreted as a vector that points from the origin
* ({@code x = 0}, {@code y = 0}) to the point's location. * ({@code x = 0}, {@code y = 0}) to the point's location.
* Setting the length changes the location but keeps the vector's angle. * Setting the length changes the location but keeps the vector's angle.
* *
* @type Number * @type Number
* @bean * @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 * changing its angle and returns it as a new point. The optional
* {@code length} parameter defines the length to normalize to. * {@code length} parameter defines the length to normalize to.
* The object itself is not modified! * The object itself is not modified!
* *
* @param {Number} [length=1] the length of the normalized vector * @param {Number} [length=1] the length of the normalized vector
* @return {Point} the normalized vector of the vector that is represented * @return {Point} the normalized vector of the vector that is represented
* by this point's coordinates. * by this point's coordinates.
@ -472,7 +472,7 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
* {@grouptitle Angle & Rotation} * {@grouptitle Angle & Rotation}
* Returns the smaller angle between two vectors. The angle is unsigned, no * Returns the smaller angle between two vectors. The angle is unsigned, no
* information about rotational direction is given. * information about rotational direction is given.
* *
* @name Point#getAngle * @name Point#getAngle
* @function * @function
* @param {Point} point * @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 vector's angle in degrees, measured from the x-axis to the vector.
* *
* The angle is unsigned, no information about rotational direction is * The angle is unsigned, no information about rotational direction is
* given. * given.
* *
* @name Point#getAngle * @name Point#getAngle
* @bean * @bean
* @type Number * @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 * Returns the smaller angle between two vectors in radians. The angle is
* unsigned, no information about rotational direction is given. * unsigned, no information about rotational direction is given.
* *
* @name Point#getAngleInRadians * @name Point#getAngleInRadians
* @function * @function
* @param {Point} point * @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 vector's angle in radians, measured from the x-axis to the vector.
* *
* The angle is unsigned, no information about rotational direction is * The angle is unsigned, no information about rotational direction is
* given. * given.
* *
* @name Point#getAngleInRadians * @name Point#getAngleInRadians
* @bean * @bean
* @type Number * @type Number
@ -549,28 +549,28 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* The quadrant of the {@link #angle} of the point. * The quadrant of the {@link #angle} of the point.
* *
* Angles between 0 and 90 degrees are in quadrant {@code 1}. Angles between * 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 * 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 * degrees are in quadrant {@code 3} and angles between 270 and 360 degrees
* are in quadrant {@code 4}. * are in quadrant {@code 4}.
* *
* @type Number * @type Number
* @bean * @bean
* *
* @example * @example
* var point = new Point({ * var point = new Point({
* angle: 10, * angle: 10,
* length: 20 * length: 20
* }); * });
* console.log(point.quadrant); // 1 * console.log(point.quadrant); // 1
* *
* point.angle = 100; * point.angle = 100;
* console.log(point.quadrant); // 2 * console.log(point.quadrant); // 2
* *
* point.angle = 190; * point.angle = 190;
* console.log(point.quadrant); // 3 * console.log(point.quadrant); // 3
* *
* point.angle = 280; * point.angle = 280;
* console.log(point.quadrant); // 4 * 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 * Returns the angle between two vectors. The angle is directional and
* signed, giving information about the rotational direction. * signed, giving information about the rotational direction.
* *
* Read more about angle units and orientation in the description of the * Read more about angle units and orientation in the description of the
* {@link #angle} property. * {@link #angle} property.
* *
* @param {Point} point * @param {Point} point
* @return {Number} the angle between the two vectors * @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. * Rotates the point by the given angle around an optional center point.
* The object itself is not modified. * The object itself is not modified.
* *
* Read more about angle units and orientation in the description of the * Read more about angle units and orientation in the description of the
* {@link #angle} property. * {@link #angle} property.
* *
* @param {Number} angle the rotation angle * @param {Number} angle the rotation angle
* @param {Point} center the center point of the rotation * @param {Point} center the center point of the rotation
* @returns {Point} the rotated point * @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 * Checks whether the coordinates of the point are equal to that of the
* supplied point. * supplied point.
* *
* @param {Point} point * @param {Point} point
* @return {Boolean} {@true if the points are equal} * @return {Boolean} {@true if the points are equal}
* *
* @example * @example
* var point = new Point(5, 10); * var point = new Point(5, 10);
* console.log(point == new Point(5, 10)); // true * console.log(point == new Point(5, 10)); // true
@ -636,9 +636,9 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* {@grouptitle Tests} * {@grouptitle Tests}
* *
* Checks whether the point is inside the boundaries of the rectangle. * Checks whether the point is inside the boundaries of the rectangle.
* *
* @param {Rectangle} rect the rectangle to check against * @param {Rectangle} rect the rectangle to check against
* @returns {Boolean} {@true if the point is inside the rectangle} * @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. * Checks if the point is within a given distance of another point.
* *
* @param {Point} point the point to check against * @param {Point} point the point to check against
* @param {Number} tolerance the maximum distance allowed * @param {Number} tolerance the maximum distance allowed
* @returns {Boolean} {@true if it is within the given distance} * @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 * Checks if the vector represented by this point is colinear (parallel) to
* another vector. * another vector.
* *
* @param {Point} point the vector to check against * @param {Point} point the vector to check against
* @returns {Boolean} {@true it is parallel} * @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 * Checks if the vector represented by this point is orthogonal
* (perpendicular) to another vector. * (perpendicular) to another vector.
* *
* @param {Point} point the vector to check against * @param {Point} point the vector to check against
* @returns {Boolean} {@true it is orthogonal} * @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. * Checks if this point has both the x and y coordinate set to 0.
* *
* @returns {Boolean} {@true both x and y are 0} * @returns {Boolean} {@true both x and y are 0}
*/ */
isZero: function() { 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 * Checks if this point has an undefined value for at least one of its
* coordinates. * coordinates.
* *
* @returns {Boolean} {@true if either x or y are not a number} * @returns {Boolean} {@true if either x or y are not a number}
*/ */
isNaN: function() { isNaN: function() {
return isNaN(this.x) || isNaN(this.y); return isNaN(this.x) || isNaN(this.y);
}, },
/** /**
* {@grouptitle Vector Math Functions} * {@grouptitle Vector Math Functions}
* Returns the dot product of the point and another point. * Returns the dot product of the point and another point.
* *
* @param {Point} point * @param {Point} point
* @returns {Number} the dot product of the two points * @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. * Returns the cross product of the point and another point.
* *
* @param {Point} point * @param {Point} point
* @returns {Number} the cross product of the two points * @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. * Returns the projection of the point on another point.
* Both points are interpreted as vectors. * Both points are interpreted as vectors.
* *
* @param {Point} point * @param {Point} point
* @returns {Point} the projection of the point on another 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 * 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 * of a {@link Segment} or a {@link Curve}. In this case, it returns
* {@true it is selected} * {@true it is selected}
* *
* @name Point#selected * @name Point#selected
* @property * @property
* @return {Boolean} {@true the point is selected} * @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 * Provide a faster creator for Points out of two coordinates that
* does not rely on Point#initialize at all. This speeds up all math * does not rely on Point#initialize at all. This speeds up all math
* operations a lot. * operations a lot.
* *
* @ignore * @ignore
*/ */
create: function(x, y) { 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 * Returns a new point object with the smallest {@link #x} and
* {@link #y} of the supplied points. * {@link #y} of the supplied points.
* *
* @static * @static
* @param {Point} point1 * @param {Point} point1
* @param {Point} point2 * @param {Point} point2
* @returns {Point} The newly created point object * @returns {Point} The newly created point object
* *
* @example * @example
* var point1 = new Point(10, 100); * var point1 = new Point(10, 100);
* var point2 = new Point(200, 5); * 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 * Returns a new point object with the largest {@link #x} and
* {@link #y} of the supplied points. * {@link #y} of the supplied points.
* *
* @static * @static
* @param {Point} point1 * @param {Point} point1
* @param {Point} point2 * @param {Point} point2
* @returns {Point} The newly created point object * @returns {Point} The newly created point object
* *
* @example * @example
* var point1 = new Point(10, 100); * var point1 = new Point(10, 100);
* var point2 = new Point(200, 5); * 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 * Returns a point object with random {@link #x} and {@link #y} values
* between {@code 0} and {@code 1}. * between {@code 0} and {@code 1}.
* *
* @returns {Point} The newly created point object * @returns {Point} The newly created point object
* @static * @static
* *
* @example * @example
* var maxPoint = new Point(100, 100); * var maxPoint = new Point(100, 100);
* var randomPoint = Point.random(); * var randomPoint = Point.random();
* *
* // A point between {x:0, y:0} and {x:100, y:100}: * // A point between {x:0, y:0} and {x:100, y:100}:
* var point = maxPoint * randomPoint; * 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: }, new function() { // Scope for injecting round, ceil, floor, abs:
/** /**
* {@grouptitle Math Functions} * {@grouptitle Math Functions}
* *
* Returns a new point with rounded {@link #x} and {@link #y} values. The * Returns a new point with rounded {@link #x} and {@link #y} values. The
* object itself is not modified! * object itself is not modified!
* *
* @name Point#round * @name Point#round
* @function * @function
* @return {Point} * @return {Point}
* *
* @example * @example
* var point = new Point(10.2, 10.9); * var point = new Point(10.2, 10.9);
* var roundPoint = point.round(); * 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 * 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 * specified {@link #x} and {@link #y} values. The object itself is not
* modified! * modified!
* *
* @name Point#ceil * @name Point#ceil
* @function * @function
* @return {Point} * @return {Point}
* *
* @example * @example
* var point = new Point(10.2, 10.9); * var point = new Point(10.2, 10.9);
* var ceilPoint = point.ceil(); * 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 * 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 * specified {@link #x} and {@link #y} values. The object itself is not
* modified! * modified!
* *
* @name Point#floor * @name Point#floor
* @function * @function
* @return {Point} * @return {Point}
* *
* @example * @example
* var point = new Point(10.2, 10.9); * var point = new Point(10.2, 10.9);
* var floorPoint = point.floor(); * 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} * Returns a new point with the absolute values of the specified {@link #x}
* and {@link #y} values. The object itself is not modified! * and {@link #y} values. The object itself is not modified!
* *
* @name Point#abs * @name Point#abs
* @function * @function
* @return {Point} * @return {Point}
* *
* @example * @example
* var point = new Point(-5, 10); * var point = new Point(-5, 10);
* var absPoint = point.abs(); * var absPoint = point.abs();
@ -907,12 +907,12 @@ var Point = this.Point = Base.extend(/** @lends Point# */{
/** /**
* @name LinkedPoint * @name LinkedPoint
* *
* @class An internal version of Point that notifies its owner of each change * @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 * through setting itself again on the setter that corresponds to the getter
* that produced this LinkedPoint. See uses of LinkedPoint.create() * that produced this LinkedPoint. See uses of LinkedPoint.create()
* Note: This prototype is not exported. * Note: This prototype is not exported.
* *
* @ignore * @ignore
*/ */
var LinkedPoint = Point.extend({ var LinkedPoint = Point.extend({

138
src/basic/Rectangle.js
View file

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

122
src/basic/Size.js
View file

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

10
src/browser/DomElement.js
View file

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

10
src/browser/DomEvent.js
View file

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

112
src/color/Color.js
View file

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

18
src/color/Gradient.js
View file

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

78
src/color/GradientColor.js
View file

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

38
src/color/GradientStop.js
View file

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

10
src/core/Base.js
View file

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

36
src/core/PaperScope.js
View file

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

12
src/core/PaperScript.js
View file

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

10
src/item/ChangeFlag.js
View file

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

34
src/item/Group.js
View file

@ -1,65 +1,65 @@
/* /*
* Paper.js * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name Group * @name Group
* *
* @class A Group is a collection of items. When you transform a Group, its * @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 * children are treated as a single unit without changing their relative
* positions. * positions.
* *
* @extends Item * @extends Item
*/ */
var Group = this.Group = Item.extend(/** @lends Group# */{ var Group = this.Group = Item.extend(/** @lends Group# */{
// DOCS: document new Group(item, item...); // DOCS: document new Group(item, item...);
/** /**
* Creates a new Group item and places it at the top of the active layer. * 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 * @param {Item[]} [children] An array of children that will be added to the
* newly created group. * newly created group.
* *
* @example {@paperscript split=true height=200} * @example {@paperscript split=true height=200}
* // Create a group containing two paths: * // Create a group containing two paths:
* var path = new Path(new Point(100, 100), new Point(100, 200)); * var path = new Path(new Point(100, 100), new Point(100, 200));
* var path2 = new Path(new Point(50, 150), new Point(150, 150)); * var path2 = new Path(new Point(50, 150), new Point(150, 150));
* *
* // Create a group from the two paths: * // Create a group from the two paths:
* var group = new Group([path, path2]); * var group = new Group([path, path2]);
* *
* // Set the stroke color of all items in the group: * // Set the stroke color of all items in the group:
* group.strokeColor = 'black'; * group.strokeColor = 'black';
* *
* // Move the group to the center of the view: * // Move the group to the center of the view:
* group.position = view.center; * group.position = view.center;
* *
* @example {@paperscript split=true height=320} * @example {@paperscript split=true height=320}
* // Click in the view to add a path to the group, which in turn is rotated * // Click in the view to add a path to the group, which in turn is rotated
* // every frame: * // every frame:
* var group = new Group(); * var group = new Group();
* *
* function onMouseDown(event) { * function onMouseDown(event) {
* // Create a new circle shaped path at the position * // Create a new circle shaped path at the position
* // of the mouse: * // of the mouse:
* var path = new Path.Circle(event.point, 5); * var path = new Path.Circle(event.point, 5);
* path.fillColor = 'black'; * path.fillColor = 'black';
* *
* // Add the path to the group's children list: * // Add the path to the group's children list:
* group.addChild(path); * group.addChild(path);
* } * }
* *
* function onFrame(event) { * function onFrame(event) {
* // Rotate the group by 1 degree from * // Rotate the group by 1 degree from
* // the centerpoint of the view: * // 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. * Specifies whether the group item is to be clipped.
* When setting to {@code true}, the first child in the group is * When setting to {@code true}, the first child in the group is
* automatically defined as the clipping mask. * automatically defined as the clipping mask.
* *
* @type Boolean * @type Boolean
* @bean * @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 * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name Layer * @name Layer
* *
* @class The Layer item represents a layer in a Paper.js project. * @class The Layer item represents a layer in a Paper.js project.
* *
* The layer which is currently active can be accessed through * The layer which is currently active can be accessed through
* {@link Project#activeLayer}. * {@link Project#activeLayer}.
* An array of all layers in a project can be accessed through * An array of all layers in a project can be accessed through
* {@link Project#layers}. * {@link Project#layers}.
* *
* @extends Group * @extends Group
*/ */
var Layer = this.Layer = Group.extend(/** @lends Layer# */{ 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 * Creates a new Layer item and places it at the end of the
* {@link Project#layers} array. The newly created layer will be activated, * {@link Project#layers} array. The newly created layer will be activated,
* so all newly created items will be placed within it. * 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. * newly created layer.
* *
* @example * @example
* var layer = new Layer(); * var layer = new Layer();
*/ */
@ -58,7 +58,7 @@ var Layer = this.Layer = Group.extend(/** @lends Layer# */{
if (deselect) if (deselect)
this.setSelected(false); this.setSelected(false);
Base.splice(this._project.layers, null, this._index, 1); 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. // mechanism.
this._project._needsRedraw(); this._project._needsRedraw();
return true; return true;
@ -79,7 +79,7 @@ var Layer = this.Layer = Group.extend(/** @lends Layer# */{
// DOCS: improve Layer#activate() example. // DOCS: improve Layer#activate() example.
/** /**
* Activates the layer. * Activates the layer.
* *
* @example * @example
* var layer = new Layer(); * var layer = new Layer();
* layer.activate(); * 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 * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name PlacedSymbol * @name PlacedSymbol
* *
* @class A PlacedSymbol represents an instance of a symbol which has been * @class A PlacedSymbol represents an instance of a symbol which has been
* placed in a Paper.js project. * 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. * Creates a new PlacedSymbol Item.
* *
* @param {Symbol} symbol the symbol to place * @param {Symbol} symbol the symbol to place
* @param {Point|Matrix} [matrixOrOffset] the center point of the placed * @param {Point|Matrix} [matrixOrOffset] the center point of the placed
* symbol or a {@link Matrix} transformation to transform the placed symbol * symbol or a {@link Matrix} transformation to transform the placed symbol
* with. * with.
* *
* @example {@paperscript split=true height=240} * @example {@paperscript split=true height=240}
* // Placing 100 instances of a symbol: * // Placing 100 instances of a symbol:
* var path = new Path.Star(new Point(0, 0), 6, 5, 13); * 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', * fillColor: 'white',
* strokeColor: 'black' * strokeColor: 'black'
* }; * };
* *
* // Create a symbol from the path: * // Create a symbol from the path:
* var symbol = new Symbol(path); * var symbol = new Symbol(path);
* *
* // Remove the path: * // Remove the path:
* path.remove(); * path.remove();
* *
* // Place 100 instances of the symbol: * // Place 100 instances of the symbol:
* for (var i = 0; i < 100; i++) { * for (var i = 0; i < 100; i++) {
* // Place an instance of the symbol in the project: * // Place an instance of the symbol in the project:
* var instance = new PlacedSymbol(symbol); * var instance = new PlacedSymbol(symbol);
* *
* // Move the instance to a random position within the view: * // Move the instance to a random position within the view:
* instance.position = Point.random() * view.size; * instance.position = Point.random() * view.size;
* *
* // Rotate the instance by a random amount between * // Rotate the instance by a random amount between
* // 0 and 360 degrees: * // 0 and 360 degrees:
* instance.rotate(Math.random() * 360); * instance.rotate(Math.random() * 360);
* *
* // Scale the instance between 0.25 and 1: * // Scale the instance between 0.25 and 1:
* instance.scale(0.25 + Math.random() * 0.75); * instance.scale(0.25 + Math.random() * 0.75);
* } * }
@ -64,7 +64,7 @@ var PlacedSymbol = this.PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
initialize: function(symbol, matrixOrOffset) { initialize: function(symbol, matrixOrOffset) {
this.base(); this.base();
this.symbol = symbol instanceof Symbol ? symbol : new Symbol(symbol); this.symbol = symbol instanceof Symbol ? symbol : new Symbol(symbol);
this.matrix = matrixOrOffset !== undefined this._matrix = matrixOrOffset !== undefined
? matrixOrOffset instanceof Matrix ? matrixOrOffset instanceof Matrix
? matrixOrOffset ? matrixOrOffset
: new Matrix().translate(Point.read(arguments, 1)) : 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: * The symbol that the placed symbol refers to:
* *
* @name PlacedSymbol#symbol * @name PlacedSymbol#symbol
* @type Symbol * @type Symbol
*/ */
clone: function() { clone: function() {
return this._clone(new PlacedSymbol(this.symbol, this.matrix.clone())); 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);
}, },
getBounds: function() { getBounds: function() {
if (!this._bounds) if (!this._bounds)
this._bounds = this._createBounds( this._bounds = this._createBounds(
this.symbol._definition.getStrokeBounds(this.matrix)) this.symbol._definition.getStrokeBounds(this._matrix))
return this._bounds; return this._bounds;
}, },
getStrokeBounds: function() {
return this.getBounds();
},
draw: function(ctx, param) { draw: function(ctx, param) {
if (param.selection) { if (param.selection) {
Item.drawSelectedBounds(this.symbol._definition.getStrokeBounds(), Item.drawSelectedBounds(this.symbol._definition.getStrokeBounds(),
ctx, this.matrix); ctx, this._matrix);
} else { } else {
ctx.save(); ctx.save();
this.matrix.applyToContext(ctx); this._matrix.applyToContext(ctx);
Item.draw(this.symbol.getDefinition(), ctx, param); Item.draw(this.symbol.getDefinition(), ctx, param);
ctx.restore(); ctx.restore();
} }

70
src/item/Raster.js
View file

@ -1,31 +1,33 @@
/* /*
* Paper.js * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name Raster * @name Raster
*
* @class The Raster item represents an image in a Paper.js project. * @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: Implement url / type, width, height.
// TODO: Have PlacedSymbol & Raster inherit from a shared class? // TODO: Have PlacedSymbol & Raster inherit from a shared class?
// DOCS: Document Raster constructor. // DOCS: Document Raster constructor.
/** /**
* Creates a new raster item and places it in the active layer. * Creates a new raster item and places it in the active layer.
* *
* @param {HTMLImageElement|Canvas|string} [object] * @param {HTMLImageElement|Canvas|string} [object]
*/ */
initialize: function(object) { initialize: function(object) {
@ -40,7 +42,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
//#endif // BROWSER //#endif // BROWSER
this.setImage(object); this.setImage(object);
} }
this.matrix = new Matrix(); this._matrix = new Matrix();
}, },
clone: function() { clone: function() {
@ -52,13 +54,13 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
image.getContext('2d').drawImage(this._canvas, 0, 0); image.getContext('2d').drawImage(this._canvas, 0, 0);
} }
var copy = new Raster(image); var copy = new Raster(image);
copy.matrix = this.matrix.clone(); copy._matrix = this._matrix.clone();
return this._clone(copy); return this._clone(copy);
}, },
/** /**
* The size of the raster in pixels. * The size of the raster in pixels.
* *
* @type Size * @type Size
* @bean * @bean
*/ */
@ -78,7 +80,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* The width of the raster in pixels. * The width of the raster in pixels.
* *
* @type Number * @type Number
* @bean * @bean
*/ */
@ -88,7 +90,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* The height of the raster in pixels. * The height of the raster in pixels.
* *
* @type Number * @type Number
* @bean * @bean
*/ */
@ -98,12 +100,12 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* Pixels per inch of the raster at its current size. * Pixels per inch of the raster at its current size.
* *
* @type Size * @type Size
* @bean * @bean
*/ */
getPpi: function() { getPpi: function() {
var matrix = this.matrix, var matrix = this._matrix,
orig = new Point(0, 0).transform(matrix), orig = new Point(0, 0).transform(matrix),
u = new Point(1, 0).transform(matrix).subtract(orig), u = new Point(1, 0).transform(matrix).subtract(orig),
v = new Point(0, 1).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. * The Canvas 2d drawing context of the raster.
* *
* @type Context * @type Context
* @bean * @bean
*/ */
@ -155,7 +157,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* The HTMLImageElement or Canvas of the raster. * The HTMLImageElement or Canvas of the raster.
* *
* @type HTMLImageElement|Canvas * @type HTMLImageElement|Canvas
* @bean * @bean
*/ */
@ -179,7 +181,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* @param {Rectangle} rect the boundaries of the sub image in pixel * @param {Rectangle} rect the boundaries of the sub image in pixel
* coordinates * coordinates
* *
* @return {Canvas} * @return {Canvas}
*/ */
getSubImage: function(rect) { getSubImage: function(rect) {
@ -192,7 +194,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* Draws an image on the raster. * Draws an image on the raster.
* *
* @param {HTMLImageELement|Canvas} image * @param {HTMLImageELement|Canvas} image
* @param {Point} point the offset of the image as a point in pixel * @param {Point} point the offset of the image as a point in pixel
* coordinates * coordinates
@ -206,7 +208,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
* Calculates the average color of the image within the given path, * Calculates the average color of the image within the given path,
* rectangle or point. This can be used for creating raster image * rectangle or point. This can be used for creating raster image
* effects. * effects.
* *
* @param {Path|Rectangle|Point} object * @param {Path|Rectangle|Point} object
* @return {RGBColor} the average color contained in the area covered by the * @return {RGBColor} the average color contained in the area covered by the
* specified path, rectangle or point. * specified path, rectangle or point.
@ -249,7 +251,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
if (path) if (path)
path.draw(ctx, { clip: true }); path.draw(ctx, { clip: true });
// Now draw the image clipped into it. // Now draw the image clipped into it.
this.matrix.applyToContext(ctx); this._matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image, ctx.drawImage(this._canvas || this._image,
-this._size.width / 2, -this._size.height / 2); -this._size.width / 2, -this._size.height / 2);
ctx.restore(); ctx.restore();
@ -275,7 +277,7 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
/** /**
* {@grouptitle Pixels} * {@grouptitle Pixels}
* Gets the color of a pixel in the raster. * Gets the color of a pixel in the raster.
* *
* @name Raster#getPixel * @name Raster#getPixel
* @function * @function
* @param x the x offset of the pixel in pixel coordinates * @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. * Gets the color of a pixel in the raster.
* *
* @name Raster#getPixel * @name Raster#getPixel
* @function * @function
* @param point the offset of the pixel as a point in pixel coordinates * @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. * Sets the color of the specified pixel to the specified color.
* *
* @name Raster#setPixel * @name Raster#setPixel
* @function * @function
* @param x the x offset of the pixel in pixel coordinates * @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. * Sets the color of the specified pixel to the specified color.
* *
* @name Raster#setPixel * @name Raster#setPixel
* @function * @function
* @param point the offset of the pixel as a point in pixel coordinates * @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); return this.getContext().createImageData(size.width, size.height);
}, },
// TODO: Rename to #get/setImageData, as it will conflict with Item#getData
// DOCS: document Raster#getData // DOCS: document Raster#getData
/** /**
* @param {Rectangle} rect * @param {Rectangle} rect
@ -365,31 +368,20 @@ var Raster = this.Raster = Item.extend(/** @lends Raster# */{
this.getContext(true).putImageData(data, point.x, point.y); 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() { getBounds: function() {
if (!this._bounds) if (!this._bounds)
this._bounds = this._createBounds(this.matrix._transformBounds( this._bounds = this._createBounds(this._matrix._transformBounds(
new Rectangle(this._size).setCenter(0, 0))); new Rectangle(this._size).setCenter(0, 0)));
return this._bounds; return this._bounds;
}, },
getStrokeBounds: function() {
return this.getBounds();
},
draw: function(ctx, param) { draw: function(ctx, param) {
if (param.selection) { if (param.selection) {
var bounds = new Rectangle(this._size).setCenter(0, 0); var bounds = new Rectangle(this._size).setCenter(0, 0);
Item.drawSelectedBounds(bounds, ctx, this.matrix); Item.drawSelectedBounds(bounds, ctx, this._matrix);
} else { } else {
ctx.save(); ctx.save();
this.matrix.applyToContext(ctx); this._matrix.applyToContext(ctx);
ctx.drawImage(this._canvas || this._image, ctx.drawImage(this._canvas || this._image,
-this._size.width / 2, -this._size.height / 2); -this._size.width / 2, -this._size.height / 2);
ctx.restore(); ctx.restore();

13
src/load.js
View file

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

45
src/paper.js
View file

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

22
src/path/CompoundPath.js
View file

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

52
src/path/Curve.js
View file

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

36
src/path/CurveLocation.js
View file

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

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

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

346
src/path/Path.js
View file

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

14
src/path/PathFlattener.js
View file

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

134
src/path/PathItem.js
View file

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

128
src/path/Segment.js
View file

@ -1,26 +1,26 @@
/* /*
* Paper.js * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name Segment * @name Segment
* *
* @class The Segment object represents the points of a path through which its * @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 * {@link Curve} objects pass. The segments of a path can be accessed through
* its {@link Path#segments} array. * its {@link Path#segments} array.
* *
* Each segment consists of an anchor point ({@link Segment#point}) and * Each segment consists of an anchor point ({@link Segment#point}) and
* optionaly an incoming and an outgoing handle ({@link Segment#handleIn} and * optionaly an incoming and an outgoing handle ({@link Segment#handleIn} and
* {@link Segment#handleOut}), describing the tangents of the two {@link Curve} * {@link Segment#handleOut}), describing the tangents of the two {@link Curve}
@ -29,7 +29,7 @@
var Segment = this.Segment = Base.extend(/** @lends Segment# */{ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/** /**
* Creates a new Segment object. * Creates a new Segment object.
* *
* @param {Point} [point={x: 0, y: 0}] the anchor point of the segment * @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 * @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 * 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 * @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 * anchor point of the segment that describes the out tangent of the
* segment. * segment.
* *
* @example {@paperscript} * @example {@paperscript}
* var handleIn = new Point(-80, -100); * var handleIn = new Point(-80, -100);
* var handleOut = new Point(80, 100); * var handleOut = new Point(80, 100);
* *
* var firstPoint = new Point(100, 50); * var firstPoint = new Point(100, 50);
* var firstSegment = new Segment(firstPoint, null, handleOut); * var firstSegment = new Segment(firstPoint, null, handleOut);
* *
* var secondPoint = new Point(300, 50); * var secondPoint = new Point(300, 50);
* var secondSegment = new Segment(secondPoint, handleIn, null); * var secondSegment = new Segment(secondPoint, handleIn, null);
* *
* var path = new Path(firstSegment, secondSegment); * var path = new Path(firstSegment, secondSegment);
* path.strokeColor = 'black'; * path.strokeColor = 'black';
*/ */
@ -109,7 +109,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/** /**
* The anchor point of the segment. * The anchor point of the segment.
* *
* @type Point * @type Point
* @bean * @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 * The handle point relative to the anchor point of the segment that
* describes the in tangent of the segment. * describes the in tangent of the segment.
* *
* @type Point * @type Point
* @bean * @bean
*/ */
@ -143,15 +143,10 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
// this.corner = !this._handleIn.isColinear(this._handleOut); // 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 * The handle point relative to the anchor point of the segment that
* describes the out tangent of the segment. * describes the out tangent of the segment.
* *
* @type Point * @type Point
* @bean * @bean
*/ */
@ -167,11 +162,6 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
// this.corner = !this._handleIn.isColinear(this._handleOut); // this.corner = !this._handleIn.isColinear(this._handleOut);
}, },
getHandleOutIfSet: function() {
return this._handleOut._x == 0 && this._handleOut._y == 0
? null : this._handleOut;
},
_isSelected: function(point) { _isSelected: function(point) {
var state = this._selectionState; var state = this._selectionState;
return point == this._point ? !!(state & SelectionState.POINT) 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); path._updateSelection(this, state, this._selectionState);
}, },
/** /**
* Specifies whether the {@link #point} of the segment is selected. * Specifies whether the {@link #point} of the segment is selected.
@ -242,10 +232,10 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/** /**
* {@grouptitle Hierarchy} * {@grouptitle Hierarchy}
* *
* The index of the segment in the {@link Path#segments} array that the * The index of the segment in the {@link Path#segments} array that the
* segment belongs to. * segment belongs to.
* *
* @type Number * @type Number
* @bean * @bean
*/ */
@ -255,7 +245,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/** /**
* The path that the segment belongs to. * The path that the segment belongs to.
* *
* @type Path * @type Path
* @bean * @bean
*/ */
@ -265,7 +255,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/** /**
* The curve that the segment belongs to. * The curve that the segment belongs to.
* *
* @type Curve * @type Curve
* @bean * @bean
*/ */
@ -282,11 +272,11 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
/** /**
* {@grouptitle Sibling Segments} * {@grouptitle Sibling Segments}
* *
* The next segment in the {@link Path#segments} array that the segment * 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 * belongs to. If the segments belongs to a closed path, the first segment
* is returned for the last segment of the path. * is returned for the last segment of the path.
* *
* @type Segment * @type Segment
* @bean * @bean
*/ */
@ -300,7 +290,7 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
* The previous segment in the {@link Path#segments} array that the * 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 belongs to. If the segments belongs to a closed path, the last
* segment is returned for the first segment of the path. * segment is returned for the first segment of the path.
* *
* @type Segment * @type Segment
* @bean * @bean
*/ */
@ -342,12 +332,16 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
// points for largely improved performance, as no calls to // points for largely improved performance, as no calls to
// Point.read() and Point constructors are necessary. // Point.read() and Point constructors are necessary.
var point = this._point, var point = this._point,
// If a matrix is defined, only transform handles if they are set. // If change is true, only transform handles if they are set, as
// This saves some computation time. If no matrix is set, always // _transformCoordinates is called only to change the segment, no
// use the real handles, as we just want to receive a filled // 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(). // coords array for getBounds().
handleIn = matrix && this.getHandleInIfSet() || this._handleIn, handleIn = !change || !this._handleIn.isZero()
handleOut = matrix && this.getHandleOutIfSet() || this._handleOut, ? this._handleIn : null,
handleOut = !change || !this._handleOut.isZero()
? this._handleOut : null,
x = point._x, x = point._x,
y = point._y, y = point._y,
i = 2; i = 2;
@ -363,34 +357,36 @@ var Segment = this.Segment = Base.extend(/** @lends Segment# */{
coords[i++] = handleOut._x + x; coords[i++] = handleOut._x + x;
coords[i++] = handleOut._y + y; coords[i++] = handleOut._y + y;
} }
if (matrix) { // If no matrix was previded, this was just called to get the coords and
matrix._transformCoordinates(coords, 0, coords, 0, i / 2); // we are done now.
x = coords[0]; if (!matrix)
y = coords[1]; return;
if (change) { matrix._transformCoordinates(coords, 0, coords, 0, i / 2);
// If change is true, we need to set the new values back x = coords[0];
point._x = x; y = coords[1];
point._y = y; if (change) {
i = 2; // If change is true, we need to set the new values back
if (handleIn) { point._x = x;
handleIn._x = coords[i++] - x; point._y = y;
handleIn._y = coords[i++] - y; i = 2;
} if (handleIn) {
if (handleOut) { handleIn._x = coords[i++] - x;
handleOut._x = coords[i++] - x; handleIn._y = coords[i++] - y;
handleOut._y = coords[i++] - y; }
} if (handleOut) {
} else { handleOut._x = coords[i++] - x;
// We want to receive the results in coords, so make sure handleOut._y = coords[i++] - y;
// handleIn and out are defined too, even if they're 0 }
if (!handleIn) { } else {
coords[i++] = x; // We want to receive the results in coords, so make sure
coords[i++] = y; // handleIn and out are defined too, even if they're 0
} if (!handleIn) {
if (!handleOut) { coords[i++] = x;
coords[i++] = x; coords[i++] = y;
coords[i++] = y; }
} if (!handleOut) {
coords[i++] = x;
coords[i++] = y;
} }
} }
} }

18
src/path/SegmentPoint.js
View file

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

10
src/path/SelectionState.js
View file

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

52
src/project/Project.js
View file

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

36
src/project/Symbol.js
View file

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

18
src/style/CharacterStyle.js
View file

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

20
src/style/ParagraphStyle.js
View file

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

86
src/style/PathStyle.js
View file

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

10
src/style/Style.js
View file

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

30
src/text/PointText.js
View file

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

38
src/text/TextItem.js
View file

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

72
src/tool/Tool.js
View file

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

32
src/tool/ToolEvent.js
View file

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

10
src/ui/Event.js
View file

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

16
src/ui/Key.js
View file

@ -1,16 +1,16 @@
/* /*
* Paper.js * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * 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 // 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 // in onKeyDown/Up: keydown is used to store the downCode and handle
// modifiers and special keys such as arrows, space, etc, keypress fires the // 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. // charCode so keyup can do the right thing too.
charCodeMap = {}, // keyCode -> charCode mappings for pressed keys charCodeMap = {}, // keyCode -> charCode mappings for pressed keys
keyMap = {}, // Map for currently 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. * Checks whether the specified key is pressed.
* *
* @param {String} key One of: 'backspace', 'enter', 'shift', 'control', * @param {String} key One of: 'backspace', 'enter', 'shift', 'control',
* 'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home', * 'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home',
* 'left', 'up', 'right', 'down', 'delete', 'command' * 'left', 'up', 'right', 'down', 'delete', 'command'
* @return {Boolean} {@true if the key is pressed} * @return {Boolean} {@true if the key is pressed}
* *
* @example * @example
* // Whenever the user clicks, create a circle shaped path. If the * // Whenever the user clicks, create a circle shaped path. If the
* // 'a' key is pressed, fill it with red, otherwise fill it with blue: * // '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 * Paper.js
* *
* This file is part of Paper.js, a JavaScript Vector Graphics Library, * This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible. * based on Scriptographer.org and designed to be largely API compatible.
* http://paperjs.org/ * http://paperjs.org/
* http://scriptographer.org/ * http://scriptographer.org/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/ * http://lehni.org/ & http://jonathanpuckey.com/
* *
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved. * All rights reserved.
*/ */
/** /**
* @name KeyEvent * @name KeyEvent
* *
* @class KeyEvent The KeyEvent object is received by the {@link Tool}'s * @class KeyEvent The KeyEvent object is received by the {@link Tool}'s
* keyboard handlers {@link Tool#onKeyDown}, {@link Tool#onKeyUp}, * keyboard handlers {@link Tool#onKeyDown}, {@link Tool#onKeyUp},
* The KeyEvent object is the only parameter passed to these functions * 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. * The type of key event.
* *
* @name KeyEvent#type * @name KeyEvent#type
* @type String('keydown', 'keyup') * @type String('keydown', 'keyup')
*/ */
/** /**
* The string character of the key that caused this key event. * The string character of the key that caused this key event.
* *
* @name KeyEvent#character * @name KeyEvent#character
* @type String * @type String
*/ */
/** /**
* The key that caused this key event. * The key that caused this key event.
* *
* @name KeyEvent#key * @name KeyEvent#key
* @type String * @type String
*/ */
@ -58,7 +58,7 @@ var KeyEvent = this.KeyEvent = Event.extend(new function() {
* @return {String} A string representation of the key event. * @return {String} A string representation of the key event.
*/ */
toString: function() { toString: function() {
return '{ type: ' + this.type return '{ type: ' + this.type
+ ', key: ' + this.key + ', key: ' + this.key
+ ', character: ' + this.character + ', character: ' + this.character
+ ', modifiers: ' + this.getModifiers() + ', modifiers: ' + this.getModifiers()

55
src/ui/View.js
View file

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

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