Prebuilt module for commit 7be936ef1812dd9383835483b6b065d4a0fb1cbe.

This commit is contained in:
Jürg Lehni 2016-01-30 13:48:16 +01:00
commit 58e70fd11c
57 changed files with 140129 additions and 0 deletions

15
AUTHORS.md Normal file
View file

@ -0,0 +1,15 @@
## Authors
- Jürg Lehni <juerg@scratchdisk.com>
- Jonathan Puckey <jonathan@studiomoniker.com>
## Contributors
- Harikrishnan Gopalakrishnan <hari.exeption@gmail.com>
- Jan Bösenberg <development@iconexperience.com>
- Jt Whissel <jtwhissel@gmail.com>
- Andrew Roles <jaroles58@gmail.com>
- Jacob Lites <jnightlight@gmail.com>
- Justin Ridgewell <justinridgewell@gmail.com>
- Andrew Wagenheim <abwagenheim@gmail.com>
- Scott Kieronski <baroes0239@gmail.com>

73
CHANGELOG.md Normal file
View file

@ -0,0 +1,73 @@
# Change Log
All notable changes to Paper.js shall be documented in this file, following common [CHANGELOG](http://keepachangelog.com/) conventions. As of `0.10.0`, Paper.js adheres to [Semantic Versioning](http://semver.org/).
## `0.10.0` (Unreleased)
### Changed
- Significant overhaul and improvement of boolean path operations (`#unite()`,
`#subtract()`, `#intersect()`, `#exclude()`, `#divide()`):
- Improve handling of self-intersecting paths and non-zero fill-rules.
- Handle operations on identical paths.
- Improve handling of near-collinear lines.
- Better handle self-intersecting paths that merely "touch" themselves.
- Handle situations where all encountered intersections are part of overlaps.
- Significant improvement of reliability of bezier fat-line clipping code in
`#getIntersections()` and `#getCrossings()`.
- Complete refactoring of key-event handling to increase reliably when handling
special keys.
- Complete refactoring of mouse-event handling on item and view, to better
handle event bubbling and `Item#removeOn()` calls.
- Rename `#windingRule` to `#fillRule` on `Item` and `Style`.
- Do not replace existing named child reference on `Item#children` with new one
when the name is identical.
- Update internal Acorn JavaScript parser to `0.5.0`, the last small version.
- Update QUnit to `1.20.0`.
### Added
- Multiple additions to SVG export (`#exportSVG()`):
- Support `{ precision: value }` option.
- Support `#fillRule` through the SVG `fill-rule` attribute.
- Support `#blendMode` through the CSS `mix-blend-mode` attribute.
- Various additions to `#getItems()` on `Project` and `Item`:
- Add support for `{ recursive: false }` as a way to prevent iterating over
all children of children.
- Add support for `{ match: function() {} }`, so the match function can be
passed in combination with other options.
- Add `Item#copyAttributes()` and `Item#copyContent()`, and use them in
`Item#clone()`.
- Add `insert` parameter to `Path#toShape()`, `Shape#toPath()`,
`Item#rasterize()`, controlling whether the created item is inserted into the
scene graph or not.
- Add visual item comparison to QUnit, through rasterization and Resemble.js
diffing.
- Add many unit tests for known edge cases in boolean operations and curve
intersections.
- Start using automatic code testing through Travis CI.
- Reach JSHint compliance and include regular linting in Travis CI tests.
- Define code format standards in .editorconfig file
### Deprecated
- Deprecate `#windingRule` on `Item` and `Style` in favor of `#fillRule`.
<!--
### Removed
-->
### Fixed
- Improve hit-testing and `#contains()` checks on path with horizontal lines (#819).
- Handle non-reversible matrices in `Item#hitTest()` (#617).
- Fix various issues with adding and removing of segments in paths (#815).
- Support bubbling up of `doubleclick` events on `Group` (#834).
- Fix wrong `#key` values in key-events that do not match character (#881).
- Fix handling of control and meta key sequences and special character handling
(#860).
- Handle incorrect mouse event on `ctrl-alt-del` key sequence on Chrome/Windows
(#800).
- Do not rasterize items if the resulting raster will be empty (#828).
- Fix SVG serialization in JSDOM `7.0.0` and newer (#821).
- Correctly handle gradients in SVG import on Firefox (#666).
- Fix `Shape#strokeBounds` when `#strokeScaling` is false (#856).
- Consistently interpret curves as straight or not-straight (#838).
- Switch blendMode to 'lighter' in CandyCrash (#453).
… and many more.

23
LICENSE.txt Normal file
View file

@ -0,0 +1,23 @@
Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
http://scratchdisk.com/ & http://jonathanpuckey.com/
All rights reserved.
The MIT License (MIT)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

322
README.md Normal file
View file

@ -0,0 +1,322 @@
# Paper.js - The Swiss Army Knife of Vector Graphics Scripting [![Build Status](https://travis-ci.org/paperjs/paper.js.svg?branch=develop)](https://travis-ci.org/paperjs/paper.js)
If you want to work with Paper.js, simply download the latest "stable" version
from [http://paperjs.org/download/](http://paperjs.org/download/)
- Website: <http://paperjs.org/>
- Discussion forum: <http://groups.google.com/group/paperjs>
- Mainline source code: <https://github.com/paperjs/paper.js>
- Twitter: [@paperjs](http://twitter.com/paperjs)
- Daily development builds: <http://paperjs.org/download/>
## Installing Paper.js
You can download prebuilt packages from <http://paperjs.org/download/>.
The recommended way to install and maintain Paper.js as a dependency in your
project is through Bower for browsers, and through NPM for Node.js.
If Bower is already installed installed, simply type this command in your
project folder:
bower install paper
Upon execution, you will find a `paper` folder inside the project's
`bower_components` folder.
For more information on how to install Bower, read the chapter [Installing
Node.js, NPM and Bower](#installing-nodejs-npm-and-bower).
To learn more about its features for dependence tracking, see
<http://bower.io/>.
### Which Version to Use?
The various distributions come with two different pre-build versions of
Paper.js, in minified and normal variants:
- `paper-full.js` The full version for the browser, including PaperScript
support and Acorn.js
- `paper-core.js` The core version for the browser, without PaperScript
support nor Acorn.js. You can use this to shave off some bytes and compilation
time when working with JavaScript directly.
### Installing Node.js, NPM and Bower
Node.js is required by Bower, as well as by Gulp.js, which needs to be installed
if you intend to build the library or its documentation by yourself.
There are many tutorials explaining the different ways to install Node.js on
different platforms. It is generally not recommended to install Node.js through
OS-supplied package managers, as the its development cycles move fast and these
versions are often out-of-date.
NVM can be used instead to install and maintain multiple versions of Node.js on
the same platform, as often required by different projects:
<http://blog.dynamicprogrammer.com/2014/02/18/installing-node-js-on-mac-osx.html>
on OSX, [Homebrew](http://brew.sh/) is also a good option if one version of
Node.js on the platform is enough:
<http://blog.teamtreehouse.com/install-node-js-npm-mac>
Homebrew is recommended on OSX also if you intend to install Paper.js for
Node.js, as described in the next paragraph.
For Linux see <http://nodejs.org/download/> to locate 32-bit and 64-bit nodejs
binaries as well as sources, or use NVM: <http://learn.bevry.me/node/install/>
Once Node.js (with NPM) has been installed you can install bower *globally*
using the following command:
npm install -g bower
And from there onwards, you should be able to use Bower like this:
bower search paperjs
### Installing Paper.js for Node.js through NPM
NPM is used to install Paper.js for use in Node.js. But before installing, you
need the Cairo Graphics library installed, see: <http://cairographics.org/>.
##### Installing Cairo and Pango on OSX:
The easiest way to install Cairo is install Homebrew
<http://mxcl.github.io/homebrew/> then issue the command:
brew install cairo pango
Note that currently there is an issue on OSX with Cairo. If the above causes
errors, the following will most likely fix it:
PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig/ npm install paper
Also, whenever you would like to update the modules, you will need to execute:
PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig/ npm update
If you keep forgetting about this requirement, or would like to be able to type
simple and clean commands, add this to your `.bash_profile` file:
# PKG Config for Pango / Cairo
export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:/opt/X11/lib/pkgconfig
After adding this line, your commands should work in the expected way:
npm install paper
npm update
##### Installing Cairo, Pango and all other dependencies on Debian/Ubuntu Linux:
sudo apt-get install libcairo2-dev libpango1.0-dev libssl-dev libjpeg62-dev libgif-dev
You might also need to install the build-essential package if you don't usually
build from c++ sources:
sudo apt-get install build-essential
##### After Cairo has been installed:
You should now be able to install the Paper.js module from NPM:
npm install paper
## Development
The main Paper.js source tree is hosted on
[GitHub](https://github.com/paperjs/paper.js/). `git` is required to create a
clone of the repository, and can be easily installed through your preferred
package manager on your platform.
### Get the Source
git clone --recursive git://github.com/paperjs/paper.js.git
cd paper.js
To refresh your clone and fetch changes from origin, run:
git fetch origin
To update the `jsdoc-toolkit` submodule, used to generate the documentation,
run:
git submodule update --init --recursive
### Setting Up For Building
As of 2016, Paper.js uses [Gulp.js](http://gulpjs.com/) for building, and has a
couple of dependencies as Bower and NPM modules. Read the chapter [Installing
Node.js, NPM and Bower](#installing-nodejs-npm-and-bower) if you still need to
install these.
In order to be able to build Paper.js, after checking out the repository, paper
has dependencies that need to be installed. Install them by issuing the
following commands from the Paper.js directory:
npm install
It is also recommended to install Gulp.js globally, so you can easier execute
the build commands from anywhere in the command line:
npm install -g gulp
### Building the Library
The Paper.js sources are distributed across many separate files, organised in
subfolders inside the `src` folder. To compile them all into distributable
files, you can run the `build` task:
gulp build
You will then find the built library files inside the `dist` folder, named
`paper-full.js` and `paper-core.js`, along with their minified versions. Read
more about this in [Which Version to Use?](#which-version-to-use).
### Running Directly from Separate Source Files
As a handy alternative to building the library after each change to try it out
in your scripts, there is the helper task `load`, that replaces the built
libraries with symbolic links to the `scrc/load.js` script. This script then
load the library directly from all the separate source files in the `src`
folder, through the [Prepro.js](https://github.com/lehni/prepro.js) JavaScript
preprocessing library.
This means you can switch between loading from sources and loading a built
library simply by running.
gulp load
And to go back to a built library
gulp build
Note that your PaperScripts examples do not need to change, they can keep
loading `dist/paper-full.js`, which will always do the right thing. Note also
that `src/load.js` handles both browsers and Node.js, as supported by Prepro.js.
### Other Build Tasks
Create a final zipped distribution file inside the `dist` folder:
gulp dist
And since `dist` is the default task, this is the same:
gulp
### Branch structure
Since the release of version `v0.9.22`, Paper.js has adopted aspects of the
Git-Flow workflow. For now, this just means that all development is taking place
in the `develop` branch, which is only merged into `master` when a new release
occurs. On this `develop` branch, `src/load.js` is used by default to load the
library.
### Building the Documentation
Similarly to building the library, you can run the `docs` task to build the
documentation:
gulp docs
Your docs will then be located at `dist/docs`.
### Testing
Paper.js was developed and tested from day 1 using proper unit testing through
jQuery's [Qunit](http://docs.jquery.com/Qunit). To run the tests after any
change to the library's source, simply open `index.html` inside the `test`
folder in your web browser. There should be a green bar at the top, meaning all
tests have passed. If the bar is red, some tests have not passed. These will be
highlighted and become visible when scrolling down.
You can also run the unit tests through Gulp.js on the command line:
gulp test
### Contributing
The main Paper.js source tree is hosted on GitHub, thus you should create a fork
of the repository in which you perform development. See
<http://help.github.com/forking/>.
We prefer that you send a [pull request on GitHub]
(http://help.github.com/pull-requests/) which will then be merged into the
official main line repository. You need to sign the Paper.js CLA to be able to
contribute (see below).
Also, in your first contribution, add yourself to the end of `AUTHORS.md` (which
of course is optional).
**Get the source (for contributing):**
If you want to contribute to the project you will have to [make a
fork](http://help.github.com/forking/). Then do this:
git clone --recursive git@github.com:yourusername/paper.js.git
cd paper.js
git remote add upstream git://github.com/paperjs/paper.js.git
To then fetch changes from upstream, run
git fetch upstream
#### Creating and Submitting a Patch
As mentioned above, 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/>
2. Clone of your repository: `git clone
https://yourusername@github.com/yourusername/paper.js.git`
3. This is important: Create a so-called *topic branch* based on the `develop`
branch: `git checkout -tb name-of-my-patch develop` where `name-of-my-patch`
is a short but descriptive name of the patch you're about to create. Don't
worry about the perfect name though -- you can change this name at any time
later on.
4. Hack! Make your changes, additions, etc., commit them then push them to your
GitHub fork: `git push origin name-of-my-patch`
5. Send a pull request to the upstream repository's owner by visiting your
repository's site at GitHub (i.e. https://github.com/yourusername/paper.js)
and press the "Pull Request" button. Make sure you are creating the pull
request to the `develop` branch, not the `master` branch. Here's a good guide
on pull requests: <http://help.github.com/pull-requests/>
##### Use one topic branch per feature:
Don't mix different kinds of patches in the same branch. Instead, merge them all
together into your `develop` branch (or develop everything in your `develop`
branch and then cherry-pick-and-merge into the different topic branches). Git
provides for an extremely flexible workflow, which in many ways causes more
confusion than it helps you when new to collaborative software development. The
guides provided by GitHub at <http://help.github.com/> are a really good
starting point and reference. If you are fixing an issue, a convenient way to
name the branch is to use the issue number as a prefix, like this: `git checkout
-tb issue-937-feature-add-text-styling`.
#### 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):
[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.
For a list of authors and contributors, please see [AUTHORS]
(https://github.com/paperjs/paper.js/blob/master/AUTHORS.md).
## License
Distributed under the MIT license. See [LICENSE]
(https://github.com/paperjs/paper.js/blob/master/LICENSE.txt) for details.

42
bower.json Normal file
View file

@ -0,0 +1,42 @@
{
"name": "paper",
"description": "The Swiss Army Knife of Vector Graphics Scripting",
"license": "MIT",
"homepage": "http://paperjs.org",
"repository": {
"type": "git",
"url": "git://github.com/paperjs/paper.js"
},
"bugs": "https://github.com/paperjs/paper.js/issues",
"authors": [
"Jürg Lehni <juerg@scratchdisk.com> (http://scratchdisk.com)",
"Jonathan Puckey <jonathan@studiomoniker.com> (http://studiomoniker.com)"
],
"main": "dist/paper-full.js",
"ignore": [
"build",
"components",
"dist/paper-node.js",
"projects",
"node_modules",
"package.json",
"src",
"test"
],
"keywords": [
"vector",
"graphic",
"graphics",
"2d",
"geometry",
"bezier",
"curve",
"curves",
"path",
"paths",
"canvas",
"svg",
"paper",
"paper.js"
]
}

34
component.json Normal file
View file

@ -0,0 +1,34 @@
{
"name": "paper",
"version": "0.9.25",
"description": "The Swiss Army Knife of Vector Graphics Scripting",
"license": "MIT",
"repo": "paperjs/paper.js",
"main": [
"dist/paper-full.js"
],
"scripts": [
"dist/paper-full.js"
],
"files": [
"AUTHORS.md",
"LICENSE.txt",
"README.md"
],
"keywords": [
"vector",
"graphic",
"graphics",
"2d",
"geometry",
"bezier",
"curve",
"curves",
"path",
"paths",
"canvas",
"svg",
"paper",
"paper.js"
]
}

414
dist/docs/assets/css/docs.css vendored Normal file
View file

@ -0,0 +1,414 @@
@charset "UTF-8";
form,
img,
ul,
ol,
table,
td,
article,
figure,
figcaption {
margin: 0;
padding: 0;
border: 0; }
a {
outline: none;
border: 0; }
ul,
ol {
list-style: none outside none; }
table {
border-spacing: 0; }
td {
vertical-align: top; }
html {
-webkit-text-size-adjust: none; }
/* Content Styles */
article {
/* Text Content */ }
article,
article a {
color: #333333; }
article a {
border-bottom: 1px solid; }
article a:hover,
article a:hover em {
background: #e5e5e5; }
article em {
font-style: normal;
background: #efefef; }
article p,
article ul,
article ol {
margin: 0 8px 16px 0; }
article p.small,
article ul.small,
article ol.small {
margin-bottom: 8px; }
article figure,
article .CodeMirror,
article .paperscript {
margin-bottom: 16px; }
article ul,
article ol {
padding: 0;
list-style: none outside none; }
article ul ul,
article ul ol,
article ol ul,
article ol ol {
margin-bottom: 0; }
article ul > li {
margin-left: 1em;
position: relative; }
article ul > li:before {
content: '';
position: absolute;
left: -1em; }
article ol {
counter-reset: item; }
article ol > li {
margin-left: 1.5em;
position: relative; }
article ol > li:before {
position: absolute;
left: -1.5em;
content: counter(item,upper-latin) ") ";
counter-increment: item; }
section {
clear: both;
margin: 0 0 16px;
padding: 0; }
.column {
width: 260px;
float: left; }
.column + .column {
margin-left: 16px; }
.row {
clear: both; }
.donation {
padding-bottom: 16px; }
.donation input,
.donation select {
margin-right: 0.35em; }
.reference h1,
.reference h2,
.reference h3,
.reference h4 {
font-size: 13px;
font-weight: normal;
margin: 0; }
.reference h1,
.reference h2,
.reference h3 {
height: 18px;
border-bottom: 1px solid;
margin-bottom: 16px; }
.reference h2 a {
font-weight: bold; }
.reference h3 {
margin-top: 16px;
border-bottom-style: dotted; }
.reference h4 {
font-weight: bold; }
.reference h4 .description {
font-weight: normal; }
.reference h4 .description:before {
content: ' — '; }
.reference h4 + ul, .reference h4 + pre, .reference h4 + .paperscript {
margin-top: 8px;
margin-bottom: 16px; }
.reference a tt {
line-height: 17px; }
.reference ul,
.reference p {
margin-bottom: 16px; }
.reference hr {
border: none;
border-bottom: 1px dotted; }
.reference .reference-list ul,
.reference .reference-inherited ul {
margin-left: 16px; }
.reference .reference-inherited ul li {
text-indent: -30px;
padding-left: 30px; }
.reference ul.reference-classes {
padding-bottom: 4px; }
.reference ul.reference-classes li {
margin: 0;
text-indent: 0; }
.reference ul.reference-classes ul {
margin: 0 0 10px 10px; }
.reference ul.reference-classes h2,
.reference ul.reference-classes h3,
.reference ul.reference-classes hr {
margin: 10px 0 10px 0; }
.reference ul.reference-classes .first h2 {
margin-top: 0; }
* html .reference ul.reference-classes img {
margin-top: 5px; }
.reference ul.member-list li {
margin-left: 2em;
margin-bottom: 8px;
text-indent: -2em; }
.reference ul.member-list li:before {
display: none; }
.reference .reference-members {
margin-bottom: 16px; }
.reference .member-group-text {
margin-bottom: 16px; }
.reference .member-description {
border: 1px solid #999;
border-top: 0;
margin: 16px 0 16px 0; }
.reference .member-header {
border-top: 1px solid #999;
padding: 10px;
*zoom: 1; }
.reference .member-header .member-link {
float: left; }
.reference .member-header .member-close {
float: right; }
.reference .member-header:before, .reference .member-header:after {
content: " ";
display: table; }
.reference .member-header:after {
clear: both; }
.reference .member-text {
border-top: 1px dashed #999;
padding: 10px 10px 0 10px;
margin-bottom: -6px; }
.reference .member-text ul ul,
.reference .member-text ul ol,
.reference .member-text ol ul,
.reference .member-text ol ol,
.reference .member-text ul p,
.reference .member-text ol p {
margin-bottom: 8px; }
.reference .member-link {
text-indent: -30px;
padding-left: 30px; }
body,
select,
input,
textarea {
font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif; }
tt,
pre,
.CodeMirror {
font-family: Menlo, Consolas, "Vera Mono", monospace;
font-size: 12px;
line-height: 17px; }
body {
background: #fff;
margin: 16px;
font-size: 13px;
line-height: 20px;
color: #333333;
max-width: 540px; }
select,
input,
textarea {
font-size: 11px;
margin: 0;
color: #000; }
a {
color: #333333;
text-decoration: none;
border-bottom: 1px solid #333333; }
a:hover {
background: #e5e5e5; }
img {
border: 0; }
p {
margin: 0 0 16px 0; }
ul,
ol {
padding: 0;
margin: 0 0 16px 0;
list-style: none; }
.clear {
clear: both; }
.hidden {
display: none; }
.reference-index,
.reference-index a {
color: #009dec;
border-bottom: 0px; }
.reference-index a:hover {
background: #e3f4fc; }
.reference-index h2,
.reference-index h3,
.reference-index hr {
border-color: #009dec; }
.reference h1 {
font-size: 18px;
font-weight: normal;
line-height: 24px;
border: none; }
.reference h1 .version {
font-size: 10px;
line-height: 16px;
vertical-align: top;
margin-left: 0.35em; }
.footer {
margin-top: 16px; }
.CodeMirror pre {
margin: 0;
padding: 0;
background: transparent; }
.paperscript .CodeMirror {
height: 100%; }
.CodeMirror-scroll {
min-height: 100%;
overflow: auto; }
.CodeMirror-gutter {
position: absolute;
left: 0;
top: 0;
min-width: 30px;
height: 100%;
background-color: #f4f4f4;
border-right: 1px solid #999; }
.CodeMirror-gutter-text {
color: #aaa;
text-align: right;
padding: 2px 8px 2px 8px; }
.CodeMirror-gutter-text pre {
font-size: 10px; }
.CodeMirror-lines {
background: #ffffff;
padding: 2px 0 2px 8px; }
.CodeMirror-lines pre.highlight {
background-color: #edf5fc; }
.CodeMirror-cursor {
z-index: 10;
position: absolute;
visibility: hidden;
border-left: 1px solid #7c7c7c !important;
height: 17px; }
.CodeMirror-selected {
background: #ccc !important;
color: HighlightText !important;
padding: 2px 0 2px 0; }
.CodeMirror-focused .CodeMirror-cursor {
visibility: visible; }
.CodeMirror-focused .CodeMirror-selected {
background: Highlight !important; }
.CodeMirror-matchingbracket {
background: #e3fc8d !important; }
.CodeMirror-nonmatchingbracket {
color: #d62a28 !important; }
/* JavaScript & HTML Modes */
span.cm-keyword {
color: #ff7800; }
span.cm-atom, span.cm-number {
color: #3b5bb5; }
span.cm-def, span.cm-variable-2, span.cm-variable-3 {
color: #3a4a64; }
span.cm-variable {
color: #000; }
span.cm-property {
color: #000; }
span.cm-operator {
color: #000; }
span.cm-comment {
color: #8c868f; }
span.cm-string {
color: #409b1c; }
span.cm-meta {
color: #555; }
span.cm-error {
color: #f30; }
span.cm-qualifier {
color: #555; }
span.cm-builtin {
color: #30a; }
span.cm-bracket {
color: #cc7; }
span.cm-tag {
font-weight: bold;
color: #3b5bb5; }
span.cm-attribute {
font-style: italic;
color: #3b5bb5; }
.paperscript {
position: relative; }
.paperscript .buttons {
position: absolute;
right: 0;
z-index: 1; }
.paperscript .button,
.paperscript .explain {
float: right;
display: none;
font-size: 12px;
line-height: 16px;
padding: 2px 6px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin: 8px 8px 0 0; }
.paperscript .button {
background: #eee; }
.paperscript .explain {
background: #e3f4fc; }
.paperscript .explain, .paperscript:hover .button {
display: inline-block; }
.paperscript .button:hover {
background: #ddd;
cursor: pointer; }
.paperscript .tools {
display: inline; }
.paperscript .source {
overflow: auto;
border: 1px solid #999; }
.paperscript .CodeMirror {
margin: 0 !important; }
.paperscript .CodeMirror-gutter-text,
.paperscript .CodeMirror-lines {
padding-top: 8px;
padding-bottom: 8px; }
.paperscript .canvas {
line-height: 0; }
.paperscript .canvas.border canvas {
border: 1px solid #999; }
.paperscript.split .canvas {
border: 1px solid #999;
border-top: 0; }

4
dist/docs/assets/js/codemirror.js vendored Normal file

File diff suppressed because one or more lines are too long

493
dist/docs/assets/js/docs.js vendored Normal file
View file

@ -0,0 +1,493 @@
// Install some useful jQuery extensions that we use a lot
$.support.touch = 'ontouchstart' in window;
$.extend($.fn, {
orNull: function() {
return this.length > 0 ? this : null;
},
findAndSelf: function(selector) {
return this.find(selector).add(this.filter(selector));
}
});
// Little Helpers
function hyphenate(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
function isVisible(el) {
if (el.is(':hidden'))
return false;
var viewTop = $(window).scrollTop();
var viewBottom = viewTop + $(window).height();
var top = el.offset().top;
var bottom = top + el.height();
return top >= viewTop && bottom <= viewBottom
|| top <= viewTop && bottom >= viewTop
|| top <= viewBottom && bottom >= viewBottom;
}
function smoothScrollTo(el, callback) {
$('html, body').animate({
scrollTop: el.offset().top
}, 250, callback);
}
var behaviors = {};
behaviors.hiDPI = function() {
// Turn off hiDPI for all touch devices for now, until the site is built
// true to scale.
if ($.support.touch)
$('canvas').attr('hidpi', 'off');
};
behaviors.sections = function() {
var toc = $('.toc');
var checks = [];
var active;
function update() {
$.each(checks, function() {
if (this())
return false;
});
}
$(document).scroll(update);
$(window).resize(update);
setTimeout(update, 0);
$('article section').each(function() {
var section = $(this);
var anchor = $('a', section);
// Move content until next section inside section
section.append(section.nextUntil('section'));
var title = anchor.attr('title') || $('h1,h2', section).first().text();
var id = section.attr('id');
if (!id) {
id = hyphenate(title)
.replace(/\s+/g, '-')
.replace(/^#/, '')
.replace(/[!"#$%&'\()*+,.\/:;<=>?@\[\\\]\^_`{|}~]+/g, '-')
.replace(/-+/g, '-');
section.attr('id', id);
anchor.attr('name', id);
}
function activate() {
if (active)
active.removeClass('active');
selector.addClass('active');
active = selector;
}
// Create table of contents on the fly
if (toc) {
var selector = $('<li class="entry selector"><a href="#' + id + '">'
+ title + '</a></li>').appendTo(toc);
if (section.is('.spacer'))
selector.addClass('spacer');
$('a', selector).click(function() {
smoothScrollTo(section, function() {
window.location.hash = id;
});
return false;
});
checks.push(function() {
var visible = isVisible(section);
if (visible)
activate();
return visible;
});
}
});
// Adjust height of last section so that the last anchor aligns perfectly
// with the top of the browser window.
var lastSection = $('article section:last');
var lastAnchor = $('a[name]', lastSection);
function resize() {
lastSection.height('auto');
var bottom = $(document).height() - lastAnchor.offset().top - $(window).height();
if (bottom < 0)
lastSection.height(lastSection.height() - bottom);
}
if (lastSection.length && lastAnchor.length) {
$(window).on({
load: resize,
resize: resize
});
resize();
}
};
behaviors.sticky = function() {
$('.sticky').each(function() {
me = $(this);
container = $('<div/>').append(me.contents()).appendTo(me);
// Insert a div wrapper of which the fixed class is modified depending on position
$(window).scroll(function() {
if (container.is(':visible'))
container.toggleClass('fixed', me.offset().top - $(this).scrollTop() <= 0);
});
});
};
behaviors.hash = function() {
var hash = unescape(window.location.hash);
if (hash) {
// First see if there's a class member to open
var target = $(hash);
if (target.length) {
if (target.hasClass('member'))
toggleMember(target);
smoothScrollTo(target);
}
}
};
behaviors.thumbnails = function() {
var thumbnails = $('.thumbnail');
var height = 0;
thumbnails.each(function() {
height = Math.max(height, $(this).height());
});
$('.thumbnail').height(height);
};
behaviors.expandableLists = function() {
$('.expandable-list').each(function() {
var list = $(this);
$('<a href="#" class="arrow"/>')
.prependTo(list)
.click(function() {
list.toggleClass('expanded');
});
});
};
behaviors.referenceClass = function() {
var classes = $('.reference-classes');
if (classes.length) {
// Mark currently selected class as active. Do it client-sided
// since the menu is generated by jsdocs.
var path = window.location.pathname.toLowerCase();
$('a[href="' + path + '"]', classes).addClass('active');
}
};
behaviors.hover = function() {
$('.hover').hover(function() {
$('.normal', this).toggleClass('hidden');
$('.over', this).toggleClass('hidden');
});
};
behaviors.code = function() {
$('.code:visible, pre:visible code').each(function() {
createCode($(this));
});
};
behaviors.paperscript = function() {
// Ignore all paperscripts in the automatic load event, and load them
// separately in createPaperScript() when needed.
$('script[type="text/paperscript"]').attr('ignore', 'true');
$('.paperscript:visible').each(function() {
createPaperScript($(this));
});
};
function createCodeMirror(place, options, source) {
return new CodeMirror(place, $.extend({}, {
mode: 'javascript',
lineNumbers: true,
matchBrackets: true,
tabSize: 4,
indentUnit: 4,
indentWithTabs: true,
tabMode: 'shift',
value: source.text().match(
// Remove first & last empty line
/^\s*?[\n\r]?([\u0000-\uffff]*?)[\n\r]?\s*?$/)[1]
}, options));
}
function createCode(element) {
if (element.data('initialized'))
return;
var start = element.attr('start');
var highlight = element.attr('highlight');
var editor = createCodeMirror(function(el) {
element.replaceWith(el);
}, {
lineNumbers: !element.parent('.resource-text').length,
firstLineNumber: parseInt(start || 1, 10),
mode: element.attr('mode') || 'javascript',
readOnly: true
}, element);
if (highlight) {
var highlights = highlight.split(',');
for (var i = 0, l = highlights.length; i < l; i++) {
var highlight = highlights[i].split('-');
var hlStart = parseInt(highlight[0], 10) - 1;
var hlEnd = highlight.length == 2
? parseInt(highlight[1], 10) - 1 : hlStart;
if (start) {
hlStart -= start - 1;
hlEnd -= start - 1;
}
for (var j = hlStart; j <= hlEnd; j++) {
editor.setLineClass(j, 'highlight');
}
}
}
element.data('initialized', true);
}
function createPaperScript(element) {
if (element.data('initialized'))
return;
var script = $('script', element).orNull(),
runButton = $('.button.run', element).orNull();
if (!script)
return;
// Now load / parse / execute the script
script.removeAttr('ignore');
var scope = paper.PaperScript.load(script[0]);
if (!runButton)
return;
var canvas = $('canvas', element),
hasResize = canvas.attr('resize'),
showSplit = element.hasClass('split'),
sourceFirst = element.hasClass('source'),
editor = null,
hasBorders = true,
edited = false,
animateExplain,
explain = $('.explain', element).orNull(),
source = $('<div class="source hidden"/>').insertBefore(script);
if (explain) {
explain.addClass('hidden');
var text = explain.html().replace(/http:\/\/([\w.]+)/g, function(url, domain) {
return '<a href="' + url + '">' + domain + '</a>';
}).trim();
// Add explanation bubbles to tickle the visitor's fancy
var explanations = [{
index: 0,
list: [
[text ? 4 : 3, text || ''],
[1, ''],
[4, '<b>Note:</b> You can view and even edit<br>the source right here in the browser'],
[1, ''],
[3, 'To do so, simply press the <b>Source</b> button &rarr;']
]
}, {
index: 0,
indexIfEdited: 3, // Skip first sentence if user has already edited code
list: [
[4, ''],
[3, 'Why don\'t you try editing the code?'],
[1, ''],
[4, 'To run it again, simply press press <b>Run</b> &rarr;']
]
}];
var timer,
mode;
animateExplain = function(clearPrevious) {
if (timer)
timer = clearTimeout(timer);
// Set previous mode's index to the end?
if (mode && clearPrevious)
mode.index = mode.list.length;
mode = explanations[source.hasClass('hidden') ? 0 : 1];
if (edited && mode.index < mode.indexIfEdited)
mode.index = mode.indexIfEdited;
var entry = mode.list[mode.index];
if (entry) {
explain.removeClass('hidden');
explain.html(entry[1]);
timer = setTimeout(function() {
// Only increase once we're stepping, not in animate()
// itself, as entering & leaving would continuosly step
mode.index++;
animateExplain();
}, entry[0] * 1000);
}
if (!entry || !entry[1])
explain.addClass('hidden');
};
element
.mouseover(function() {
if (!timer)
animateExplain();
})
.mouseout(function() {
// Check the effect of :hover on button to see if we need
// to turn off...
// TODO: make mouseenter / mouseleave events work again
if (timer && runButton.css('display') == 'none') {
timer = clearTimeout(timer);
explain.addClass('hidden');
}
});
}
function showSource(show) {
source.toggleClass('hidden', !show);
runButton.text(show ? 'Run' : 'Source');
if (explain)
animateExplain(true);
if (show && !editor) {
editor = createCodeMirror(source[0], {
onKeyEvent: function(editor, event) {
edited = true;
}
}, script);
}
}
function runScript() {
// Update script to edited version
var code = editor.getValue();
script.text(code);
// Keep a reference to the used canvas, since we're going to
// fully clear the scope and initialize again with this canvas.
// Support both old and new versions of paper.js for now:
var element = scope.view.element;
// Clear scope first, then evaluate a new script.
scope.clear();
scope.initialize(script[0]);
scope.setup(element);
scope.execute(code);
}
function resize() {
source
.width(element.width() - (hasBorders ? 2 : 1))
.height(element.height() - (hasBorders ? 2 : 0));
if (editor)
editor.refresh();
}
function toggleView() {
var show = source.hasClass('hidden');
resize();
canvas.toggleClass('hidden', show);
showSource(show);
if (!show)
runScript();
// Add extra margin if there is scrolling
var scrollHeight = $('.CodeMirror .CodeMirror-scroll', source).height();
runButton.css('margin-right', scrollHeight > element.height() ? 25 : 8);
}
if (hasResize) {
paper.view.on('resize', resize);
hasBorders = false;
source.css('border-width', '0 0 0 1px');
}
if (showSplit) {
showSource(true);
} else if (sourceFirst) {
toggleView();
}
runButton
.click(function() {
if (showSplit) {
runScript();
} else {
toggleView();
}
return false;
})
.mousedown(function() {
return false;
});
element.data('initialized', true);
}
// Reference (before behaviors)
var lastMember = null;
function toggleMember(member, dontScroll, offsetElement) {
var link = $('.member-link:first', member);
if (!link.length)
return true;
var desc = $('.member-description', member);
var visible = !link.hasClass('hidden');
// Retrieve y-offset before any changes, so we can correct scrolling after
var offset = (offsetElement || member).offset().top;
if (lastMember && !lastMember.is(member)) {
var prev = lastMember;
lastMember = null;
toggleMember(prev, true);
}
lastMember = visible && member;
link.toggleClass('hidden', visible);
desc.toggleClass('hidden', !visible);
if (!dontScroll) {
// Correct scrolling relatively to where we are, by checking the amount
// the element has shifted due to the above toggleMember call, and
// correcting by 11px offset, caused by 1px border and 10px padding.
var scroll = $(document).scrollTop();
// Only change hash if we're not in frames, since there are redrawing
// issues with that on Chrome.
if (parent === self)
window.location.hash = visible ? member.attr('id') : '';
$(document).scrollTop(scroll
+ (visible ? desc : link).offset().top - offset
+ 11 * (visible ? 1 : -1));
}
if (!member.data('initialized') && visible) {
behaviors.code();
behaviors.paperscript();
member.data('initialized', true);
}
return false;
}
$(function() {
$('.reference .member').each(function() {
var member = $(this);
var link = $('.member-link', member);
// Add header to description, with link and closing button
var header = $('<div class="member-header"/>').prependTo($('.member-description', member));
// Clone link, but remove name, id and change href
link.clone().removeAttr('name').removeAttr('id').attr('href', '#').appendTo(header);
// Add closing button.
header.append('<div class="member-close"><input type="button" value="Close"></div>');
});
// Give open / close buttons behavior
$('.reference')
.on('click', '.member-link, .member-close', function() {
return toggleMember($(this).parents('.member'));
})
.on('click', '.member-text a', function() {
if (this.href.match(/^(.*?)\/?#|$/)[1] === document.location.href.match(/^(.*?)\/?(?:#|$)/)[1]) {
toggleMember($(this.href.match(/(#.*)$/)[1]), false, $(this));
return false;
}
});
});
// DOM-Ready
$(function() {
for (var i in behaviors)
behaviors[i]();
});

6
dist/docs/assets/js/jquery.js vendored Normal file

File diff suppressed because one or more lines are too long

14054
dist/docs/assets/js/paper.js vendored Normal file

File diff suppressed because one or more lines are too long

1953
dist/docs/classes/Color.html vendored Normal file

File diff suppressed because it is too large Load diff

7578
dist/docs/classes/CompoundPath.html vendored Normal file

File diff suppressed because it is too large Load diff

1787
dist/docs/classes/Curve.html vendored Normal file

File diff suppressed because it is too large Load diff

654
dist/docs/classes/CurveLocation.html vendored Normal file
View file

@ -0,0 +1,654 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CurveLocation</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>CurveLocation</h1>
<p>CurveLocation objects describe a location on <a href="../classes/Curve.html"><tt>Curve</tt></a> objects, as defined by the curve-time <a href="../classes/CurveLocation.html#parameter"><tt>parameter</tt></a>, a value between <code>0</code> (beginning of the curve) and <code>1</code> (end of the curve). If the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, its <a href="../classes/CurveLocation.html#index"><tt>index</tt></a> inside the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array is also provided.</p>
<p>The class is in use in many places, such as <a href="../classes/Path.html#getlocationat-offset"><tt>path.getLocationAt(offset)</tt></a>, <a href="../classes/Path.html#getlocationof-point"><tt>path.getLocationOf(point)</tt></a>, <a href="../classes/Path.html#getnearestlocation-point"><tt>path.getNearestLocation(point)</tt></a>, <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>, etc.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="curvelocation-curve-parameter" class="member">
<div class="member-link">
<a name="curvelocation-curve-parameter" href="#curvelocation-curve-parameter"><tt><b>CurveLocation</b>(curve, parameter[, point])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new CurveLocation object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>curve:</tt>
<a href="../classes/Curve.html"><tt>Curve</tt></a>
</li>
<li>
<tt>parameter:</tt>
<tt>Number</tt>
</li>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;optional
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="segment" class="member">
<div class="member-link">
<a name="segment" href="#segment"><tt><b>segment</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The segment of the curve which is closer to the described location.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Segment.html"><tt>Segment</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="curve" class="member">
<div class="member-link">
<a name="curve" href="#curve"><tt><b>curve</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curve that this location belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Curve.html"><tt>Curve</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="path" class="member">
<div class="member-link">
<a name="path" href="#path"><tt><b>path</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The path that this locations is situated on.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="index" class="member">
<div class="member-link">
<a name="index" href="#index"><tt><b>index</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The index of the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> within the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> list, if it is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Index</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="parameter" class="member">
<div class="member-link">
<a name="parameter" href="#parameter"><tt><b>parameter</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curve-time parameter, as used by various bezier curve calculations. It is value between <code>0</code> (beginning of the curve) and <code>1</code> (end of the curve).</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="point" class="member">
<div class="member-link">
<a name="point" href="#point"><tt><b>point</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The point which is defined by the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> and <a href="../classes/CurveLocation.html#parameter"><tt>parameter</tt></a>.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="offset" class="member">
<div class="member-link">
<a name="offset" href="#offset"><tt><b>offset</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The length of the path from its beginning up to the location described by this object. If the curve is not part of a path, then the length within the curve is returned instead.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="curveoffset" class="member">
<div class="member-link">
<a name="curveoffset" href="#curveoffset"><tt><b>curveOffset</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The length of the curve from its beginning up to the location described by this object.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="intersection" class="member">
<div class="member-link">
<a name="intersection" href="#intersection"><tt><b>intersection</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curve location on the intersecting curve, if this location is the result of a call to <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a> / <a href="../classes/Curve.html#getintersections-curve"><tt>curve.getIntersections(curve)</tt></a>.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="tangent" class="member">
<div class="member-link">
<a name="tangent" href="#tangent"><tt><b>tangent</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The tangential vector to the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> at the given location.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="normal" class="member">
<div class="member-link">
<a name="normal" href="#normal"><tt><b>normal</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The normal vector to the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> at the given location.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="curvature" class="member">
<div class="member-link">
<a name="curvature" href="#curvature"><tt><b>curvature</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curvature of the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> at the given location.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="distance" class="member">
<div class="member-link">
<a name="distance" href="#distance"><tt><b>distance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The distance from the queried point to the returned location.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Curve.html#getnearestlocation-point"><tt>curve.getNearestLocation(point)</tt></a></tt></li>
<li><tt><a href="../classes/Path.html#getnearestlocation-point"><tt>path.getNearestLocation(point)</tt></a></tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="equals-location" class="member">
<div class="member-link">
<a name="equals-location" href="#equals-location"><tt><b>equals</b>(location)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks whether tow CurveLocation objects are describing the same location on a path, by applying the same tolerances as elsewhere when dealing with curve time parameters.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>location:</tt>
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the locations are equal, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
<div id="tostring" class="member">
<div class="member-link">
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the curve location
</li>
</ul>
</div>
</div>
</div>
<h3>Tests</h3>
<div id="istouching" class="member">
<div class="member-link">
<a name="istouching" href="#istouching"><tt><b>isTouching</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if the location is an intersection with another curve and is merely touching the other curve, as opposed to crossing it.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the location is an intersection that is merely touching another curve, <tt>false</tt> otherwise
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/CurveLocation.html#iscrossing"><tt>isCrossing</tt></a>()</tt></li>
</ul>
</div>
</div>
</div>
<div id="iscrossing" class="member">
<div class="member-link">
<a name="iscrossing" href="#iscrossing"><tt><b>isCrossing</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if the location is an intersection with another curve and is crossing the other curve, as opposed to just touching it.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the location is an intersection that is crossing another curve, <tt>false</tt> otherwise
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/CurveLocation.html#istouching"><tt>isTouching</tt></a>()</tt></li>
</ul>
</div>
</div>
</div>
<div id="hasoverlap" class="member">
<div class="member-link">
<a name="hasoverlap" href="#hasoverlap"><tt><b>hasOverlap</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if the location is an intersection with another curve and is part of an overlap between the two involved paths.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the location is an intersection that is part of an overlap between the two involved paths, <tt>false</tt> otherwise
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/CurveLocation.html#iscrossing"><tt>isCrossing</tt></a>()</tt></li>
<li><tt><a href="../classes/CurveLocation.html#istouching"><tt>isTouching</tt></a>()</tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

170
dist/docs/classes/Event.html vendored Normal file
View file

@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Event</h1>
<p>The Event object is the base class for any of the other event types, such as <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a>, <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> and <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a>.</p>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="timestamp" class="member">
<div class="member-link">
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The time at which the event was created, in milliseconds since the epoch.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="modifiers" class="member">
<div class="member-link">
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current state of the keyboard modifiers.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>object</tt>
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="preventdefault" class="member">
<div class="member-link">
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
</div>
</div>
</div>
<div id="stoppropagation" class="member">
<div class="member-link">
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Prevents further propagation of the current event.</p>
</div>
</div>
</div>
<div id="stop" class="member">
<div class="member-link">
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

234
dist/docs/classes/Gradient.html vendored Normal file
View file

@ -0,0 +1,234 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradient</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Gradient</h1>
<p>The Gradient object.</p>
<h4>Example:<span class="description">Applying a linear gradient color containing evenly distributed color stops:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
// Define two points which we will be using to construct
// the path and to position the gradient color:
var topLeft = view.center - [80, 80];
var bottomRight = view.center + [80, 80];
// Create a rectangle shaped path between
// the topLeft and bottomRight points:
var path = new Path.Rectangle({
topLeft: topLeft,
bottomRight: bottomRight,
// Fill the path with a gradient of three color stops
// that runs between the two points we defined earlier:
fillColor: {
gradient: {
stops: ['yellow', 'red', 'blue']
},
origin: topLeft,
destination: bottomRight
}
});
</script>
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
</div>
<h4>Example:<span class="description">Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
var path = new Path.Circle({
center: view.center,
radius: view.bounds.height * 0.4
});
// Fill the path with a radial gradient color with three stops:
// yellow from 0% to 5%, mix between red from 5% to 20%,
// mix between red and black from 20% to 100%:
path.fillColor = {
gradient: {
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
radial: true
},
origin: path.position,
destination: path.bounds.rightCenter
};
</script>
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="stops" class="member">
<div class="member-link">
<a name="stops" href="#stops"><tt><b>stops</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The gradient stops on the gradient ramp.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
<div id="radial" class="member">
<div class="member-link">
<a name="radial" href="#radial"><tt><b>radial</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the gradient is radial or linear.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="clone" class="member">
<div class="member-link">
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient
</li>
</ul>
</div>
</div>
</div>
<div id="equals-gradient" class="member">
<div class="member-link">
<a name="equals-gradient" href="#equals-gradient"><tt><b>equals</b>(gradient)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks whether the gradient is equal to the supplied gradient.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>gradient:</tt>
<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if they are equal, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

267
dist/docs/classes/GradientStop.html vendored Normal file
View file

@ -0,0 +1,267 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GradientStop</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>GradientStop</h1>
<p>The GradientStop object.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="gradientstop" class="member">
<div class="member-link">
<a name="gradientstop" href="#gradientstop"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a GradientStop object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>color:</tt>
<a href="../classes/Color.html"><tt>Color</tt></a>
&mdash;&nbsp;the color of the stop
&mdash;&nbsp;optional, default: <tt>new Color(0, 0, 0)</tt>
</li>
<li>
<tt>rampPoint:</tt>
<tt>Number</tt>
&mdash;&nbsp;the position of the stop on the gradient ramp as a value between 0 and 1
&mdash;&nbsp;optional, default: <tt>0</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="ramppoint" class="member">
<div class="member-link">
<a name="ramppoint" href="#ramppoint"><tt><b>rampPoint</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The ramp-point of the gradient stop as a value between <code>0</code> and <code>1</code>.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
<h4>Example:<span class="description">Animating a gradient's ramp points:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
// Create a circle shaped path at the center of the view,
// using 40% of the height of the view as its radius
// and fill it with a radial gradient color:
var path = new Path.Circle({
center: view.center,
radius: view.bounds.height * 0.4
});
path.fillColor = {
gradient: {
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
radial: true
},
origin: path.position,
destination: path.bounds.rightCenter
};
var gradient = path.fillColor.gradient;
// This function is called each frame of the animation:
function onFrame(event) {
var blackStop = gradient.stops[2];
// Animate the rampPoint between 0.7 and 0.9:
blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
// Animate the rampPoint between 0.2 and 0.4
var redStop = gradient.stops[1];
redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
}
</script>
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
</div>
</div>
</div>
</div>
<div id="color" class="member">
<div class="member-link">
<a name="color" href="#color"><tt><b>color</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The color of the gradient stop.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>
</li>
</ul>
<h4>Example:<span class="description">Animating a gradient's ramp points:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
// Create a circle shaped path at the center of the view,
// using 40% of the height of the view as its radius
// and fill it with a radial gradient color:
var path = new Path.Circle({
center: view.center,
radius: view.bounds.height * 0.4
});
path.fillColor = {
gradient: {
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
radial: true
},
origin: path.position,
destination: path.bounds.rightCenter
};
var redStop = path.fillColor.gradient.stops[1];
var blackStop = path.fillColor.gradient.stops[2];
// This function is called each frame of the animation:
function onFrame(event) {
// Animate the rampPoint between 0.7 and 0.9:
blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
// Animate the rampPoint between 0.2 and 0.4
redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
}
</script>
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="clone" class="member">
<div class="member-link">
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient-stop
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

6160
dist/docs/classes/Group.html vendored Normal file

File diff suppressed because it is too large Load diff

239
dist/docs/classes/HitResult.html vendored Normal file
View file

@ -0,0 +1,239 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HitResult</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>HitResult</h1>
<p>A HitResult object contains information about the results of a hit test. It is returned by <a href="../classes/Item.html#hittest-point"><tt>item.hitTest(point)</tt></a> and <a href="../classes/Project.html#hittest-point"><tt>project.hitTest(point)</tt></a>.</p>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="type" class="member">
<div class="member-link">
<a name="type" href="#type"><tt><b>type</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Describes the type of the hit result. For example, if you hit a segment point, the type would be <code>&#39;segment&#39;</code>.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'segment'</tt>, <tt>'handle-in'</tt>, <tt>'handle-out'</tt>, <tt>'curve'</tt>, <tt>'stroke'</tt>, <tt>'fill'</tt>, <tt>'bounds'</tt>, <tt>'center'</tt>, <tt>'pixel'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="name" class="member">
<div class="member-link">
<a name="name" href="#name"><tt><b>name</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>If the HitResult has a <a href="../classes/HitResult.html#type"><tt>hitResult.type</tt></a> of <code>&#39;bounds&#39;</code>, this property describes which corner of the bounding rectangle was hit.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'top-left'</tt>, <tt>'top-right'</tt>, <tt>'bottom-left'</tt>, <tt>'bottom-right'</tt>, <tt>'left-center'</tt>, <tt>'top-center'</tt>, <tt>'right-center'</tt>, <tt>'bottom- center'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="item" class="member">
<div class="member-link">
<a name="item" href="#item"><tt><b>item</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item that was hit.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="location" class="member">
<div class="member-link">
<a name="location" href="#location"><tt><b>location</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>If the HitResult has a type of &lsquo;curve&rsquo; or &lsquo;stroke&rsquo;, this property gives more information about the exact position that was hit on the path.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="color" class="member">
<div class="member-link">
<a name="color" href="#color"><tt><b>color</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>If the HitResult has a type of &lsquo;pixel&rsquo;, this property refers to the color of the pixel on the <a href="../classes/Raster.html"><tt>Raster</tt></a> that was hit.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="segment" class="member">
<div class="member-link">
<a name="segment" href="#segment"><tt><b>segment</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>If the HitResult has a type of &lsquo;stroke&rsquo;, &lsquo;segment&rsquo;, &lsquo;handle-in&rsquo; or &lsquo;handle-out&rsquo;, this property refers to the segment that was hit or that is closest to the hitResult.location on the curve.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Segment.html"><tt>Segment</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="point" class="member">
<div class="member-link">
<a name="point" href="#point"><tt><b>point</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Describes the actual coordinates of the segment, handle or bounding box corner that was hit.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

5786
dist/docs/classes/Item.html vendored Normal file

File diff suppressed because it is too large Load diff

136
dist/docs/classes/Key.html vendored Normal file
View file

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Key</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Key</h1>
</div>
<div class="reference-members">
<h2>Static Properties</h2>
<div id="modifiers" class="member">
<div class="member-link">
<a name="modifiers" href="#modifiers"><tt><b>Key.modifiers</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current state of the keyboard modifiers.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Object</tt>
</li>
</ul>
<ul class="member-list">
<h4>Options:</h4>
<li><tt>modifiers.shift: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the shift key is pressed, <tt>false</tt> otherwise.</li>
<li><tt>modifiers.control: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the control key is pressed, <tt>false</tt> otherwise.</li>
<li><tt>modifiers.alt: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the alt/option key is pressed, <tt>false</tt> otherwise.</li>
<li><tt>modifiers.meta: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the meta/windows/command key is pressed, <tt>false</tt> otherwise.</li>
<li><tt>modifiers.capsLock: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the caps-lock key is active, <tt>false</tt> otherwise.</li>
<li><tt>modifiers.space: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the space key is pressed, <tt>false</tt> otherwise.</li>
<li><tt>modifiers.option: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the alt/option key is pressed, <tt>false</tt> otherwise. This is the same as <code>modifiers.alt</code></li>
<li><tt>modifiers.command: <tt>Boolean</tt></tt> &mdash; <tt>true</tt> if the meta key is pressed on Mac, or the control key is pressed on Windows and Linux, <tt>false</tt> otherwise.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="reference-members">
<h2>Static Methods</h2>
<div id="isdown-key" class="member">
<div class="member-link">
<a name="isdown-key" href="#isdown-key"><tt><b>Key.isDown</b>(key)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks whether the specified key is pressed.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>key:</tt>
<tt>String</tt>
&mdash;&nbsp;any character or special key descriptor: <tt>&lsquo;enter&rsquo;</tt>, <tt>&lsquo;space&rsquo;</tt>, <tt>&lsquo;shift&rsquo;</tt>, <tt>&lsquo;control&rsquo;</tt>, <tt>&lsquo;alt&rsquo;</tt>, <tt>&lsquo;meta&rsquo;</tt>, <tt>&lsquo;caps-lock&rsquo;</tt>, <tt>&lsquo;left&rsquo;</tt>, <tt>&lsquo;up&rsquo;</tt>, <tt>&lsquo;right&rsquo;</tt>, <tt>&lsquo;down&rsquo;</tt>, <tt>&lsquo;escape&rsquo;</tt>, <tt>&lsquo;delete&rsquo;</tt>, &hellip;
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the key is pressed, <tt>false</tt> otherwise
</li>
</ul>
<h4>Example:<span class="description">Whenever the user clicks, create a circle shaped path. If the 'a' key is pressed, fill it with red, otherwise fill it with blue:</span></h4>
<pre><code>function onMouseDown(event) {
var path = new Path.Circle(event.point, 10);
if (Key.isDown('a')) {
path.fillColor = 'red';
} else {
path.fillColor = 'blue';
}
}</code></pre>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

299
dist/docs/classes/KeyEvent.html vendored Normal file
View file

@ -0,0 +1,299 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KeyEvent</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>KeyEvent</h1>
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
<p>The KeyEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>&rsquo;s keyboard handlers <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a>. The KeyEvent object is the only parameter passed to these functions and contains information about the keyboard event.</p>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="type" class="member">
<div class="member-link">
<a name="type" href="#type"><tt><b>type</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The type of mouse event.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'keydown'</tt>, <tt>'keyup'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="character" class="member">
<div class="member-link">
<a name="character" href="#character"><tt><b>character</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The character representation of the key that caused this key event, taking into account the current key-modifiers (e.g. shift, control, caps-lock, etc.)</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="key" class="member">
<div class="member-link">
<a name="key" href="#key"><tt><b>key</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The key that caused this key event, either as a lower-case character or special key descriptor.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'enter'</tt>, <tt>'space'</tt>, <tt>'shift'</tt>, <tt>'control'</tt>, <tt>'alt'</tt>, <tt>'meta'</tt>, <tt>'caps-lock'</tt>, <tt>'left'</tt>, <tt>'up'</tt>, <tt>'right'</tt>, <tt>'down'</tt>, <tt>'escape'</tt>, <tt>'delete'</tt>, &hellip;</li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="tostring" class="member">
<div class="member-link">
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the key event
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
<div id="timestamp" class="member">
<div class="member-link">
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The time at which the event was created, in milliseconds since the epoch.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="modifiers" class="member">
<div class="member-link">
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current state of the keyboard modifiers.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>object</tt>
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited methods ========================= -->
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
<div id="preventdefault" class="member">
<div class="member-link">
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
</div>
</div>
</div>
<div id="stoppropagation" class="member">
<div class="member-link">
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Prevents further propagation of the current event.</p>
</div>
</div>
</div>
<div id="stop" class="member">
<div class="member-link">
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

6144
dist/docs/classes/Layer.html vendored Normal file

File diff suppressed because it is too large Load diff

339
dist/docs/classes/Line.html vendored Normal file
View file

@ -0,0 +1,339 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Line</h1>
<p>The Line object represents..</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="line-point1-point2-arg3-arg4" class="member">
<div class="member-link">
<a name="line-point1-point2-arg3-arg4" href="#line-point1-point2-arg3-arg4"><tt><b>Line</b>(point1, point2[, asVector, arg3, arg4])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a Line object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>point1:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
<li>
<tt>point2:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
<li>
<tt>asVector:</tt>
<tt>Boolean</tt>
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>
<li>
<tt>arg3:</tt>
</li>
<li>
<tt>arg4:</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Line.html"><tt>Line</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="point" class="member">
<div class="member-link">
<a name="point" href="#point"><tt><b>point</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The starting point of the line.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="vector" class="member">
<div class="member-link">
<a name="vector" href="#vector"><tt><b>vector</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The direction of the line as a vector.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="length" class="member">
<div class="member-link">
<a name="length" href="#length"><tt><b>length</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The length of the line.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="intersect-line" class="member">
<div class="member-link">
<a name="intersect-line" href="#intersect-line"><tt><b>intersect</b>(line[, isInfinite])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>line:</tt>
<a href="../classes/Line.html"><tt>Line</tt></a>
</li>
<li>
<tt>isInfinite:</tt>
<tt>Boolean</tt>
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the intersection point of the lines, <code>undefined</code> if the two lines are collinear, or <code>null</code> if they don&rsquo;t intersect.
</li>
</ul>
</div>
</div>
</div>
<div id="getside-point" class="member">
<div class="member-link">
<a name="getside-point" href="#getside-point"><tt><b>getSide</b>(point[, isInfinite])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
<li>
<tt>isInfinite:</tt>
<tt>Boolean</tt>
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Number</tt></tt>
</li>
</ul>
</div>
</div>
</div>
<div id="getdistance-point" class="member">
<div class="member-link">
<a name="getdistance-point" href="#getdistance-point"><tt><b>getDistance</b>(point)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Number</tt></tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

1597
dist/docs/classes/Matrix.html vendored Normal file

File diff suppressed because it is too large Load diff

320
dist/docs/classes/MouseEvent.html vendored Normal file
View file

@ -0,0 +1,320 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MouseEvent</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>MouseEvent</h1>
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
<p>The MouseEvent object is received by the <a href="../classes/Item.html"><tt>Item</tt></a>&rsquo;s mouse event handlers <a href="../classes/Item.html#onmousedown"><tt>item.onMouseDown</tt></a>, <a href="../classes/Item.html#onmousedrag"><tt>item.onMouseDrag</tt></a>, <a href="../classes/Item.html#onmousemove"><tt>item.onMouseMove</tt></a>, <a href="../classes/Item.html#onmouseup"><tt>item.onMouseUp</tt></a>, <a href="../classes/Item.html#onclick"><tt>item.onClick</tt></a>, <a href="../classes/Item.html#ondoubleclick"><tt>item.onDoubleClick</tt></a>, <a href="../classes/Item.html#onmouseenter"><tt>item.onMouseEnter</tt></a> and <a href="../classes/Item.html#onmouseleave"><tt>item.onMouseLeave</tt></a>. The MouseEvent object is the only parameter passed to these functions and contains information about the mouse event.</p>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="type" class="member">
<div class="member-link">
<a name="type" href="#type"><tt><b>type</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The type of mouse event.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'mousedown'</tt>, <tt>'mouseup'</tt>, <tt>'mousedrag'</tt>, <tt>'click'</tt>, <tt>'doubleclick'</tt>, <tt>'mousemove'</tt>, <tt>'mouseenter'</tt>, <tt>mouseleave'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="point" class="member">
<div class="member-link">
<a name="point" href="#point"><tt><b>point</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The position of the mouse in project coordinates when the event was fired.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="target" class="member">
<div class="member-link">
<a name="target" href="#target"><tt><b>target</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="delta" class="member">
<div class="member-link">
<a name="delta" href="#delta"><tt><b>delta</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="tostring" class="member">
<div class="member-link">
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the mouse event
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
<div id="timestamp" class="member">
<div class="member-link">
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The time at which the event was created, in milliseconds since the epoch.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="modifiers" class="member">
<div class="member-link">
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current state of the keyboard modifiers.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>object</tt>
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited methods ========================= -->
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
<div id="preventdefault" class="member">
<div class="member-link">
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
</div>
</div>
</div>
<div id="stoppropagation" class="member">
<div class="member-link">
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Prevents further propagation of the current event.</p>
</div>
</div>
</div>
<div id="stop" class="member">
<div class="member-link">
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

433
dist/docs/classes/PaperScope.html vendored Normal file
View file

@ -0,0 +1,433 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PaperScope</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>PaperScope</h1>
<p>The <code>PaperScope</code> class represents the scope associated with a Paper context. When working with PaperScript, these scopes are automatically created for us, and through clever scoping the properties and methods of the active scope seem to become part of the global scope.</p>
<p>When working with normal JavaScript code, <code>PaperScope</code> objects need to be manually created and handled.</p>
<p>Paper classes can only be accessed through <code>PaperScope</code> objects. Thus in PaperScript they are global, while in JavaScript, they are available on the global <a href="../classes/global.html#paper"><tt>paper</tt></a> object. For JavaScript you can use <a href="../classes/PaperScope.html#install-scope"><tt>paperScope.install(scope)</tt></a> to install the Paper classes and objects on the global scope. Note that when working with more than one scope, this still works for classes, but not for objects like <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a>, since they are not updated in the injected scope if scopes are switched.</p>
<p>The global <a href="../classes/global.html#paper"><tt>paper</tt></a> object is simply a reference to the currently active <code>PaperScope</code>.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="paperscope" class="member">
<div class="member-link">
<a name="paperscope" href="#paperscope"><tt><b>PaperScope</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a PaperScope object.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/PaperScope.html"><tt>PaperScope</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="version" class="member">
<div class="member-link">
<a name="version" href="#version"><tt><b>version</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The version of Paper.js, as a string.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="settings" class="member">
<div class="member-link">
<a name="settings" href="#settings"><tt><b>settings</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Gives access to paper&rsquo;s configurable settings.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Object</tt>
</li>
</ul>
<ul class="member-list">
<h4>Options:</h4>
<li><tt>settings.applyMatrix: <tt>Boolean</tt></tt> &mdash;&nbsp;default: <tt>true</tt></li>
<li><tt>settings.handleSize: <tt>Number</tt></tt> &mdash;&nbsp;default: <tt>4</tt></li>
<li><tt>settings.hitTolerance: <tt>Number</tt></tt> &mdash;&nbsp;default: <tt>0</tt></li>
</ul>
</div>
</div>
</div>
<div id="project" class="member">
<div class="member-link">
<a name="project" href="#project"><tt><b>project</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The currently active project.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Project.html"><tt>Project</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="projects" class="member">
<div class="member-link">
<a name="projects" href="#projects"><tt><b>projects</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The list of all open projects within the current Paper.js context.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
<div id="view" class="member">
<div class="member-link">
<a name="view" href="#view"><tt><b>view</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The reference to the active project&rsquo;s view.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/View.html"><tt>View</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="tool" class="member">
<div class="member-link">
<a name="tool" href="#tool"><tt><b>tool</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The reference to the active tool.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Tool.html"><tt>Tool</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="tools" class="member">
<div class="member-link">
<a name="tools" href="#tools"><tt><b>tools</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The list of available tools.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="execute-code" class="member">
<div class="member-link">
<a name="execute-code" href="#execute-code"><tt><b>execute</b>(code[, option])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Compiles the PaperScript code into a compiled function and executes it. The compiled function receives all properties of this <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> as arguments, to emulate a global scope with unaffected performance. It also installs global view and tool handlers automatically on the respective objects.</p>
<ul class="member-list">
<h4>Options:</h4>
<li><tt>options.url: <tt>String</tt></tt> &mdash; the url of the source, for source-map debugging</li>
<li><tt>options.source: <tt>String</tt></tt> &mdash; the source to be used for the source- mapping, in case the code that&rsquo;s passed in has already been mingled.</li>
</ul>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>code:</tt>
<tt>String</tt>
&mdash;&nbsp;the PaperScript code
</li>
<li>
<tt>option:</tt>
<tt>Object</tt>
&mdash;&nbsp;the compilation options
&mdash;&nbsp;optional
</li>
</ul>
</div>
</div>
</div>
<div id="install-scope" class="member">
<div class="member-link">
<a name="install-scope" href="#install-scope"><tt><b>install</b>(scope)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Injects the paper scope into any other given scope. Can be used for example to inject the currently active PaperScope into the window&rsquo;s global scope, to emulate PaperScript-style globally accessible Paper classes and objects.</p>
<p><b>Please note:</b> Using this method may override native constructors (e.g. Path). This may cause problems when using Paper.js in conjunction with other libraries that rely on these constructors. Keep the library scoped if you encounter issues caused by this.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>scope:</tt>
</li>
</ul>
<h4>Example:</h4>
<pre><code>paper.install(window);</code></pre>
</div>
</div>
</div>
<div id="setup-element" class="member">
<div class="member-link">
<a name="setup-element" href="#setup-element"><tt><b>setup</b>(element)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Sets up an empty project for us. If a canvas is provided, it also creates a <a href="../classes/View.html"><tt>View</tt></a> for it, both linked to this scope.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>element:</tt>
<tt>HTMLCanvasElement</tt><tt>String</tt>
&mdash;&nbsp;the HTML canvas element this scope should be associated with, or an ID string by which to find the element.
</li>
</ul>
</div>
</div>
</div>
<div id="activate" class="member">
<div class="member-link">
<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Activates this PaperScope, so all newly created items will be placed in its active project.</p>
</div>
</div>
</div>
</div>
<div class="reference-members">
<h2>Static Methods</h2>
<div id="get-id" class="member">
<div class="member-link">
<a name="get-id" href="#get-id"><tt><b>PaperScope.get</b>(id)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Retrieves a PaperScope object with the given scope id.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>id:</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

189
dist/docs/classes/PaperScript.html vendored Normal file
View file

@ -0,0 +1,189 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PaperScript</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>PaperScript</h1>
</div>
<div class="reference-members">
<h2>Static Methods</h2>
<div id="compile-code" class="member">
<div class="member-link">
<a name="compile-code" href="#compile-code"><tt><b>PaperScript.compile</b>(code[, option])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Compiles PaperScript code into JavaScript code.</p>
<ul class="member-list">
<h4>Options:</h4>
<li><tt>options.url: <tt>String</tt></tt> &mdash; the url of the source, for source-map generation</li>
<li><tt>options.source: <tt>String</tt></tt> &mdash; the source to be used for the source- mapping, in case the code that&rsquo;s passed in has already been mingled.</li>
</ul>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>code:</tt>
<tt>String</tt>
&mdash;&nbsp;the PaperScript code
</li>
<li>
<tt>option:</tt>
<tt>Object</tt>
&mdash;&nbsp;the compilation options
&mdash;&nbsp;optional
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Object</tt></tt>&nbsp;&mdash;&nbsp;an object holding the compiled PaperScript translated into JavaScript code along with source-maps and other information.
</li>
</ul>
</div>
</div>
</div>
<div id="execute-code-scope" class="member">
<div class="member-link">
<a name="execute-code-scope" href="#execute-code-scope"><tt><b>PaperScript.execute</b>(code, scope[, option])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Compiles the PaperScript code into a compiled function and executes it. The compiled function receives all properties of the passed <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> as arguments, to emulate a global scope with unaffected performance. It also installs global view and tool handlers automatically on the respective objects.</p>
<ul class="member-list">
<h4>Options:</h4>
<li><tt>options.url: <tt>String</tt></tt> &mdash; the url of the source, for source-map generation</li>
<li><tt>options.source: <tt>String</tt></tt> &mdash; the source to be used for the source- mapping, in case the code that&rsquo;s passed in has already been mingled.</li>
</ul>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>code:</tt>
<tt>String</tt>
&mdash;&nbsp;the PaperScript code
</li>
<li>
<tt>scope:</tt>
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
&mdash;&nbsp;the scope for which the code is executed
</li>
<li>
<tt>option:</tt>
<tt>Object</tt>
&mdash;&nbsp;the compilation options
&mdash;&nbsp;optional
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Object</tt></tt>&nbsp;&mdash;&nbsp;an object holding the compiled PaperScript translated into JavaScript code along with source-maps and other information.
</li>
</ul>
</div>
</div>
</div>
<div id="load" class="member">
<div class="member-link">
<a name="load" href="#load"><tt><b>PaperScript.load</b>([script])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Loads, compiles and executes PaperScript code in the HTML document. Note that this method is executed automatically for all scripts in the document through a window load event. You can optionally call it earlier (e.g. from a DOM ready event), or you can mark scripts to be ignored by setting the attribute <code>ignore=&quot;true&quot;</code> or <code>data-paper-ignore=&quot;true&quot;</code>, and call the <code>PaperScript.load(script)</code> method for each script separately when needed.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>script:</tt>
<tt>HTMLScriptElement</tt>
&mdash;&nbsp;the script to load. If none is provided, all scripts of the HTML document are iterated over and loaded
&mdash;&nbsp;optional, default: <tt>null</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/PaperScope.html"><tt>PaperScope</tt></a></tt>&nbsp;&mdash;&nbsp;the scope produced for the passed <code>script</code>, or <code>undefined</code> of multiple scripts area loaded
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

10780
dist/docs/classes/Path.html vendored Normal file

File diff suppressed because it is too large Load diff

7228
dist/docs/classes/PathItem.html vendored Normal file

File diff suppressed because it is too large Load diff

6057
dist/docs/classes/PlacedSymbol.html vendored Normal file

File diff suppressed because it is too large Load diff

2426
dist/docs/classes/Point.html vendored Normal file

File diff suppressed because it is too large Load diff

6356
dist/docs/classes/PointText.html vendored Normal file

File diff suppressed because it is too large Load diff

1187
dist/docs/classes/Project.html vendored Normal file

File diff suppressed because it is too large Load diff

6868
dist/docs/classes/Raster.html vendored Normal file

File diff suppressed because it is too large Load diff

1470
dist/docs/classes/Rectangle.html vendored Normal file

File diff suppressed because it is too large Load diff

796
dist/docs/classes/Segment.html vendored Normal file
View file

@ -0,0 +1,796 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Segment</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Segment</h1>
<p>The Segment object represents the points of a path through which its <a href="../classes/Curve.html"><tt>Curve</tt></a> objects pass. The segments of a path can be accessed through its <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
<p>Each segment consists of an anchor point (<a href="../classes/Segment.html#point"><tt>segment.point</tt></a>) and optionaly an incoming and an outgoing handle (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> and <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>), describing the tangents of the two <a href="../classes/Curve.html"><tt>Curve</tt></a> objects that are connected by this segment.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="segment" class="member">
<div class="member-link">
<a name="segment" href="#segment"><tt><b>Segment</b>([point[, handleIn[, handleOut]]])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new Segment object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;the anchor point of the segment
&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
</li>
<li>
<tt>handleIn:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;the handle point relative to the anchor point of the segment that describes the in tangent of the segment
&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
</li>
<li>
<tt>handleOut:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;the handle point relative to the anchor point of the segment that describes the out tangent of the segment
&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var handleIn = new Point(-80, -100);
var handleOut = new Point(80, 100);
var firstPoint = new Point(100, 50);
var firstSegment = new Segment(firstPoint, null, handleOut);
var secondPoint = new Point(300, 50);
var secondSegment = new Segment(secondPoint, handleIn, null);
var path = new Path(firstSegment, secondSegment);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
</div>
</div>
</div>
<div id="segment-object" class="member">
<div class="member-link">
<a name="segment-object" href="#segment-object"><tt><b>Segment</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new Segment object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing properties to be set on the segment
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>
</li>
</ul>
<h4>Example:<span class="description">Creating segments using object notation:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
var firstSegment = new Segment({
point: [100, 50],
handleOut: [80, 100]
});
var secondSegment = new Segment({
point: [300, 50],
handleIn: [-80, -100]
});
var path = new Path({
segments: [firstSegment, secondSegment],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="point" class="member">
<div class="member-link">
<a name="point" href="#point"><tt><b>point</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The anchor point of the segment.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="handlein" class="member">
<div class="member-link">
<a name="handlein" href="#handlein"><tt><b>handleIn</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The handle point relative to the anchor point of the segment that describes the in tangent of the segment.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="handleout" class="member">
<div class="member-link">
<a name="handleout" href="#handleout"><tt><b>handleOut</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The handle point relative to the anchor point of the segment that describes the out tangent of the segment.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="selected" class="member">
<div class="member-link">
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the <a href="../classes/Segment.html#point"><tt>point</tt></a> of the segment is selected.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
var path = new Path.Circle({
center: [80, 50],
radius: 40
});
// Select the third segment point:
path.segments[2].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
</div>
</div>
<h3>Hierarchy</h3>
<div id="index" class="member">
<div class="member-link">
<a name="index" href="#index"><tt><b>index</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The index of the segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="path" class="member">
<div class="member-link">
<a name="path" href="#path"><tt><b>path</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The path that the segment belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Path.html"><tt>Path</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="curve" class="member">
<div class="member-link">
<a name="curve" href="#curve"><tt><b>curve</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curve that the segment belongs to. For the last segment of an open path, the previous segment is returned.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Curve.html"><tt>Curve</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="location" class="member">
<div class="member-link">
<a name="location" href="#location"><tt><b>location</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curve location that describes this segment&rsquo;s position on the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
</li>
</ul>
</div>
</div>
</div>
<h3>Sibling Segments</h3>
<div id="next" class="member">
<div class="member-link">
<a name="next" href="#next"><tt><b>next</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The next segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment belongs to. If the segments belongs to a closed path, the first segment is returned for the last segment of the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Segment.html"><tt>Segment</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="previous" class="member">
<div class="member-link">
<a name="previous" href="#previous"><tt><b>previous</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The previous segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment belongs to. If the segments belongs to a closed path, the last segment is returned for the first segment of the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Segment.html"><tt>Segment</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="hashandles" class="member">
<div class="member-link">
<a name="hashandles" href="#hashandles"><tt><b>hasHandles</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if the segment has any curve handles set.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the segment has handles set, <tt>false</tt> otherwise
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><tt>Segment#getHandleIn</tt>()</tt></li>
<li><tt><tt>Segment#getHandleOut</tt>()</tt></li>
<li><tt><a href="../classes/Curve.html#hashandles"><tt>curve.hasHandles</tt></a>()</tt></li>
<li><tt><a href="../classes/Path.html#hashandles"><tt>path.hasHandles</tt></a>()</tt></li>
</ul>
</div>
</div>
</div>
<div id="clearhandles" class="member">
<div class="member-link">
<a name="clearhandles" href="#clearhandles"><tt><b>clearHandles</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Clears the segment&rsquo;s handles by setting their coordinates to zero, turning the segment into a corner.</p>
</div>
</div>
</div>
<div id="smooth" class="member">
<div class="member-link">
<a name="smooth" href="#smooth"><tt><b>smooth</b>([options])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Smooths the bezier curves that pass through this segment by taking into account the segment&rsquo;s position and distance to the neighboring segments and changing the direction and length of the segment&rsquo;s handles accordingly without moving the segment itself.</p>
<p>Two different smoothing methods are available:</p>
<ul>
<li>
<p><code>&#39;catmull-rom&#39;</code> uses the Catmull-Rom spline to smooth the segment.</p>
<p>The optionally passed factor controls the knot parametrization of the algorithm:</p>
<ul>
<li><code>0.0</code>: the standard, uniform Catmull-Rom spline</li>
<li><code>0.5</code>: the centripetal Catmull-Rom spline, guaranteeing no self-intersections</li>
<li><code>1.0</code>: the chordal Catmull-Rom spline</li>
</ul>
</li>
<li>
<p><code>&#39;geometric&#39;</code> use a simple heuristic and empiric geometric method to smooth the segment&rsquo;s handles. The handles were weighted, meaning that big differences in distances between the segments will lead to probably undesired results.</p>
<p>The optionally passed factor defines the tension parameter (<code>0…1</code>), controlling the amount of smoothing as a factor by which to scale each handle.</p>
</li>
</ul>
<ul class="member-list">
<h4>Options:</h4>
<li><tt>options.type: <tt>String</tt></tt> &mdash; the type of smoothing method: <tt>&lsquo;catmull-rom&rsquo;</tt>, <tt>&lsquo;geometric&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;catmull-rom&rsquo;</tt></li>
<li><tt>options.factor: <tt>Number</tt></tt> &mdash; the factor parameterizing the smoothing method — default: <code>0.5</code> for <code>&#39;catmull-rom&#39;</code>, <code>0.4</code> for <code>&#39;geometric&#39;</code></li>
</ul>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>options:</tt>
<tt>Object</tt>
&mdash;&nbsp;the smoothing options
&mdash;&nbsp;optional
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/PathItem.html#smooth"><tt>pathItem.smooth([options])</tt></a></tt></li>
</ul>
</div>
</div>
</div>
<div id="isfirst" class="member">
<div class="member-link">
<a name="isfirst" href="#isfirst"><tt><b>isFirst</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if the this is the first segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if this is the first segment, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
<div id="islast" class="member">
<div class="member-link">
<a name="islast" href="#islast"><tt><b>isLast</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if the this is the last segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if this is the last segment, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
<div id="reverse" class="member">
<div class="member-link">
<a name="reverse" href="#reverse"><tt><b>reverse</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Reverses the <a href="../classes/Segment.html#handlein"><tt>handleIn</tt></a> and <a href="../classes/Segment.html#handleout"><tt>handleOut</tt></a> vectors of this segment, modifying the actual segment without creating a copy.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the reversed segment
</li>
</ul>
</div>
</div>
</div>
<div id="reversed" class="member">
<div class="member-link">
<a name="reversed" href="#reversed"><tt><b>reversed</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Returns the reversed the segment, without modifying the segment itself.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the reversed segment
</li>
</ul>
</div>
</div>
</div>
<div id="remove" class="member">
<div class="member-link">
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Removes the segment from the path that it belongs to.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the segment was removed, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
<div id="tostring" class="member">
<div class="member-link">
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the segment
</li>
</ul>
</div>
</div>
</div>
<div id="transform-matrix" class="member">
<div class="member-link">
<a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Transform the segment by the specified matrix.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>matrix:</tt>
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
&mdash;&nbsp;the matrix to transform the segment by
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

6638
dist/docs/classes/Shape.html vendored Normal file

File diff suppressed because it is too large Load diff

1664
dist/docs/classes/Size.html vendored Normal file

File diff suppressed because it is too large Load diff

919
dist/docs/classes/Style.html vendored Normal file
View file

@ -0,0 +1,919 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Style</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Style</h1>
<p>Style is used for changing the visual styles of items contained within a Paper.js project and is returned by <a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
<p>All properties of Style are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>, i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
<p>To set multiple style properties in one go, you can pass an object to <a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and apply it to a series of items:</p>
<h4>Example:<span class="description">Styling paths</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var path = new Path.Circle(new Point(80, 50), 30);
path.style = {
fillColor: new Color(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
<h4>Example:<span class="description">Styling text items</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
var text = new PointText(view.center);
text.content = 'Hello world.';
text.style = {
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 20,
fillColor: 'red',
justification: 'center'
};
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
<h4>Example:<span class="description">Styling groups</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
var path1 = new Path.Circle({
center: [100, 50],
radius: 30
});
var path2 = new Path.Rectangle({
from: [170, 20],
to: [230, 80]
});
var group = new Group(path1, path2);
// All styles set on a group are automatically
// set on the children of the group:
group.style = {
strokeColor: 'black',
dashArray: [4, 10],
strokeWidth: 4,
strokeCap: 'round'
};
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="view" class="member">
<div class="member-link">
<a name="view" href="#view"><tt><b>view</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The view that this style belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/View.html"><tt>View</tt></a>
</li>
</ul>
</div>
</div>
</div>
<h3>Stroke Style</h3>
<div id="strokecolor" class="member">
<div class="member-link">
<a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The color of the stroke.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>
</li>
</ul>
<h4>Example:<span class="description">Setting the stroke color of a path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-3">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new Color(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokewidth" class="member">
<div class="member-link">
<a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The width of the stroke.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>1</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
<h4>Example:<span class="description">Setting an item's stroke width:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-4">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to black:
circle.strokeColor = 'black';
// Set its stroke width to 10:
circle.strokeWidth = 10;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokecap" class="member">
<div class="member-link">
<a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shape to be used at the beginning and end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they have a stroke.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'round'</tt>, <tt>'square'</tt>, <tt>'butt'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'butt'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
<h4>Example:<span class="description">A look at the different stroke caps:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-5">
var line = new Path(new Point(80, 50), new Point(420, 50));
line.strokeColor = 'black';
line.strokeWidth = 20;
// Select the path, so we can see where the stroke is formed:
line.selected = true;
// Set the stroke cap of the line to be round:
line.strokeCap = 'round';
// Copy the path and set its stroke cap to be square:
var line2 = line.clone();
line2.position.y += 50;
line2.strokeCap = 'square';
// Make another copy and set its stroke cap to be butt:
var line2 = line.clone();
line2.position.y += 100;
line2.strokeCap = 'butt';
</script>
<div class="canvas"><canvas width="516" height="200" id="canvas-5"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokejoin" class="member">
<div class="member-link">
<a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shape to be used at the segments and corners of <a href="../classes/Path.html"><tt>Path</tt></a> items when they have a stroke.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'miter'</tt>, <tt>'round'</tt>, <tt>'bevel'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'miter'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
<h4>Example:<span class="description">A look at the different stroke joins:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-6">
var path = new Path();
path.add(new Point(80, 100));
path.add(new Point(120, 40));
path.add(new Point(160, 100));
path.strokeColor = 'black';
path.strokeWidth = 20;
// Select the path, so we can see where the stroke is formed:
path.selected = true;
var path2 = path.clone();
path2.position.x += path2.bounds.width * 1.5;
path2.strokeJoin = 'round';
var path3 = path2.clone();
path3.position.x += path3.bounds.width * 1.5;
path3.strokeJoin = 'bevel';
</script>
<div class="canvas"><canvas width="516" height="120" id="canvas-6"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokescaling" class="member">
<div class="member-link">
<a name="strokescaling" href="#strokescaling"><tt><b>strokeScaling</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>true</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="dashoffset" class="member">
<div class="member-link">
<a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The dash offset of the stroke.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>0</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="dasharray" class="member">
<div class="member-link">
<a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>[]</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Array</tt>
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-7">
var path = new Path.Circle(new Point(80, 50), 40);
path.strokeWidth = 2;
path.strokeColor = 'black';
// Set the dashed stroke to [10pt dash, 4pt gap]:
path.dashArray = [10, 4];
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
</div>
</div>
</div>
</div>
<div id="miterlimit" class="member">
<div class="member-link">
<a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The miter limit of the stroke. When two line segments meet at a sharp angle and miter joins have been specified for <a href="../classes/Style.html#strokejoin"><tt>strokeJoin</tt></a>, it is possible for the miter to extend far beyond the <a href="../classes/Style.html#strokewidth"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a limit on the ratio of the miter length to the <a href="../classes/Style.html#strokewidth"><tt>strokeWidth</tt></a>.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>10</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Fill Style</h3>
<div id="fillcolor" class="member">
<div class="member-link">
<a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The fill color.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>
</li>
</ul>
<h4>Example:<span class="description">Setting the fill color of a path to red:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-8">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var circle = new Path.Circle(new Point(80, 50), 35);
// Set the fill color of the circle to RGB red:
circle.fillColor = new Color(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
</div>
</div>
</div>
</div>
<div id="fillrule" class="member">
<div class="member-link">
<a name="fillrule" href="#fillrule"><tt><b>fillRule</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than <code>&#39;nonzero&#39;</code>.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'nonzero'</tt>, <tt>'evenodd'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'nonzero'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Shadow Style</h3>
<div id="shadowcolor" class="member">
<div class="member-link">
<a name="shadowcolor" href="#shadowcolor"><tt><b>shadowColor</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shadow color.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>
</li>
</ul>
<h4>Example:<span class="description">Creating a circle with a black shadow:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-9">
var circle = new Path.Circle({
center: [80, 50],
radius: 35,
fillColor: 'white',
// Set the shadow color of the circle to RGB black:
shadowColor: new Color(0, 0, 0),
// Set the shadow blur radius to 12:
shadowBlur: 12,
// Offset the shadow by { x: 5, y: 5 }
shadowOffset: new Point(5, 5)
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shadowblur" class="member">
<div class="member-link">
<a name="shadowblur" href="#shadowblur"><tt><b>shadowBlur</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shadow&rsquo;s blur radius.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>0</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="shadowoffset" class="member">
<div class="member-link">
<a name="shadowoffset" href="#shadowoffset"><tt><b>shadowOffset</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shadow&rsquo;s offset.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>0</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<h3>Selection Style</h3>
<div id="selectedcolor" class="member">
<div class="member-link">
<a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>
</li>
</ul>
</div>
</div>
</div>
<h3>Character Style</h3>
<div id="fontfamily" class="member">
<div class="member-link">
<a name="fontfamily" href="#fontfamily"><tt><b>fontFamily</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The font-family to be used in text content.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'sans-serif'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="fontweight" class="member">
<div class="member-link">
<a name="fontweight" href="#fontweight"><tt><b>fontWeight</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The font-weight to be used in text content.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'normal'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt><tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="fontsize" class="member">
<div class="member-link">
<a name="fontsize" href="#fontsize"><tt><b>fontSize</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The font size of text content, as a number in pixels, or as a string with optional units <code>&#39;px&#39;</code>, <code>&#39;pt&#39;</code> and <code>&#39;em&#39;</code>.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>10</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt><tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="leading" class="member">
<div class="member-link">
<a name="leading" href="#leading"><tt><b>leading</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The text leading of text content.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>fontSize * 1.2</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt><tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Paragraph Style</h3>
<div id="justification" class="member">
<div class="member-link">
<a name="justification" href="#justification"><tt><b>justification</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The justification of text paragraphs.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'left'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

302
dist/docs/classes/Symbol.html vendored Normal file
View file

@ -0,0 +1,302 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbol</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Symbol</h1>
<p>Symbols allow you to place multiple instances of an item in your project. This can save memory, since all instances of a symbol simply refer to the original item and it can speed up moving around complex objects, since internal properties such as segment lists and gradient positions don&rsquo;t need to be updated with every transformation.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="symbol-item" class="member">
<div class="member-link">
<a name="symbol-item" href="#symbol-item"><tt><b>Symbol</b>(item[, dontCenter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a Symbol item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>item:</tt>
<a href="../classes/Item.html"><tt>Item</tt></a>
&mdash;&nbsp;the source item which is copied as the definition of the symbol
</li>
<li>
<tt>dontCenter:</tt>
<tt>Boolean</tt>
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
</li>
</ul>
<h4>Example:<span class="description">Placing 100 instances of a symbol:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var path = new Path.Star(new Point(0, 0), 6, 5, 13);
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
// Create a symbol from the path:
var symbol = new Symbol(path);
// Remove the path:
path.remove();
// Place 100 instances of the symbol:
for (var i = 0; i < 100; i++) {
// Place an instance of the symbol in the project:
var instance = symbol.place();
// Move the instance to a random position within the view:
instance.position = Point.random() * view.size;
// Rotate the instance by a random amount between
// 0 and 360 degrees:
instance.rotate(Math.random() * 360);
// Scale the instance between 0.25 and 1:
instance.scale(0.25 + Math.random() * 0.75);
}
</script>
<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="project" class="member">
<div class="member-link">
<a name="project" href="#project"><tt><b>project</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The project that this symbol belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Project.html"><tt>Project</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="definition" class="member">
<div class="member-link">
<a name="definition" href="#definition"><tt><b>definition</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The symbol definition.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="place" class="member">
<div class="member-link">
<a name="place" href="#place"><tt><b>place</b>([position])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Places in instance of the symbol in the project.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>position:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;the position of the placed symbol
&mdash;&nbsp;optional
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
<div id="clone" class="member">
<div class="member-link">
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Returns a copy of the symbol.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
<div id="equals-symbol" class="member">
<div class="member-link">
<a name="equals-symbol" href="#equals-symbol"><tt><b>equals</b>(symbol)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks whether the symbol&rsquo;s definition is equal to the supplied symbol.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>symbol:</tt>
<a href="../classes/Symbol.html"><tt>Symbol</tt></a>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if they are equal, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

6171
dist/docs/classes/TextItem.html vendored Normal file

File diff suppressed because it is too large Load diff

729
dist/docs/classes/Tool.html vendored Normal file
View file

@ -0,0 +1,729 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tool</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Tool</h1>
<p>The Tool object refers to a script that the user can interact with by using the mouse and keyboard and can be accessed through the global <code>tool</code> variable. All its properties are also available in the paper scope.</p>
<p>The global <code>tool</code> variable only exists in scripts that contain mouse handler functions (<a href="../classes/Tool.html#onmousemove"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown"><tt>onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup"><tt>onMouseUp</tt></a>) or a keyboard handler function (<a href="../classes/Tool.html#onkeydown"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>onKeyUp</tt></a>).</p>
<h4>Example:</h4>
<pre><code>var path;
// Only execute onMouseDrag when the mouse
// has moved at least 10 points:
tool.distanceThreshold = 10;
tool.onMouseDown = function(event) {
// Create a new path every time the mouse is clicked
path = new Path();
path.add(event.point);
path.strokeColor = 'black';
}
tool.onMouseDrag = function(event) {
// Add a point to the path every time the mouse is dragged
path.add(event.point);
}</code></pre>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="mindistance" class="member">
<div class="member-link">
<a name="mindistance" href="#mindistance"><tt><b>minDistance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The minimum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="maxdistance" class="member">
<div class="member-link">
<a name="maxdistance" href="#maxdistance"><tt><b>maxDistance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The maximum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="fixeddistance" class="member">
<div class="member-link">
<a name="fixeddistance" href="#fixeddistance"><tt><b>fixedDistance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Mouse Event Handlers</h3>
<div id="onmousedown" class="member">
<div class="member-link">
<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the mouse button is pushed down. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<h4>Example:<span class="description">Creating circle shaped paths where the user presses the mouse button:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
tool.onMouseDown = function(event) {
// Create a new circle shaped path with a radius of 10
// at the position of the mouse (event.point):
var path = new Path.Circle({
center: event.point,
radius: 10,
fillColor: 'black'
});
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
</div>
</div>
</div>
<div id="onmousedrag" class="member">
<div class="member-link">
<a name="onmousedrag" href="#onmousedrag"><tt><b>onMouseDrag</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the mouse position changes while the mouse is being dragged. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<h4>Example:<span class="description">Draw a line by adding a segment to a path on every mouse drag event:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
// Create an empty path:
var path = new Path({
strokeColor: 'black'
});
tool.onMouseDrag = function(event) {
// Add a segment to the path at the position of the mouse:
path.add(event.point);
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
<div id="onmousemove" class="member">
<div class="member-link">
<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called the mouse moves within the project view. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<h4>Example:<span class="description">Moving a path to the position of the mouse:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
// Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
var path = new Path.Circle({
center: [0, 0],
radius: 10,
fillColor: 'black'
});
tool.onMouseMove = function(event) {
// Whenever the user moves the mouse, move the path
// to that position:
path.position = event.point;
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
</div>
</div>
<div id="onmouseup" class="member">
<div class="member-link">
<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the mouse button is released. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<h4>Example:<span class="description">Creating circle shaped paths where the user releases the mouse:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-3">
tool.onMouseUp = function(event) {
// Create a new circle shaped path with a radius of 10
// at the position of the mouse (event.point):
var path = new Path.Circle({
center: event.point,
radius: 10,
fillColor: 'black'
});
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
</div>
</div>
</div>
<h3>Keyboard Event Handlers</h3>
<div id="onkeydown" class="member">
<div class="member-link">
<a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the user presses a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<h4>Example:<span class="description">Scaling a path whenever the user presses the space bar:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-4">
// Create a circle shaped path:
var path = new Path.Circle({
center: new Point(50, 50),
radius: 30,
fillColor: 'red'
});
tool.onKeyDown = function(event) {
if (event.key == 'space') {
// Scale the path by 110%:
path.scale(1.1);
// Prevent the key event from bubbling
return false;
}
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
</div>
</div>
</div>
<div id="onkeyup" class="member">
<div class="member-link">
<a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the user releases a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<h4>Example:</h4>
<pre><code>tool.onKeyUp = function(event) {
if (event.key == 'space') {
console.log('The spacebar was released!');
}
}</code></pre>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="activate" class="member">
<div class="member-link">
<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will point to it and it will be the one that receives tool events.</p>
</div>
</div>
</div>
<div id="remove" class="member">
<div class="member-link">
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Removes this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
</div>
</div>
</div>
<h3>Event Handling</h3>
<div id="on-type-function" class="member">
<div class="member-link">
<a name="on-type-function" href="#on-type-function"><tt><b>on</b>(type, function)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Attach an event handler to the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
<li>
<tt>function:</tt>
<tt>Function</tt>
&mdash;&nbsp;the function to be called when the event occurs, receiving a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object as its sole argument
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</div>
</div>
</div>
<div id="on-param" class="member">
<div class="member-link">
<a name="on-param" href="#on-param"><tt><b>on</b>(param)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Attach one or more event handlers to the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>param:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</div>
</div>
</div>
<div id="off-type-function" class="member">
<div class="member-link">
<a name="off-type-function" href="#off-type-function"><tt><b>off</b>(type, function)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Detach an event handler from the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
<li>
<tt>function:</tt>
<tt>Function</tt>
&mdash;&nbsp;the function to be detached
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</div>
</div>
</div>
<div id="off-param" class="member">
<div class="member-link">
<a name="off-param" href="#off-param"><tt><b>off</b>(param)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Detach one or more event handlers from the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>param:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</div>
</div>
</div>
<div id="emit-type-event" class="member">
<div class="member-link">
<a name="emit-type-event" href="#emit-type-event"><tt><b>emit</b>(type, event)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Emit an event on the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
<li>
<tt>event:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing properties describing the event
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the event had listeners, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
<div id="responds-type" class="member">
<div class="member-link">
<a name="responds-type" href="#responds-type"><tt><b>responds</b>(type)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Check if the tool has one or more event handlers of the specified type.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the tool has one or more event handlers of the specified type, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

437
dist/docs/classes/ToolEvent.html vendored Normal file
View file

@ -0,0 +1,437 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ToolEvent</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>ToolEvent</h1>
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
<p>ToolEvent The ToolEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>&rsquo;s mouse event handlers <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> and <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a>. The ToolEvent object is the only parameter passed to these functions and contains information about the mouse event.</p>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="type" class="member">
<div class="member-link">
<a name="type" href="#type"><tt><b>type</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The type of tool event.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'mousedown'</tt>, <tt>'mouseup'</tt>, <tt>'mousemove'</tt>, <tt>'mousedrag'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="point" class="member">
<div class="member-link">
<a name="point" href="#point"><tt><b>point</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The position of the mouse in project coordinates when the event was fired.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
<h4>Example:</h4>
<pre><code>function onMouseDrag(event) {
// the position of the mouse when it is dragged
console.log(event.point);
}
function onMouseUp(event) {
// the position of the mouse when it is released
console.log(event.point);
}</code></pre>
</div>
</div>
</div>
<div id="lastpoint" class="member">
<div class="member-link">
<a name="lastpoint" href="#lastpoint"><tt><b>lastPoint</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The position of the mouse in project coordinates when the previous event was fired.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="downpoint" class="member">
<div class="member-link">
<a name="downpoint" href="#downpoint"><tt><b>downPoint</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The position of the mouse in project coordinates when the mouse button was last clicked.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="middlepoint" class="member">
<div class="member-link">
<a name="middlepoint" href="#middlepoint"><tt><b>middlePoint</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The point in the middle between <a href="../classes/ToolEvent.html#lastpoint"><tt>lastPoint</tt></a> and <a href="../classes/ToolEvent.html#point"><tt>point</tt></a>. This is a useful position to use when creating artwork based on the moving direction of the mouse, as returned by <a href="../classes/ToolEvent.html#delta"><tt>delta</tt></a>.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="delta" class="member">
<div class="member-link">
<a name="delta" href="#delta"><tt><b>delta</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The difference between the current position and the last position of the mouse when the event was fired. In case of the mouseup event, the difference to the mousedown position is returned.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="count" class="member">
<div class="member-link">
<a name="count" href="#count"><tt><b>count</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The number of times the mouse event was fired.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="item" class="member">
<div class="member-link">
<a name="item" href="#item"><tt><b>item</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item at the position of the mouse (if any).</p>
<p>If the item is contained within one or more <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items, the most top level group or compound path that it is contained within is returned.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="tostring" class="member">
<div class="member-link">
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the tool event
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
<div id="timestamp" class="member">
<div class="member-link">
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The time at which the event was created, in milliseconds since the epoch.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="modifiers" class="member">
<div class="member-link">
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current state of the keyboard modifiers.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>object</tt>
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited methods ========================= -->
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
<div id="preventdefault" class="member">
<div class="member-link">
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
</div>
</div>
</div>
<div id="stoppropagation" class="member">
<div class="member-link">
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Prevents further propagation of the current event.</p>
</div>
</div>
</div>
<div id="stop" class="member">
<div class="member-link">
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

1644
dist/docs/classes/View.html vendored Normal file

File diff suppressed because it is too large Load diff

423
dist/docs/classes/global.html vendored Normal file
View file

@ -0,0 +1,423 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>_global_</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Global Scope</h1>
<p>When code is executed as PaperScript, the script&rsquo;s scope is populated with all fields of the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object, which within the script appear to be global.</p>
<p>In a JavaScript context, only the <a href="../classes/global.html#paper"><tt>paper</tt></a> variable is added to the global scope, referencing the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object, through which all properties and Paper.js classes can be accessed.</p>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="paper" class="member">
<div class="member-link">
<a name="paper" href="#paper"><tt><b>paper</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
</li>
</ul>
</div>
</div>
</div>
<h3>Global PaperScript Properties</h3>
<div id="project" class="member">
<div class="member-link">
<a name="project" href="#project"><tt><b>project</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The project for which the PaperScript is executed.</p>
<p>Note that when working with mulitple projects, this does not necessarily reflect the currently active project. For this, use <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> instead.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Project.html"><tt>Project</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="projects" class="member">
<div class="member-link">
<a name="projects" href="#projects"><tt><b>projects</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The list of all open projects within the current Paper.js context.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
<div id="view" class="member">
<div class="member-link">
<a name="view" href="#view"><tt><b>view</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The reference to the project&rsquo;s view.</p>
<p>Note that when working with mulitple projects, this does not necessarily reflect the view of the currently active project. For this, use <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> instead.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/View.html"><tt>View</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="tool" class="member">
<div class="member-link">
<a name="tool" href="#tool"><tt><b>tool</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The reference to the tool object which is automatically created when global tool event handlers are defined.</p>
<p>Note that when working with mulitple tools, this does not necessarily reflect the currently active tool. For this, use <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> instead.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Tool.html"><tt>Tool</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="tools" class="member">
<div class="member-link">
<a name="tools" href="#tools"><tt><b>tools</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The list of available tools.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
<h3>PaperScript View Event Handlers</h3>
<div id="onframe" class="member">
<div class="member-link">
<a name="onframe" href="#onframe"><tt><b>onFrame</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A global reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="onresize" class="member">
<div class="member-link">
<a name="onresize" href="#onresize"><tt><b>onResize</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/View.html#onresize"><tt>view.onResize</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>PaperScript Tool Event Handlers</h3>
<div id="onmousedown" class="member">
<div class="member-link">
<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="onmousedrag" class="member">
<div class="member-link">
<a name="onmousedrag" href="#onmousedrag"><tt><b>onMouseDrag</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="onmousemove" class="member">
<div class="member-link">
<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="onmouseup" class="member">
<div class="member-link">
<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Keyboard Event Handlers (for PaperScript)</h3>
<div id="onkeydown" class="member">
<div class="member-link">
<a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="onkeyup" class="member">
<div class="member-link">
<a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A reference to the <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a> handler function.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright &#169; 2011—2016 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</article>
</body>

79
dist/docs/classes/index.html vendored Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paper.js v0.9.25 (develop)</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
</head>
<body class="reference">
<div class="reference-index">
<h1>Paper.js<span class="version">0.9.25 (develop)</span></h1>
<ul class="reference-classes"><li><a href="../classes/global.html">Global Scope</a></li>
<li>
<h2>Basic Types</h2>
<ul>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="../classes/Size.html">Size</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/Matrix.html">Matrix</a></li>
</ul>
<li>
<h2>Project & Items</h2>
<ul>
<li><a href="../classes/Project.html">Project</a></li>
<li><a href="../classes/Item.html">Item</a></li>
<li><a href="../classes/Layer.html">Layer</a></li>
<li><a href="../classes/Group.html">Group</a></li>
<li><a href="../classes/Shape.html">Shape</a></li>
<li><a href="../classes/Raster.html">Raster</a></li>
<li><a href="../classes/Symbol.html">Symbol</a></li>
<li><a href="../classes/PlacedSymbol.html">PlacedSymbol</a></li>
<li><hr /></li>
<li><a href="../classes/HitResult.html">HitResult</a></li>
</ul>
<li>
<h2>Paths</h2>
<ul>
<li><a href="../classes/PathItem.html">PathItem</a></li>
<li><a href="../classes/Path.html">Path</a></li>
<li><a href="../classes/CompoundPath.html">CompoundPath</a></li>
<li><a href="../classes/Segment.html">Segment</a></li>
<li><a href="../classes/Curve.html">Curve</a></li>
<li><hr /></li>
<li><a href="../classes/CurveLocation.html">CurveLocation</a></li>
</ul>
<li>
<h2>Styling</h2>
<ul>
<li><a href="../classes/Style.html">Style</a></li>
<li><a href="../classes/Color.html">Color</a></li>
<li><a href="../classes/Gradient.html">Gradient</a></li>
<li><a href="../classes/GradientStop.html">GradientStop</a></li>
</ul>
<li>
<h2>Typography</h2>
<ul>
<li><a href="../classes/TextItem.html">TextItem</a></li>
<li><a href="../classes/PointText.html">PointText</a></li>
</ul>
<li>
<h2>User Interaction & Events</h2>
<ul>
<li><a href="../classes/View.html">View</a></li>
<li><a href="../classes/Event.html">Event</a></li>
<li><a href="../classes/MouseEvent.html">MouseEvent</a></li>
<li><a href="../classes/Tool.html">Tool</a></li>
<li><a href="../classes/ToolEvent.html">ToolEvent</a></li>
<li><a href="../classes/Key.html">Key</a></li>
<li><a href="../classes/KeyEvent.html">KeyEvent</a></li>
</ul>
<li>
<h2>JavaScript</h2>
<ul>
<li><a href="../classes/PaperScope.html">PaperScope</a></li>
<li><a href="../classes/PaperScript.html">PaperScript</a></li>
</ul>
</ul>
</body>
</html>

11
dist/docs/index.html vendored Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paper.js v0.9.25 (develop)</title>
</head>
<frameset cols="230,*">
<frame src="classes/index.html" name="packageListFrame" title="All Packages">
<frame src="about:blank" name="class-frame" title="Class and interface descriptions">
</frameset>
</html>

56
dist/node/canvas.js vendored Normal file
View file

@ -0,0 +1,56 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
var Canvas = require('canvas'),
idlUtils = require('jsdom/lib/jsdom/living/generated/utils');
// Add some useful extensions to HTMLCanvasElement:
// - HTMLCanvasElement#type, so we can switch to a PDF canvas
// - Various Node Canvas methods, routed through from HTMLCanvasElement:
// toBuffer, pngStream, createPNGStream, jpgStream, createJPGStream
module.exports = function(window) {
var HTMLCanvasElement = window.HTMLCanvasElement;
function getImplementation(obj) {
// Try implForWrapper() first, fall back on obj. This appears to be
// necessary on v7.2.2, but not anymore once we can switch to 8.0.0
var impl = idlUtils.implForWrapper(obj);
return impl && impl._canvas ? impl : obj;
}
// Add fake HTMLCanvasElement#type property:
Object.defineProperty(HTMLCanvasElement.prototype, 'type', {
get: function() {
var canvas = getImplementation(this)._canvas;
return canvas && canvas.type || 'image';
},
set: function(type) {
// Allow replacement of internal node-canvas, so we can switch to a
// PDF canvas.
var impl = getImplementation(this),
size = impl._canvas || impl;
impl._canvas = new Canvas(size.width, size.height, type);
impl._context = null;
}
});
// Extend HTMLCanvasElement with useful methods from the underlying Canvas:
['toBuffer', 'pngStream', 'createPNGStream', 'jpgStream', 'createJPGStream']
.forEach(function(key) {
HTMLCanvasElement.prototype[key] = function() {
var canvas = getImplementation(this)._canvas;
return canvas[key].apply(canvas, arguments);
};
});
};

151
dist/node/extend.js vendored Normal file
View file

@ -0,0 +1,151 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
var fs = require('fs'),
path = require('path');
Canvas = require('canvas');
module.exports = function(paper) {
var sourceMaps = {},
sourceMapSupprt = 'require("source-map-support").install(paper.PaperScript.sourceMapSupport);\n';
paper.PaperScript.sourceMapSupport = {
retrieveSourceMap: function(source) {
var map = sourceMaps[source];
return map ? { url: source, map: map } : null;
}
};
// Register the .pjs extension for automatic compilation as PaperScript
require.extensions['.pjs'] = function(module, filename) {
// Requiring a PaperScript on Node.js returns an initialize method which
// needs to receive a Canvas object when called and returns the
// PaperScope.
module.exports = function(canvas) {
var source = fs.readFileSync(filename, 'utf8'),
code = sourceMapSupprt + source,
compiled = paper.PaperScript.compile(code, {
url: filename,
source: source,
sourceMaps: true,
offset: -1 // remove sourceMapSupprt...
}),
scope = new paper.PaperScope();
// Keep track of sourceMaps so retrieveSourceMap() can link them up
scope.setup(canvas);
scope.__filename = filename;
scope.__dirname = path.dirname(filename);
// Expose core methods and values
scope.require = require;
scope.console = console;
sourceMaps[filename] = compiled.map;
paper.PaperScript.execute(compiled, scope);
return scope;
};
};
paper.PaperScope.inject({
createCanvas: function(width, height, type) {
// Do not use CanvasProvider.getCanvas(), since we may be changing
// the underlying node-canvas and don't want to release it after
// back into the pool.
var canvas = paper.document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.type = type;
return canvas;
},
/**
* @deprecated, use use {@link #createCanvas(width, height)} instead.
*/
Canvas: '#createCanvas'
});
// Override requestAnimationFrame() to avoid setInterval() timers.
// NOTE: In Node.js, we only support manual updating for now, but
// View#exportFrames() below offers a way to emulate animations by exporting
// them frame by frame at the given frame-rate.
paper.DomEvent.requestAnimationFrame = function(callback) {
};
// Node.js based image exporting code.
paper.CanvasView.inject({
// DOCS: CanvasView#exportFrames(options);
exportFrames: function(options) {
options = paper.Base.set({
fps: 30,
prefix: 'frame-',
amount: 1,
}, options);
if (!options.directory)
throw new Error('Missing options.directory');
var view = this,
count = 0,
frameDuration = 1 / options.fps,
startTime = Date.now(),
lastTime = startTime,
padding = options.padding || ((options.amount - 1) + '').length;
paddedStr = Array(padding + 1).join('0');
// Start exporting frames by exporting the first frame:
exportFrame(options);
function exportFrame() {
// Convert to a Base object, for #toString()
view.emit('frame', new paper.Base({
delta: frameDuration,
time: frameDuration * count,
count: count
}));
var file = path.join(options.directory, options.prefix +
(paddedStr + count).slice(-padding) + '.png');
var out = view.exportImage(file, function() {
// Once the file has been closed, export the next fame:
var then = Date.now();
if (options.onProgress) {
options.onProgress({
count: count,
amount: options.amount,
percentage: Math.round((count + 1) / options.amount
* 10000) / 100,
time: then - startTime,
delta: then - lastTime
});
}
lastTime = then;
if (++count < options.amount) {
exportFrame();
} else {
// Call onComplete handler when finished:
if (options.onComplete) {
options.onComplete();
}
}
});
}
},
// DOCS: CanvasView#exportImage(path, callback);
exportImage: function(path, callback) {
this.update();
var out = fs.createWriteStream(path),
stream = this._element.createPNGStream();
// Pipe the png stream to the write stream:
stream.pipe(out);
if (callback) {
out.on('close', callback);
}
return out;
}
});
};

71
dist/node/window.js vendored Normal file
View file

@ -0,0 +1,71 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
// Node.js emulation layer of browser environment, based on jsdom with node-
// canvas integration.
var jsdom = require('jsdom');
// Create our document and window objects through jsdom.
/* global document:true, window:true */
var document = jsdom.jsdom('<html><body></body></html>', {
features: {
FetchExternalResources : ['img', 'script']
}
}),
window = document.defaultView;
require('./canvas')(window);
// Define XMLSerializer and DOMParser shims, to emulate browser behavior.
// Effort to bring this to jsdom: https://github.com/tmpvar/jsdom/issues/1368
function XMLSerializer() {
}
XMLSerializer.prototype.serializeToString = function(node) {
var text = jsdom.serializeDocument(node);
// Fix a jsdom issue where all SVG tagNames are lowercased:
// https://github.com/tmpvar/jsdom/issues/620
var tagNames = ['linearGradient', 'radialGradient', 'clipPath', 'textPath'];
for (var i = 0, l = tagNames.length; i < l; i++) {
var tagName = tagNames[i];
text = text.replace(
new RegExp('(<|</)' + tagName.toLowerCase() + '\\b', 'g'),
function(all, start) {
return start + tagName;
});
}
return text;
};
function DOMParser() {
}
DOMParser.prototype.parseFromString = function(string, contenType) {
// Create a new document, since we're supposed to always return one.
var doc = document.implementation.createHTMLDocument(''),
body = doc.body,
last;
// Set the body's HTML, then change the DOM according the specs.
body.innerHTML = string;
// Remove all top-level children (<html><head/><body/></html>)
while (last = doc.lastChild)
doc.removeChild(last);
// Insert the first child of the body at the top.
doc.appendChild(body.firstChild);
return doc;
};
window.XMLSerializer = XMLSerializer;
window.DOMParser = DOMParser;
module.exports = window;

13690
dist/paper-core.js vendored Normal file

File diff suppressed because it is too large Load diff

37
dist/paper-core.min.js vendored Normal file

File diff suppressed because one or more lines are too long

14054
dist/paper-full.js vendored Normal file

File diff suppressed because one or more lines are too long

38
dist/paper-full.min.js vendored Normal file

File diff suppressed because one or more lines are too long

82
package.json Normal file
View file

@ -0,0 +1,82 @@
{
"name": "paper",
"version": "0.9.25",
"description": "The Swiss Army Knife of Vector Graphics Scripting",
"license": "MIT",
"homepage": "http://paperjs.org",
"repository": {
"type": "git",
"url": "git://github.com/paperjs/paper.js"
},
"bugs": "https://github.com/paperjs/paper.js/issues",
"contributors": [
"Jürg Lehni <juerg@scratchdisk.com> (http://scratchdisk.com)",
"Jonathan Puckey <jonathan@studiomoniker.com> (http://studiomoniker.com)"
],
"main": "dist/paper-full.js",
"scripts": {
"lint": "jshint src",
"prepublish": "gulp build"
},
"files": [
"AUTHORS.md",
"dist/",
"examples/",
"LICENSE.txt",
"README.md"
],
"engines": {
"node": ">=0.10.0 <6.0.0"
},
"dependencies": {
"jsdom": "git://github.com/lehni/jsdom.git#3d55789d0f4d55392721b1e22890837fde472375",
"source-map-support": "^0.4.0"
},
"optionalDependencies": {
"canvas": "^1.3.5"
},
"devDependencies": {
"acorn": "~0.5.0",
"del": "^2.2.0",
"extend": "^3.0.0",
"gitty": "^3.3.3",
"gulp": "^3.9.0",
"gulp-cached": "^1.1.0",
"gulp-jshint": "^2.0.0",
"gulp-prepro": "^2.2.0",
"gulp-qunits": "^2.0.1",
"gulp-rename": "^1.2.2",
"gulp-shell": "^0.5.1",
"gulp-symlink": "^2.1.3",
"gulp-uglify": "^1.5.1",
"gulp-uncomment": "^0.3.0",
"gulp-util": "^3.0.0",
"gulp-whitespace": "^0.1.0",
"gulp-zip": "^3.0.2",
"jshint": "2.8.x",
"jshint-summary": "^0.4.0",
"merge-stream": "^1.0.0",
"prepro": "^2.2.0",
"qunitjs": "^1.20.0",
"require-dir": "^0.3.0",
"resemblejs": "^2.1.0",
"stats.js": "0.0.14-master",
"straps": "^1.8.0"
},
"keywords": [
"vector",
"graphic",
"graphics",
"2d",
"geometry",
"bezier",
"curve",
"curves",
"path",
"paths",
"canvas",
"svg",
"paper",
"paper.js"
]
}