mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
Prebuilt module for commit 7be936ef1812dd9383835483b6b065d4a0fb1cbe.
This commit is contained in:
commit
58e70fd11c
57 changed files with 140129 additions and 0 deletions
15
AUTHORS.md
Normal file
15
AUTHORS.md
Normal 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
73
CHANGELOG.md
Normal 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
23
LICENSE.txt
Normal 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
322
README.md
Normal 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
42
bower.json
Normal 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
34
component.json
Normal 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
414
dist/docs/assets/css/docs.css
vendored
Normal 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
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
493
dist/docs/assets/js/docs.js
vendored
Normal 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 →']
|
||||
]
|
||||
}, {
|
||||
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> →']
|
||||
]
|
||||
}];
|
||||
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
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
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
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
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
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
654
dist/docs/classes/CurveLocation.html
vendored
Normal 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>
|
||||
|
||||
— 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> — <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> — 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> — <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> — <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> — <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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
170
dist/docs/classes/Event.html
vendored
Normal 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
234
dist/docs/classes/Gradient.html
vendored
Normal 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> — 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> — <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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
267
dist/docs/classes/GradientStop.html
vendored
Normal 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>
|
||||
— the color of the stop
|
||||
— optional, default: <tt>new Color(0, 0, 0)</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>rampPoint:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position of the stop on the gradient ramp as a value between 0 and 1
|
||||
— 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> — 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
239
dist/docs/classes/HitResult.html
vendored
Normal 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>'segment'</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>'bounds'</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 ‘curve’ or ‘stroke’, 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 ‘pixel’, 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 ‘stroke’, ‘segment’, ‘handle-in’ or ‘handle-out’, 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
136
dist/docs/classes/Key.html
vendored
Normal 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> — <tt>true</tt> if the shift key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.control: <tt>Boolean</tt></tt> — <tt>true</tt> if the control key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.alt: <tt>Boolean</tt></tt> — <tt>true</tt> if the alt/option key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.meta: <tt>Boolean</tt></tt> — <tt>true</tt> if the meta/windows/command key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.capsLock: <tt>Boolean</tt></tt> — <tt>true</tt> if the caps-lock key is active, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.space: <tt>Boolean</tt></tt> — <tt>true</tt> if the space key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.option: <tt>Boolean</tt></tt> — <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> — <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>
|
||||
— any character or special key descriptor: <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>, …
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
299
dist/docs/classes/KeyEvent.html
vendored
Normal 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>’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>, …</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> — 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
339
dist/docs/classes/Line.html
vendored
Normal 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>
|
||||
|
||||
— 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>
|
||||
|
||||
— 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> — the intersection point of the lines, <code>undefined</code> if the two lines are collinear, or <code>null</code> if they don’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>
|
||||
|
||||
— 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
320
dist/docs/classes/MouseEvent.html
vendored
Normal 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>’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> — 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
433
dist/docs/classes/PaperScope.html
vendored
Normal 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’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> — default: <tt>true</tt></li>
|
||||
<li><tt>settings.handleSize: <tt>Number</tt></tt> — default: <tt>4</tt></li>
|
||||
<li><tt>settings.hitTolerance: <tt>Number</tt></tt> — 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’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> — the url of the source, for source-map debugging</li>
|
||||
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— the PaperScript code
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>option:</tt>
|
||||
<tt>Object</tt>
|
||||
— the compilation options
|
||||
— 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’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>
|
||||
— 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
189
dist/docs/classes/PaperScript.html
vendored
Normal 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> — the url of the source, for source-map generation</li>
|
||||
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— the PaperScript code
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>option:</tt>
|
||||
<tt>Object</tt>
|
||||
— the compilation options
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Object</tt></tt> — 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> — the url of the source, for source-map generation</li>
|
||||
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— the PaperScript code
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
— the scope for which the code is executed
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>option:</tt>
|
||||
<tt>Object</tt>
|
||||
— the compilation options
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Object</tt></tt> — 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="true"</code> or <code>data-paper-ignore="true"</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>
|
||||
— the script to load. If none is provided, all scripts of the HTML document are iterated over and loaded
|
||||
— 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> — 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
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
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
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
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
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
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
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
796
dist/docs/classes/Segment.html
vendored
Normal 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>
|
||||
— the anchor point of the segment
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>handleIn:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the handle point relative to the anchor point of the segment that describes the in tangent of the segment
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>handleOut:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the handle point relative to the anchor point of the segment that describes the out tangent of the segment
|
||||
— 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>
|
||||
— 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’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> — <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’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’s position and distance to the neighboring segments and changing the direction and length of the segment’s handles accordingly without moving the segment itself.</p>
|
||||
<p>Two different smoothing methods are available:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>'catmull-rom'</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>'geometric'</code> use a simple heuristic and empiric geometric method to smooth the segment’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> — the type of smoothing method: <tt>‘catmull-rom’</tt>, <tt>‘geometric’</tt> — default: <tt>‘catmull-rom’</tt></li>
|
||||
<li><tt>options.factor: <tt>Number</tt></tt> — the factor parameterizing the smoothing method — default: <code>0.5</code> for <code>'catmull-rom'</code>, <code>0.4</code> for <code>'geometric'</code></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
— the smoothing options
|
||||
— 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> — <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> — <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> — 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> — 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> — <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> — 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>
|
||||
— 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
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
919
dist/docs/classes/Style.html
vendored
Normal 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>'nonzero'</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’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’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>'px'</code>, <code>'pt'</code> and <code>'em'</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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
302
dist/docs/classes/Symbol.html
vendored
Normal 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’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>
|
||||
— the source item which is copied as the definition of the symbol
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>dontCenter:</tt>
|
||||
<tt>Boolean</tt>
|
||||
|
||||
— 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>
|
||||
— the position of the placed symbol
|
||||
— 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’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> — <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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
729
dist/docs/classes/Tool.html
vendored
Normal 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>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>function:</tt>
|
||||
<tt>Function</tt>
|
||||
— 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> — 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>
|
||||
— 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> — 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>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>function:</tt>
|
||||
<tt>Function</tt>
|
||||
— 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> — 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>
|
||||
— 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> — 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>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>event:</tt>
|
||||
<tt>Object</tt>
|
||||
— an object literal containing properties describing the event
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <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>
|
||||
— the event type: <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><tt>Boolean</tt></tt> — <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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
437
dist/docs/classes/ToolEvent.html
vendored
Normal 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>’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> — 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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
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
423
dist/docs/classes/global.html
vendored
Normal 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’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’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 © 2011—2016 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <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
79
dist/docs/classes/index.html
vendored
Normal 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
11
dist/docs/index.html
vendored
Normal 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
56
dist/node/canvas.js
vendored
Normal 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
151
dist/node/extend.js
vendored
Normal 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
71
dist/node/window.js
vendored
Normal 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
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
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
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
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
82
package.json
Normal 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"
|
||||
]
|
||||
}
|
Loading…
Reference in a new issue