mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-04 03:45:58 -05:00
Setting up for merge
This commit is contained in:
Andrew
parent
19c4449165
commit
8bafd1d73d
72 changed files with 0 additions and 72965 deletions
3
build/.gitignore
vendored
3
build/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
/scriptographer.sh
|
||||
/*.tmproj
|
||||
/sync.sh
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
# Usage:
|
||||
# build.sh MODE
|
||||
#
|
||||
# MODE:
|
||||
# commented Preprocessed but still formated and commented
|
||||
# stripped Formated but without comments (default)
|
||||
# compressed Uses UglifyJS to reduce file size
|
||||
|
||||
if [ $# -eq 0 ]
|
||||
then
|
||||
MODE="stripped"
|
||||
else
|
||||
MODE=$1
|
||||
fi
|
||||
|
||||
# Create the dist folder if it does not exist yet.
|
||||
if [ ! -d ../dist/ ]
|
||||
then
|
||||
mkdir ../dist/
|
||||
fi
|
||||
|
||||
./preprocess.sh $MODE ../src/paper.js ../dist/paper.js '{ "browser": true }'
|
||||
#./preprocess.sh $MODE ../src/paper.js ../dist/paper-server.js '{ "server": true }'
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
echo "Building paper.js"
|
||||
./build.sh
|
||||
echo "Building docs"
|
||||
./docs.sh
|
||||
echo "Zipping paperjs.zip"
|
||||
./zip.sh
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
# Generate documentation
|
||||
#
|
||||
# MODE:
|
||||
# docs Generates the JS API docs - Default
|
||||
# serverdocs Generates the website templates for the online JS API docs
|
||||
|
||||
if [ $# -eq 0 ]
|
||||
then
|
||||
MODE="docs"
|
||||
else
|
||||
MODE=$1
|
||||
fi
|
||||
|
||||
cd jsdoc-toolkit
|
||||
java -jar jsrun.jar app/run.js -c=conf/$MODE.conf -D="renderMode:$MODE"
|
||||
cd ..
|
||||
|
||||
if [ $MODE = "docs" ]
|
||||
then
|
||||
# Build paper.js library for documentation
|
||||
./preprocess.sh stripped ../src/paper.js ../dist/docs/resources/js/paper.js\
|
||||
'{ "browser": true }'
|
||||
fi
|
||||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 55bd0b74e927683748aeace6e89a57e618d1f78f
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
# Generate a paper.js file that uses load.js to directly load the library
|
||||
# through the seperate source files in the src directory. Very useful during
|
||||
# development of the library itself.
|
||||
|
||||
echo "// Paper.js loader for development, as produced by the build/load.sh script
|
||||
document.write('<script type=\"text/javascript\" src=\"../../lib/prepro.js\"></script>');
|
||||
document.write('<script type=\"text/javascript\" src=\"../../src/load.js\"></script>');" > ../dist/paper.js;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
# Generate a paper.js file that uses load.js to directly load the library
|
||||
# through the seperate source files in the src directory. Very useful during
|
||||
# development of the library itself.
|
||||
|
||||
./preprocess.sh compressed ../lib/parse-js.js ../lib/parse-js-min.js '{}'
|
||||
174
build/prepro.js
174
build/prepro.js
|
|
@ -1,174 +0,0 @@
|
|||
#! /usr/bin/env node
|
||||
/*
|
||||
* Paper.js
|
||||
*
|
||||
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
* based on Scriptographer.org and designed to be largely API compatible.
|
||||
* http://paperjs.org/
|
||||
* http://scriptographer.org/
|
||||
*
|
||||
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||
*
|
||||
* Distributed under the MIT license. See LICENSE file for details.
|
||||
*
|
||||
* All rights reserved.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Prepro.js - A simple preprocesssor for JavaScript that speaks JavaScript,
|
||||
* written in JavaScript, allowing preprocessing to either happen at build time
|
||||
* or compile time. Very useful for libraries that are built for distribution,
|
||||
* but can be also compiled from seperate sources directly for development,
|
||||
* supporting build time switches.
|
||||
*/
|
||||
|
||||
// Required libs
|
||||
|
||||
var fs = require('fs'),
|
||||
path = require('path');
|
||||
|
||||
// Parse arguments
|
||||
|
||||
var args = process.argv.slice(2),
|
||||
options = {},
|
||||
files = [],
|
||||
strip = false;
|
||||
|
||||
while (args.length > 0) {
|
||||
var arg = args.shift();
|
||||
switch (arg) {
|
||||
case '-d':
|
||||
// Definitions are provided as JSON and supposed to be object literals
|
||||
var def = JSON.parse(args.shift());
|
||||
// Merge new definitions into options object.
|
||||
for (var key in def)
|
||||
options[key] = def[key];
|
||||
break;
|
||||
case '-c':
|
||||
strip = true;
|
||||
break;
|
||||
default:
|
||||
files.push(arg);
|
||||
}
|
||||
}
|
||||
|
||||
// Preprocessing
|
||||
|
||||
var code = [],
|
||||
out = [];
|
||||
|
||||
function include(base, file) {
|
||||
// Compose a pathname from base and file, which is specified relatively,
|
||||
// and normalize the new path, to get rid of ..
|
||||
file = path.normalize(path.join(base, file));
|
||||
var content = fs.readFileSync(file).toString();
|
||||
content.split(/\r\n|\n|\r/mg).forEach(function(line) {
|
||||
// See if our line starts with the preprocess prefix.
|
||||
var match = line.match(/^\s*\/\*#\*\/\s*(.*)$/);
|
||||
if (match) {
|
||||
// Check if the preprocessing line is an include statement, and if
|
||||
// so, handle it straight away
|
||||
line = match[1];
|
||||
if (match = line.match(/^include\(['"]([^;]*)['"]\);?$/)) {
|
||||
// Pass on the dirname of the current file as the new base
|
||||
include(path.dirname(file), match[1]);
|
||||
} else {
|
||||
// Any other preprocessing code is simply added, for later
|
||||
// evaluation.
|
||||
code.push(line);
|
||||
}
|
||||
} else {
|
||||
// Perhaps we need to replace some values? Supported formats are:
|
||||
// /*#=*/ options.NAME (outside comments)
|
||||
// *#=* options.NAME (inside comments)
|
||||
line = line.replace(/\/?\*#=\*\/?\s*options\.([\w]*)/g,
|
||||
function(all, name) {
|
||||
return options[name];
|
||||
}
|
||||
);
|
||||
// Now add a statement that when evaluated writes out this code line
|
||||
code.push('out.push(' + JSON.stringify(line) + ');');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Include all files. Everything else happens from there, through include()
|
||||
files.forEach(function(file) {
|
||||
include(path.resolve(), file);
|
||||
});
|
||||
|
||||
// Evaluate the resulting code: Calls puts() and writes the result to stdout.
|
||||
eval(code.join('\n'));
|
||||
|
||||
// Convert the resulting lines to one string again.
|
||||
var out = out.join('\n');
|
||||
|
||||
if (strip) {
|
||||
out = stripComments(out);
|
||||
// Strip empty lines that contain only white space and line breaks, as they
|
||||
// are left-overs from comment removal.
|
||||
out = out.replace(/^[ \t]+(\r\n|\n|\r)/gm, function(all) {
|
||||
return '';
|
||||
});
|
||||
// Replace a sequence of more than two line breaks with only two.
|
||||
out = out.replace(/(\r\n|\n|\r)(\r\n|\n|\r)+/g, function(all, lineBreak) {
|
||||
return lineBreak + lineBreak;
|
||||
});
|
||||
}
|
||||
|
||||
// Write the result out
|
||||
process.stdout.write(out);
|
||||
|
||||
/**
|
||||
* Strips comments out of JavaScript code, based on:
|
||||
* http://james.padolsey.com/javascript/removing-comments-in-javascript/
|
||||
*/
|
||||
function stripComments(str) {
|
||||
str = ('__' + str + '__').split('');
|
||||
var singleQuote = false,
|
||||
doubleQuote = false,
|
||||
blockComment = false,
|
||||
lineComment = false,
|
||||
preserveComment = false;
|
||||
for (var i = 0, l = str.length; i < l; i++) {
|
||||
if (singleQuote) {
|
||||
if (str[i] == "'" && str[i - 1] !== '\\')
|
||||
singleQuote = false;
|
||||
} else if (doubleQuote) {
|
||||
if (str[i] == '"' && str[i - 1] !== '\\')
|
||||
doubleQuote = false;
|
||||
} else if (blockComment) {
|
||||
// Is the block comment closing?
|
||||
if (str[i] == '*' && str[i + 1] == '/') {
|
||||
if (!preserveComment)
|
||||
str[i] = str[i + 1] = '';
|
||||
blockComment = preserveComment = false;
|
||||
} else if (!preserveComment) {
|
||||
str[i] = '';
|
||||
}
|
||||
} else if (lineComment) {
|
||||
// One-line comments end with the line-break
|
||||
if (str[i + 1] == '\n' || str[i + 1] == '\r')
|
||||
lineComment = false;
|
||||
str[i] = '';
|
||||
} else {
|
||||
doubleQuote = str[i] == '"';
|
||||
singleQuote = str[i] == "'";
|
||||
if (!blockComment && str[i] == '/') {
|
||||
if (str[i + 1] == '*') {
|
||||
// Do not filter out conditional comments and comments marked
|
||||
// as protected (/*! */)
|
||||
preserveComment = str[i + 2] == '@' || str[i + 2] == '!';
|
||||
if (!preserveComment)
|
||||
str[i] = '';
|
||||
blockComment = true;
|
||||
} else if (str[i + 1] == '/') {
|
||||
str[i] = '';
|
||||
lineComment = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return str.join('').slice(2, -2);
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
# preprocess.sh
|
||||
#
|
||||
# A simple code preprocessing wrapper that uses a combination of cpp, jssrip.py
|
||||
# and sed to preprocess JavaScript files containing C-style preprocess macros
|
||||
# (#include, #ifdef, etc.). Three options offer control over wether comments
|
||||
# are preserved or stripped and whitespaces are compressed.
|
||||
#
|
||||
# Usage:
|
||||
# preprocess.sh MODE SOURCE DESTINATION ARGUMENTS
|
||||
#
|
||||
# ARGUMENTS:
|
||||
# e.g. "-DBROWSER"
|
||||
#
|
||||
# MODE:
|
||||
# commented Preprocessed but still formated and commented
|
||||
# stripped Formated but without comments
|
||||
# compressed Uses UglifyJS to reduce file size
|
||||
|
||||
VERSION=0.22
|
||||
DATE=$(git log -1 --pretty=format:%ad)
|
||||
|
||||
COMMAND="./prepro.js -d '{ \"version\": $VERSION, \"date\": \"$DATE\" }' -d '$4' $2"
|
||||
|
||||
case $1 in
|
||||
stripped)
|
||||
eval "$COMMAND -c" > $3
|
||||
;;
|
||||
commented)
|
||||
eval $COMMAND > $3
|
||||
;;
|
||||
compressed)
|
||||
eval $COMMAND > temp.js
|
||||
../../uglifyjs/bin/uglifyjs temp.js --extra --unsafe --reserved-names "$eval,$sign" > $3
|
||||
rm temp.js
|
||||
;;
|
||||
esac
|
||||
39
build/zip.sh
39
build/zip.sh
|
|
@ -1,39 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Paper.js
|
||||
#
|
||||
# This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
# based on Scriptographer.org and designed to be largely API compatible.
|
||||
# http://scriptographer.org/
|
||||
#
|
||||
# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
# http://lehni.org/ & http://jonathanpuckey.com/
|
||||
#
|
||||
# Distributed under the MIT license. See LICENSE file for details.
|
||||
#
|
||||
# All rights reserved.
|
||||
|
||||
if [ -f paperjs.zip ]
|
||||
then
|
||||
rm paperjs.zip
|
||||
fi
|
||||
# Create a temporary folder to copy all files in for zipping
|
||||
mkdir zip
|
||||
cd zip
|
||||
BASE=../..
|
||||
# Copy license over
|
||||
cp $BASE/LICENSE.txt .
|
||||
# Make library folder and copy paper.js there
|
||||
mkdir lib
|
||||
cp $BASE/dist/paper.js lib
|
||||
# Copy examples over
|
||||
cp -r $BASE/examples .
|
||||
# Replace ../../dist/ with ../../lib/ in each example
|
||||
find examples -type f -print0 | xargs -0 perl -i -pe 's/\.\.\/\.\.\/dist\//\.\.\/\.\.\/lib\//g'
|
||||
# Copy docs over
|
||||
cp -r $BASE/dist/docs .
|
||||
# Zip the whole thing
|
||||
zip -9 -r $BASE/dist/paperjs.zip * LICENSE.txt -x "*/.DS_Store"
|
||||
cd ..
|
||||
# Remove the temporary folder again
|
||||
rm -fr zip
|
||||
3
dist/.gitignore
vendored
3
dist/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
/paper-server.js
|
||||
/serverdocs/
|
||||
/paperjs.zip
|
||||
569
dist/docs/classes/CharacterStyle.html
vendored
569
dist/docs/classes/CharacterStyle.html
vendored
|
|
@ -1,569 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CharacterStyle</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>CharacterStyle</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></b></p>
|
||||
|
||||
<p>The CharacterStyle object represents the character style of a text
|
||||
item (<a href="../classes/TextItem.html#characterstyle"><tt>textItem.characterStyle</tt></a>)</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var text = new PointText(new Point(50, 50));
|
||||
text.content = 'Hello world.';
|
||||
text.characterStyle = {
|
||||
fontSize: 50,
|
||||
fillColor: 'black',
|
||||
};</pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="font-member" class="member">
|
||||
<div id="font-link" class="member-link">
|
||||
<a name="font" href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
|
||||
</div>
|
||||
<div id="font-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('font', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font of the character style.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'sans-serif'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fontsize-member" class="member">
|
||||
<div id="fontsize-link" class="member-link">
|
||||
<a name="fontsize" href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
|
||||
</div>
|
||||
<div id="fontsize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fontsize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font size of the character style in points.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>10</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></h2>
|
||||
|
||||
|
||||
<h3>Stroke Style</h3>
|
||||
|
||||
<div id="strokecolor-member" class="member">
|
||||
<div id="strokecolor-link" class="member-link">
|
||||
<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the stroke color of a path:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to RGB red:
|
||||
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokewidth-member" class="member">
|
||||
<div id="strokewidth-link" class="member-link">
|
||||
<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
<div id="strokewidth-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The width of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>1</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting an item's stroke width:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// 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-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokecap-member" class="member">
|
||||
<div id="strokecap-link" class="member-link">
|
||||
<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecap-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
||||
have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'butt'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('round', 'square', 'butt')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke caps:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
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-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokejoin-member" class="member">
|
||||
<div id="strokejoin-link" class="member-link">
|
||||
<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
<div id="strokejoin-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the corners of paths when they have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'miter'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt> ('miter', 'round', 'bevel')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke joins:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
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-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dashoffset-member" class="member">
|
||||
<div id="dashoffset-link" class="member-link">
|
||||
<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
<div id="dashoffset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The dash offset of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>0</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dasharray-member" class="member">
|
||||
<div id="dasharray-link" class="member-link">
|
||||
<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
<div id="dasharray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>[]</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Array</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
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-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="miterlimit-member" class="member">
|
||||
<div id="miterlimit-link" class="member-link">
|
||||
<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
<div id="miterlimit-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The miter limit of the stroke.</p>
|
||||
<p>When two line segments meet at a sharp angle and miter joins have been
|
||||
specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
|
||||
far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
|
||||
limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>10</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fill Style</h3>
|
||||
|
||||
<div id="fillcolor-member" class="member">
|
||||
<div id="fillcolor-link" class="member-link">
|
||||
<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
<div id="fillcolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fill color.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the fill color of a path to red:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set the fill color of the circle to RGB red:
|
||||
circle.fillColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
712
dist/docs/classes/Color.html
vendored
712
dist/docs/classes/Color.html
vendored
|
|
@ -1,712 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Color</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Color</h1>
|
||||
|
||||
<p>All properties and functions that expect color values accept
|
||||
instances of the different color classes such as <a href="../classes/RgbColor.html"><tt>RgbColor</tt></a>,
|
||||
<a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> and <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>, and also accept named colors
|
||||
and hex values as strings which are then converted to instances of
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> internally.</p>
|
||||
<p>
|
||||
<b>Example</b> — Named color values:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30.
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Pass a color name to the fillColor property, which is internally
|
||||
// converted to an RgbColor.
|
||||
circle.fillColor = 'green';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hex color values:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30.
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Pass a hex string to the fillColor property, which is internally
|
||||
// converted to an RgbColor.
|
||||
circle.fillColor = '#ff0000';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== properties ========================= -->
|
||||
<div class="reference-members"><h2>Operators</h2>
|
||||
|
||||
<div id="equals-member" class="member">
|
||||
<div id="equals-link" class="member-link">
|
||||
<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Color</tt></tt></a>
|
||||
</div>
|
||||
<div id="equals-description" class="member-description hidden">
|
||||
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Color</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSB Components</h3>
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-7">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
4382
dist/docs/classes/CompoundPath.html
vendored
4382
dist/docs/classes/CompoundPath.html
vendored
File diff suppressed because it is too large
Load diff
878
dist/docs/classes/Curve.html
vendored
878
dist/docs/classes/Curve.html
vendored
|
|
@ -1,878 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Curve</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Curve</h1>
|
||||
|
||||
<p>The Curve object represents the parts of a path that are connected by
|
||||
two following <a href="../classes/Segment.html"><tt>Segment</tt></a> objects. The curves of a path can be accessed
|
||||
through its <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
|
||||
<p>While a segment describe the anchor point and its incoming and outgoing
|
||||
handles, a Curve object describes the curve passing between two such
|
||||
segments. Curves and segments represent two different ways of looking at the
|
||||
same thing, but focusing on different aspects. Curves for example offer many
|
||||
convenient ways to work with parts of the path, finding lengths, positions or
|
||||
tangents at given offsets.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-member" class="member">
|
||||
<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-link" class="member-link">
|
||||
<a name="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7" href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
|
||||
</div>
|
||||
<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a new curve object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>segment1:</tt>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>segment2:</tt>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg2:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg3:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg4:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg5:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg6:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg7:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point1-member" class="member">
|
||||
<div id="point1-link" class="member-link">
|
||||
<a name="point1" href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
|
||||
</div>
|
||||
<div id="point1-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point1', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The first anchor point of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point2-member" class="member">
|
||||
<div id="point2-link" class="member-link">
|
||||
<a name="point2" href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
|
||||
</div>
|
||||
<div id="point2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The second anchor point of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handle1-member" class="member">
|
||||
<div id="handle1-link" class="member-link">
|
||||
<a name="handle1" href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
|
||||
</div>
|
||||
<div id="handle1-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle1', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point that describes the tangent in the first anchor point.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handle2-member" class="member">
|
||||
<div id="handle2-link" class="member-link">
|
||||
<a name="handle2" href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
|
||||
</div>
|
||||
<div id="handle2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point that describes the tangent in the second anchor point.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment1-member" class="member">
|
||||
<div id="segment1-link" class="member-link">
|
||||
<a name="segment1" href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
|
||||
</div>
|
||||
<div id="segment1-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment1', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The first segment of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment2-member" class="member">
|
||||
<div id="segment2-link" class="member-link">
|
||||
<a name="segment2" href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
|
||||
</div>
|
||||
<div id="segment2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The second segment of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-member" class="member">
|
||||
<div id="path-link" class="member-link">
|
||||
<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div id="path-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path that the curve belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Path.html"><tt>Path</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="next-member" class="member">
|
||||
<div id="next-link" class="member-link">
|
||||
<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
<div id="next-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The next curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
|
||||
belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="previous-member" class="member">
|
||||
<div id="previous-link" class="member-link">
|
||||
<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
<div id="previous-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The previous curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
|
||||
belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selected-member" class="member">
|
||||
<div id="selected-link" class="member-link">
|
||||
<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
<div id="selected-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the handles of the curve are selected.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="length-member" class="member">
|
||||
<div id="length-link" class="member-link">
|
||||
<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
|
||||
</div>
|
||||
<div id="length-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The approximated length of the curve in points.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="islinear-member" class="member">
|
||||
<div id="islinear-link" class="member-link">
|
||||
<a name="islinear" href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
|
||||
</div>
|
||||
<div id="islinear-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('islinear', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if this curve is linear, meaning it does not define any curve
|
||||
handle.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> the curve is linear, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getparameterat-offset-member" class="member">
|
||||
<div id="getparameterat-offset-link" class="member-link">
|
||||
<a name="getparameterat-offset" href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
|
||||
</div>
|
||||
<div id="getparameterat-offset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameterat-offset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>offset:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>start:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getpoint-parameter-member" class="member">
|
||||
<div id="getpoint-parameter-link" class="member-link">
|
||||
<a name="getpoint-parameter" href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
|
||||
</div>
|
||||
<div id="getpoint-parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpoint-parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the point on the curve at the specified position.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position at which to find the point as
|
||||
a value between <tt>0</tt> and <tt>1</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="gettangent-parameter-member" class="member">
|
||||
<div id="gettangent-parameter-link" class="member-link">
|
||||
<a name="gettangent-parameter" href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
|
||||
</div>
|
||||
<div id="gettangent-parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangent-parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the tangent point on the curve at the specified position.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position at which to find the tangent
|
||||
point as a value between <tt>0</tt> and <tt>1</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getnormal-parameter-member" class="member">
|
||||
<div id="getnormal-parameter-link" class="member-link">
|
||||
<a name="getnormal-parameter" href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
|
||||
</div>
|
||||
<div id="getnormal-parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormal-parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the normal point on the curve at the specified position.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position at which to find the normal
|
||||
point as a value between <tt>0</tt> and <tt>1</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getparameter-point-member" class="member">
|
||||
<div id="getparameter-point-link" class="member-link">
|
||||
<a name="getparameter-point" href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="getparameter-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameter-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="reverse-member" class="member">
|
||||
<div id="reverse-link" class="member-link">
|
||||
<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
<div id="reverse-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns a reversed version of the curve, without modifying the curve
|
||||
itself.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt> — a reversed version of the curve
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns a copy of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the curve.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
505
dist/docs/classes/CurveLocation.html
vendored
505
dist/docs/classes/CurveLocation.html
vendored
|
|
@ -1,505 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CurveLocation</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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 <a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>, a value between
|
||||
<tt>0</tt> (beginning of the curve) and <tt>1</tt> (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" onclick="return toggleMember('index', true);"><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>, Path#getNearestLocation(point), etc.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curvelocation-curve-parameter-point-distance-member" class="member">
|
||||
<div id="curvelocation-curve-parameter-point-distance-link" class="member-link">
|
||||
<a name="curvelocation-curve-parameter-point-distance" href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
|
||||
</div>
|
||||
<div id="curvelocation-curve-parameter-point-distance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curvelocation-curve-parameter-point-distance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a new CurveLocation object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>distance:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="segment-member" class="member">
|
||||
<div id="segment-link" class="member-link">
|
||||
<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
<div id="segment-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The segment of the curve which is closer to the described location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curve-member" class="member">
|
||||
<div id="curve-link" class="member-link">
|
||||
<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
<div id="curve-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve by which the location is defined.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-member" class="member">
|
||||
<div id="path-link" class="member-link">
|
||||
<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div id="path-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path this curve belongs to, if any.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the curve within the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> list, if the
|
||||
curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Index</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="offset-member" class="member">
|
||||
<div id="offset-link" class="member-link">
|
||||
<a name="offset" href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
|
||||
</div>
|
||||
<div id="offset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('offset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The length of the path from its beginning up to the location described
|
||||
by this object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curveoffset-member" class="member">
|
||||
<div id="curveoffset-link" class="member-link">
|
||||
<a name="curveoffset" href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
|
||||
</div>
|
||||
<div id="curveoffset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveoffset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The length of the curve from its beginning up to the location described
|
||||
by this object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="parameter-member" class="member">
|
||||
<div id="parameter-link" class="member-link">
|
||||
<a name="parameter" href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
|
||||
</div>
|
||||
<div id="parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve parameter, as used by various bezier curve calculations. It is
|
||||
value between <tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of
|
||||
the curve).</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The point which is defined by the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> and
|
||||
<a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tangent-member" class="member">
|
||||
<div id="tangent-link" class="member-link">
|
||||
<a name="tangent" href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
|
||||
</div>
|
||||
<div id="tangent-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tangent', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The tangential vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="normal-member" class="member">
|
||||
<div id="normal-link" class="member-link">
|
||||
<a name="normal" href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
|
||||
</div>
|
||||
<div id="normal-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('normal', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The normal vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="distance-member" class="member">
|
||||
<div id="distance-link" class="member-link">
|
||||
<a name="distance" href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
|
||||
</div>
|
||||
<div id="distance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('distance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The distance from the queried point to the returned location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the curve location.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
73
dist/docs/classes/Event.html
vendored
73
dist/docs/classes/Event.html
vendored
|
|
@ -1,73 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Event</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Event</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="modifiers-member" class="member">
|
||||
<div id="modifiers-link" class="member-link">
|
||||
<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div id="modifiers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
200
dist/docs/classes/Gradient.html
vendored
200
dist/docs/classes/Gradient.html
vendored
|
|
@ -1,200 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gradient</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Gradient</h1>
|
||||
|
||||
<p>The Gradient object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="gradient-stops-member" class="member">
|
||||
<div id="gradient-stops-link" class="member-link">
|
||||
<a name="gradient-stops" href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
|
||||
</div>
|
||||
<div id="gradient-stops-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradient-stops', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a gradient object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>stops:</tt>
|
||||
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>type:</tt>
|
||||
<tt>String</tt>
|
||||
— 'linear' or 'radial'
|
||||
— optional, default: <tt>'linear'</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== properties ========================= -->
|
||||
<div class="reference-members"><h2>Operators</h2>
|
||||
|
||||
<div id="equals-member" class="member">
|
||||
<div id="equals-link" class="member-link">
|
||||
<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Gradient</tt></tt></a>
|
||||
</div>
|
||||
<div id="equals-description" class="member-description hidden">
|
||||
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Gradient</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Checks whether the gradient is equal to the supplied gradient.</p>
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> they are equal, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="stops-member" class="member">
|
||||
<div id="stops-link" class="member-link">
|
||||
<a name="stops" href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
|
||||
</div>
|
||||
<div id="stops-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('stops', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The gradient stops on the gradient ramp.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt> — a copy of the gradient
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
465
dist/docs/classes/GradientColor.html
vendored
465
dist/docs/classes/GradientColor.html
vendored
|
|
@ -1,465 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GradientColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>GradientColor</h1>
|
||||
|
||||
<p>The GradientColor object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="gradientcolor-gradient-origin-destination-member" class="member">
|
||||
<div id="gradientcolor-gradient-origin-destination-link" class="member-link">
|
||||
<a name="gradientcolor-gradient-origin-destination" href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
|
||||
</div>
|
||||
<div id="gradientcolor-gradient-origin-destination-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientcolor-gradient-origin-destination', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a gradient color object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>gradient:</tt>
|
||||
<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>origin:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>destination:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>hilite:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Applying a linear gradient color containing evenly distributed color stops:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</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, bottomRight);
|
||||
|
||||
// Create the gradient, passing it an array of colors to be converted
|
||||
// to evenly distributed color stops:
|
||||
var gradient = new Gradient(['yellow', 'red', 'blue']);
|
||||
|
||||
// Have the gradient color run between the topLeft and
|
||||
// bottomRight points we defined earlier:
|
||||
var gradientColor = new GradientColor(gradient, topLeft, bottomRight);
|
||||
|
||||
// Set the fill color of the path to the gradient color:
|
||||
path.fillColor = gradientColor;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Applying a radial gradient color containing unevenly distributed color stops:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at the center of the view
|
||||
// with a radius of 80:
|
||||
var path = new Path.Circle(view.center, 80);
|
||||
|
||||
// The stops array: yellow mixes with red between 0 and 15%,
|
||||
// 15% to 30% is pure red, red mixes with black between 30% to 100%:
|
||||
var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
|
||||
|
||||
// Create a radial gradient using the color stops array:
|
||||
var gradient = new Gradient(stops, 'radial');
|
||||
|
||||
// We will use the center point of the circle shaped path as
|
||||
// the origin point for our gradient color
|
||||
var from = path.position;
|
||||
|
||||
// The destination point of the gradient color will be the
|
||||
// center point of the path + 80pt in horizontal direction:
|
||||
var to = path.position + [80, 0];
|
||||
|
||||
// Create the gradient color:
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
|
||||
// Set the fill color of the path to the gradient color:
|
||||
path.fillColor = gradientColor;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="origin-member" class="member">
|
||||
<div id="origin-link" class="member-link">
|
||||
<a name="origin" href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
|
||||
</div>
|
||||
<div id="origin-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('origin', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The origin point of the gradient.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Move the origin point of the gradient, by moving your mouse over the view below:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create a rectangle shaped path with the same dimensions as
|
||||
// that of the view and fill it with a gradient color:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
var gradient = new Gradient(['yellow', 'red', 'blue']);
|
||||
|
||||
// Have the gradient color run from the top left point of the view,
|
||||
// to the bottom right point of the view:
|
||||
var from = view.bounds.topLeft;
|
||||
var to = view.bounds.bottomRight;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Set the origin point of the path's gradient color
|
||||
// to the position of the mouse:
|
||||
path.fillColor.origin = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="destination-member" class="member">
|
||||
<div id="destination-link" class="member-link">
|
||||
<a name="destination" href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
|
||||
</div>
|
||||
<div id="destination-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('destination', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The destination point of the gradient.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Move the destination point of the gradient, by moving your mouse over the view below:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// using 40% of the height of the view as its radius
|
||||
// and fill it with a radial gradient color:
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
|
||||
var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
|
||||
var from = view.center;
|
||||
var to = view.bounds.bottomRight;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Set the origin point of the path's gradient color
|
||||
// to the position of the mouse:
|
||||
path.fillColor.destination = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hilite-member" class="member">
|
||||
<div id="hilite-link" class="member-link">
|
||||
<a name="hilite" href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
|
||||
</div>
|
||||
<div id="hilite-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hilite', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hilite point of the gradient.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Move the hilite point of the gradient, by moving your mouse over the view below:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// using 40% of the height of the view as its radius
|
||||
// and fill it with a radial gradient color:
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Set the origin hilite of the path's gradient color
|
||||
// to the position of the mouse:
|
||||
path.fillColor.hilite = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt> — a copy of the gradient color
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the gradient color has the same properties as that of the
|
||||
supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/GradientColor.html"><tt>GradientColor</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt></tt> — <tt>true</tt> the GradientColor is the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="transform-matrix-member" class="member">
|
||||
<div id="transform-matrix-link" class="member-link">
|
||||
<a name="transform-matrix" href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
|
||||
</div>
|
||||
<div id="transform-matrix-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Transform the gradient color by the specified matrix.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>matrix:</tt>
|
||||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||||
— the matrix to transform the gradient color by
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
258
dist/docs/classes/GradientStop.html
vendored
258
dist/docs/classes/GradientStop.html
vendored
|
|
@ -1,258 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GradientStop</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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-member" class="member">
|
||||
<div id="gradientstop-link" class="member-link">
|
||||
<a name="gradientstop" href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
|
||||
</div>
|
||||
<div id="gradientstop-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientstop', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a GradientStop object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color of the stop
|
||||
— optional, default: <tt>new RgbColor(0, 0, 0)</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>rampPoint:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position of the stop on the gradient
|
||||
ramp {@default 0}
|
||||
— optional, default: <tt>0</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="ramppoint-member" class="member">
|
||||
<div id="ramppoint-link" class="member-link">
|
||||
<a name="ramppoint" href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
|
||||
</div>
|
||||
<div id="ramppoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ramppoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The ramp-point of the gradient stop as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Animating a gradient's ramp points:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</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(view.center, view.bounds.height * 0.4);
|
||||
|
||||
// Prepare the gradient color and apply it to the path:
|
||||
var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
|
||||
var gradient = new Gradient(colors, 'radial');
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
// This function is called each frame of the animation:
|
||||
function onFrame(event) {
|
||||
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-member" class="member">
|
||||
<div id="color-link" class="member-link">
|
||||
<a name="color" href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
|
||||
</div>
|
||||
<div id="color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the gradient stop.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Animating a gradient's ramp points:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</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(view.center, view.bounds.height * 0.4);
|
||||
|
||||
// Create a radial gradient that mixes red and black evenly:
|
||||
var gradient = new Gradient(['red', 'black'], 'radial');
|
||||
|
||||
// Fill the path with a gradient color that runs from its center,
|
||||
// to the right center of its bounding rectangle:
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
// This function is called each frame of the animation:
|
||||
function onFrame(event) {
|
||||
// Change the hue of the first stop's color:
|
||||
gradient.stops[0].color.hue += 1;
|
||||
}
|
||||
</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-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt> — a copy of the gradient-stop
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
749
dist/docs/classes/GrayColor.html
vendored
749
dist/docs/classes/GrayColor.html
vendored
|
|
@ -1,749 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GrayColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>GrayColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>A GrayColor object is used to represent any gray color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="graycolor-gray-member" class="member">
|
||||
<div id="graycolor-gray-link" class="member-link">
|
||||
<a name="graycolor-gray" href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="graycolor-gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('graycolor-gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a GrayColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>gray:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of gray in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating a GrayColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Create a GrayColor with 50% gray:
|
||||
circle.fillColor = new GrayColor(0.5);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSB Components</h3>
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
3587
dist/docs/classes/Group.html
vendored
3587
dist/docs/classes/Group.html
vendored
File diff suppressed because it is too large
Load diff
242
dist/docs/classes/HitResult.html
vendored
242
dist/docs/classes/HitResult.html
vendored
|
|
@ -1,242 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HitResult</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Describes the type of the hit result. For example, if you hit a segment
|
||||
point, the type would be 'segment'.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('segment', 'handle-in', 'handle-out', 'stroke', 'fill',
|
||||
'bounds', 'center')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="name-member" class="member">
|
||||
<div id="name-link" class="member-link">
|
||||
<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
|
||||
</div>
|
||||
<div id="name-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a <a href="../classes/HitResult.html#type"><tt>hitResult.type</tt></a> of 'bounds', this property
|
||||
describes which corner of the bounding rectangle was hit.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('top-left', 'top-right', 'bottom-left', 'bottom-right',
|
||||
'left-center', 'top-center', 'right-center', 'bottom-center')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item-member" class="member">
|
||||
<div id="item-link" class="member-link">
|
||||
<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div id="item-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item that was hit.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="location-member" class="member">
|
||||
<div id="location-link" class="member-link">
|
||||
<a name="location" href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
|
||||
</div>
|
||||
<div id="location-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('location', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a type of 'stroke', this property gives more
|
||||
information about the exact position that was hit on the path.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment-member" class="member">
|
||||
<div id="segment-link" class="member-link">
|
||||
<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
<div id="segment-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hit point.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
766
dist/docs/classes/HsbColor.html
vendored
766
dist/docs/classes/HsbColor.html
vendored
|
|
@ -1,766 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HsbColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>HsbColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>An HsbColor object is used to represent any HSB color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="hsbcolor-hue-saturation-brightness-member" class="member">
|
||||
<div id="hsbcolor-hue-saturation-brightness-link" class="member-link">
|
||||
<a name="hsbcolor-hue-saturation-brightness" href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="hsbcolor-hue-saturation-brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hsbcolor-hue-saturation-brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an HsbColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>hue:</tt>
|
||||
<tt>Number</tt>
|
||||
— the hue of the color as a value in degrees between
|
||||
<tt>0</tt> and <tt>360</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>saturation:</tt>
|
||||
<tt>Number</tt>
|
||||
— the saturation of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>brightness:</tt>
|
||||
<tt>Number</tt>
|
||||
— the brightness of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an HsbColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Create an HsbColor with a hue of 90 degrees, a saturation
|
||||
// 100% and a brightness of 100%:
|
||||
circle.fillColor = new HsbColor(90, 1, 1);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
730
dist/docs/classes/HslColor.html
vendored
730
dist/docs/classes/HslColor.html
vendored
|
|
@ -1,730 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HslColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>HslColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>An HslColor object is used to represent any HSL color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="hslcolor-hue-saturation-lightness-member" class="member">
|
||||
<div id="hslcolor-hue-saturation-lightness-link" class="member-link">
|
||||
<a name="hslcolor-hue-saturation-lightness" href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an HslColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>hue:</tt>
|
||||
<tt>Number</tt>
|
||||
— the hue of the color as a value in degrees between
|
||||
<tt>0</tt> and <tt>360</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>saturation:</tt>
|
||||
<tt>Number</tt>
|
||||
— the saturation of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>lightness:</tt>
|
||||
<tt>Number</tt>
|
||||
— the lightness of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an HslColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Create an HslColor with a hue of 90 degrees, a saturation
|
||||
// 100% and a lightness of 50%:
|
||||
circle.fillColor = new HslColor(90, 1, 0.5);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
3289
dist/docs/classes/Item.html
vendored
3289
dist/docs/classes/Item.html
vendored
File diff suppressed because it is too large
Load diff
100
dist/docs/classes/Key.html
vendored
100
dist/docs/classes/Key.html
vendored
|
|
@ -1,100 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Key</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Key</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="isdown-key-member" class="member">
|
||||
<div id="isdown-key-link" class="member-link">
|
||||
<a name="isdown-key" href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
|
||||
</div>
|
||||
<div id="isdown-key-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdown-key', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks whether the specified key is pressed.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>key:</tt>
|
||||
<tt>String</tt>
|
||||
— One of: 'backspace', 'enter', 'shift', 'control',
|
||||
'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home',
|
||||
'left', 'up', 'right', 'down', 'delete', 'command'
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the key is pressed, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Whenever the user clicks, create a circle shaped path. If the 'a' key is pressed, fill it with red, otherwise fill it with blue:
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">function onMouseDown(event) {
|
||||
var path = new Path.Circle(event.point, 10);
|
||||
if(Key.isDown('a')) {
|
||||
path.fillColor = 'red';
|
||||
} else {
|
||||
path.fillColor = 'blue';
|
||||
}
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
220
dist/docs/classes/KeyEvent.html
vendored
220
dist/docs/classes/KeyEvent.html
vendored
|
|
@ -1,220 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>KeyEvent</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>KeyEvent</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
|
||||
|
||||
<p>KeyEvent 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of key event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('keydown', 'keyup')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="character-member" class="member">
|
||||
<div id="character-link" class="member-link">
|
||||
<a name="character" href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
|
||||
</div>
|
||||
<div id="character-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('character', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The string character of the key that caused this key event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="key-member" class="member">
|
||||
<div id="key-link" class="member-link">
|
||||
<a name="key" href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
|
||||
</div>
|
||||
<div id="key-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('key', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The key that caused this key event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<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="modifiers-member" class="member">
|
||||
<div id="modifiers-link" class="member-link">
|
||||
<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div id="modifiers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
3588
dist/docs/classes/Layer.html
vendored
3588
dist/docs/classes/Layer.html
vendored
File diff suppressed because it is too large
Load diff
329
dist/docs/classes/Line.html
vendored
329
dist/docs/classes/Line.html
vendored
|
|
@ -1,329 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Line</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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-member" class="member">
|
||||
<div id="line-point1-point2-link" class="member-link">
|
||||
<a name="line-point1-point2" href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
|
||||
</div>
|
||||
<div id="line-point1-point2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('line-point1-point2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Line object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<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>infinite:</tt>
|
||||
<tt>Boolean</tt>
|
||||
|
||||
— optional, default: <tt>true</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The starting point of the line</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="vector-member" class="member">
|
||||
<div id="vector-link" class="member-link">
|
||||
<a name="vector" href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
|
||||
</div>
|
||||
<div id="vector-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('vector', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The vector of the line</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="infinite-member" class="member">
|
||||
<div id="infinite-link" class="member-link">
|
||||
<a name="infinite" href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
|
||||
</div>
|
||||
<div id="infinite-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('infinite', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the line extends infinitely</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="intersect-line-member" class="member">
|
||||
<div id="intersect-line-link" class="member-link">
|
||||
<a name="intersect-line" href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
|
||||
</div>
|
||||
<div id="intersect-line-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersect-line', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>line:</tt>
|
||||
<a href="../classes/Line.html"><tt>Line</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the intersection point of the lines
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getside-point-member" class="member">
|
||||
<div id="getside-point-link" class="member-link">
|
||||
<a name="getside-point" href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="getside-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getside-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getdistance-point-member" class="member">
|
||||
<div id="getdistance-point-link" class="member-link">
|
||||
<a name="getdistance-point" href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="getdistance-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdistance-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
1824
dist/docs/classes/Matrix.html
vendored
1824
dist/docs/classes/Matrix.html
vendored
File diff suppressed because it is too large
Load diff
475
dist/docs/classes/PaperScope.html
vendored
475
dist/docs/classes/PaperScope.html
vendored
|
|
@ -1,475 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PaperScope</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PaperScope</h1>
|
||||
|
||||
<p>The <tt>PaperScope</tt> 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, <tt>PaperScope</tt> objects need to
|
||||
be manually created and handled.</p>
|
||||
<p>Paper classes can only be accessed through <tt>PaperScope</tt> 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
|
||||
<tt>PaperScope</tt>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="paperscope-member" class="member">
|
||||
<div id="paperscope-link" class="member-link">
|
||||
<a name="paperscope" href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
|
||||
</div>
|
||||
<div id="paperscope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paperscope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a PaperScope object.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="version-member" class="member">
|
||||
<div id="version-link" class="member-link">
|
||||
<a name="version" href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
|
||||
</div>
|
||||
<div id="version-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('version', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The version of Paper.js, as a float number.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects-member" class="member">
|
||||
<div id="projects-link" class="member-link">
|
||||
<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
<div id="projects-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of all open projects within the current Paper.js context.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="view-member" class="member">
|
||||
<div id="view-link" class="member-link">
|
||||
<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div id="view-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The active view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="views-member" class="member">
|
||||
<div id="views-link" class="member-link">
|
||||
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
<div id="views-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tool-member" class="member">
|
||||
<div id="tool-link" class="member-link">
|
||||
<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
<div id="tool-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the active tool.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools-member" class="member">
|
||||
<div id="tools-link" class="member-link">
|
||||
<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
<div id="tools-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of available tools.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<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="install-scope-member" class="member">
|
||||
<div id="install-scope-link" class="member-link">
|
||||
<a name="install-scope" href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
|
||||
</div>
|
||||
<div id="install-scope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('install-scope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Injects the paper scope into any other given scope. Can be used for
|
||||
examle to inject the currently active PaperScope into the window's global
|
||||
scope, to emulate PaperScript-style globally accessible Paper classes and
|
||||
objects:</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">paper.install(window);</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="setup-canvas-member" class="member">
|
||||
<div id="setup-canvas-link" class="member-link">
|
||||
<a name="setup-canvas" href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
|
||||
</div>
|
||||
<div id="setup-canvas-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setup-canvas', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<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><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>canvas:</tt>
|
||||
<tt>HTMLCanvasElement</tt>
|
||||
— The canvas this scope should be
|
||||
associated with.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="get-id-member" class="member">
|
||||
<div id="get-id-link" class="member-link">
|
||||
<a name="get-id" href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
|
||||
</div>
|
||||
<div id="get-id-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('get-id', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Retrieves a PaperScope object with the given id or associated with
|
||||
the passed canvas element.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>id:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="each-iter-member" class="member">
|
||||
<div id="each-iter-link" class="member-link">
|
||||
<a name="each-iter" href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
|
||||
</div>
|
||||
<div id="each-iter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('each-iter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Iterates over all active scopes and calls the passed iterator
|
||||
function for each of them.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>iter:</tt>
|
||||
|
||||
— the iterator function.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
137
dist/docs/classes/PaperScript.html
vendored
137
dist/docs/classes/PaperScript.html
vendored
|
|
@ -1,137 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PaperScript</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PaperScript</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="compile-code-member" class="member">
|
||||
<div id="compile-code-link" class="member-link">
|
||||
<a name="compile-code" href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
|
||||
</div>
|
||||
<div id="compile-code-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('compile-code', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Compiles PaperScript code into JavaScript code.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— The PaperScript code.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — The compiled PaperScript as JavaScript code.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="evaluate-code-scope-member" class="member">
|
||||
<div id="evaluate-code-scope-link" class="member-link">
|
||||
<a name="evaluate-code-scope" href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
|
||||
</div>
|
||||
<div id="evaluate-code-scope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('evaluate-code-scope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Evaluates parsed PaperScript code in the passed <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
object. It also installs handlers automatically for us.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— The PaperScript code.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
<a href="../classes/PaperScript.html"><tt>PaperScript</tt></a>
|
||||
— The scope in which the code is executed.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Object</tt></tt> — The result of the code evaluation.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
92
dist/docs/classes/ParagraphStyle.html
vendored
92
dist/docs/classes/ParagraphStyle.html
vendored
|
|
@ -1,92 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ParagraphStyle</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>ParagraphStyle</h1>
|
||||
|
||||
<p>The ParagraphStyle object represents the paragraph style of a text
|
||||
item (<a href="../classes/TextItem.html#paragraphstyle"><tt>textItem.paragraphStyle</tt></a>).</p>
|
||||
<p>Currently, the ParagraphStyle object may seem a bit empty, with just the
|
||||
<a href="../classes/ParagraphStyle.html#justification" onclick="return toggleMember('justification', true);"><tt>justification</tt></a> property. Yet, we have lots in store for Paper.js
|
||||
when it comes to typography. Please stay tuned.</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var text = new PointText(new Point(0,0));
|
||||
text.fillColor = 'black';
|
||||
text.content = 'Hello world.';
|
||||
text.paragraphStyle.justification = 'center';</pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="justification-member" class="member">
|
||||
<div id="justification-link" class="member-link">
|
||||
<a name="justification" href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
|
||||
</div>
|
||||
<div id="justification-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('justification', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The justification of the paragraph.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'left'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('left', 'right', 'center')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
6698
dist/docs/classes/Path.html
vendored
6698
dist/docs/classes/Path.html
vendored
File diff suppressed because it is too large
Load diff
4279
dist/docs/classes/PathItem.html
vendored
4279
dist/docs/classes/PathItem.html
vendored
File diff suppressed because it is too large
Load diff
497
dist/docs/classes/PathStyle.html
vendored
497
dist/docs/classes/PathStyle.html
vendored
|
|
@ -1,497 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PathStyle</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PathStyle</h1>
|
||||
|
||||
<p>PathStyle 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 PathStyle 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>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var circleStyle = {
|
||||
fillColor: new RgbColor(1, 0, 0),
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5
|
||||
};
|
||||
|
||||
var path = new Path.Circle(new Point(80, 50), 30);
|
||||
path.style = circleStyle;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<h3>Stroke Style</h3>
|
||||
|
||||
<div id="strokecolor-member" class="member">
|
||||
<div id="strokecolor-link" class="member-link">
|
||||
<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the stroke color of a path:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to RGB red:
|
||||
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokewidth-member" class="member">
|
||||
<div id="strokewidth-link" class="member-link">
|
||||
<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
<div id="strokewidth-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The width of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>1</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting an item's stroke width:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// 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-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokecap-member" class="member">
|
||||
<div id="strokecap-link" class="member-link">
|
||||
<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecap-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
||||
have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'butt'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('round', 'square', 'butt')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke caps:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
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-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokejoin-member" class="member">
|
||||
<div id="strokejoin-link" class="member-link">
|
||||
<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
<div id="strokejoin-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the corners of paths when they have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'miter'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt> ('miter', 'round', 'bevel')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke joins:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
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-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dashoffset-member" class="member">
|
||||
<div id="dashoffset-link" class="member-link">
|
||||
<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
<div id="dashoffset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The dash offset of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>0</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dasharray-member" class="member">
|
||||
<div id="dasharray-link" class="member-link">
|
||||
<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
<div id="dasharray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>[]</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Array</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
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-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="miterlimit-member" class="member">
|
||||
<div id="miterlimit-link" class="member-link">
|
||||
<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
<div id="miterlimit-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The miter limit of the stroke.</p>
|
||||
<p>When two line segments meet at a sharp angle and miter joins have been
|
||||
specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
|
||||
far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
|
||||
limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>10</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fill Style</h3>
|
||||
|
||||
<div id="fillcolor-member" class="member">
|
||||
<div id="fillcolor-link" class="member-link">
|
||||
<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
<div id="fillcolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fill color.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the fill color of a path to red:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set the fill color of the circle to RGB red:
|
||||
circle.fillColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
3493
dist/docs/classes/PlacedItem.html
vendored
3493
dist/docs/classes/PlacedItem.html
vendored
File diff suppressed because it is too large
Load diff
3620
dist/docs/classes/PlacedSymbol.html
vendored
3620
dist/docs/classes/PlacedSymbol.html
vendored
File diff suppressed because it is too large
Load diff
2196
dist/docs/classes/Point.html
vendored
2196
dist/docs/classes/Point.html
vendored
File diff suppressed because it is too large
Load diff
3688
dist/docs/classes/PointText.html
vendored
3688
dist/docs/classes/PointText.html
vendored
File diff suppressed because it is too large
Load diff
567
dist/docs/classes/Project.html
vendored
567
dist/docs/classes/Project.html
vendored
|
|
@ -1,567 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Project</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Project</h1>
|
||||
|
||||
<p>A Project object in Paper.js is what usually is referred to as the
|
||||
document: The top level object that holds all the items contained in the
|
||||
scene graph. As the term document is already taken in the browser context,
|
||||
it is called Project.</p>
|
||||
<p>Projects allow the manipluation of the styles that are applied to all newly
|
||||
created items, give access to the selected items, and will in future versions
|
||||
offer ways to query for items in the scene graph defining specific
|
||||
requirements, and means to persist and load from different formats, such as
|
||||
SVG and PDF.</p>
|
||||
<p>The currently active project can be accessed through the
|
||||
<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
|
||||
<p>An array of all open projects is accessible through the
|
||||
<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Paper.js project.</p>
|
||||
<p>When working with PaperScript, a project is automatically created for us
|
||||
and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="currentstyle-member" class="member">
|
||||
<div id="currentstyle-link" class="member-link">
|
||||
<a name="currentstyle" href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
|
||||
</div>
|
||||
<div id="currentstyle-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('currentstyle', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active path style. All selected items and newly
|
||||
created items will be styled with this style.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
project.currentStyle = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5
|
||||
}
|
||||
|
||||
// The following paths will take over all style properties of
|
||||
// the current style:
|
||||
var path = new Path.Circle(new Point(75, 50), 30);
|
||||
var path2 = new Path.Circle(new Point(175, 50), 20);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
project.currentStyle.fillColor = 'red';
|
||||
|
||||
// The following path will take over the fill color we just set:
|
||||
var path = new Path.Circle(new Point(75, 50), 30);
|
||||
var path2 = new Path.Circle(new Point(175, 50), 20);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selecteditems-member" class="member">
|
||||
<div id="selecteditems-link" class="member-link">
|
||||
<a name="selecteditems" href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
|
||||
</div>
|
||||
<div id="selecteditems-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selecteditems', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The selected items contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Project Hierarchy</h3>
|
||||
|
||||
<div id="layers-member" class="member">
|
||||
<div id="layers-link" class="member-link">
|
||||
<a name="layers" href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
|
||||
</div>
|
||||
<div id="layers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The layers contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="activelayer-member" class="member">
|
||||
<div id="activelayer-link" class="member-link">
|
||||
<a name="activelayer" href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
|
||||
</div>
|
||||
<div id="activelayer-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activelayer', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The layer which is currently active. New items will be created on this
|
||||
layer by default.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Layer.html"><tt>Layer</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="symbols-member" class="member">
|
||||
<div id="symbols-link" class="member-link">
|
||||
<a name="symbols" href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
|
||||
</div>
|
||||
<div id="symbols-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbols', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The symbols contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="views-member" class="member">
|
||||
<div id="views-link" class="member-link">
|
||||
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
<div id="views-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The views contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="activeview-member" class="member">
|
||||
<div id="activeview-link" class="member-link">
|
||||
<a name="activeview" href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
|
||||
</div>
|
||||
<div id="activeview-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activeview', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The view which is currently active.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate-member" class="member">
|
||||
<div id="activate-link" class="member-link">
|
||||
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div id="activate-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Activates this project, so all newly created items will be placed
|
||||
in it.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selectall-member" class="member">
|
||||
<div id="selectall-link" class="member-link">
|
||||
<a name="selectall" href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
|
||||
</div>
|
||||
<div id="selectall-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selectall', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Selects all items in the project.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="deselectall-member" class="member">
|
||||
<div id="deselectall-link" class="member-link">
|
||||
<a name="deselectall" href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
|
||||
</div>
|
||||
<div id="deselectall-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('deselectall', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Deselects all selected items in the project.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hittest-point-member" class="member">
|
||||
<div id="hittest-point-link" class="member-link">
|
||||
<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
|
||||
</div>
|
||||
<div id="hittest-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Perform a hit test on the items contained within the project at the
|
||||
location of the specified point.</p>
|
||||
<p>The optional options object allows you to control the specifics of the
|
||||
hit test and may contain a combination of the following values:</p>
|
||||
<p><b>options.tolerance:</b> <tt>Number</tt> - The tolerance of the hit test
|
||||
in points.</p>
|
||||
<p><b>options.type:</b> Only hit test again a certain item
|
||||
type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
|
||||
<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
|
||||
<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
|
||||
items, taking into account stroke width.</p>
|
||||
<p><b>options.segments:</b> <tt>Boolean</tt> - Hit test for
|
||||
<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
|
||||
<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
|
||||
(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
|
||||
<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
|
||||
last segment points of open path items.</p>
|
||||
<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
|
||||
side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
|
||||
<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
|
||||
<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
|
||||
(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
|
||||
<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
|
||||
<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
|
||||
<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— The point where the hit test should be performed
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
|
||||
— optional, default: <tt>{ fill: true, stroke: true, segments: true,
|
||||
tolerance: true }</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt> — A hit result object that contains more
|
||||
information about what exactly was hit or <tt>null</tt> if nothing was
|
||||
hit.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
4204
dist/docs/classes/Raster.html
vendored
4204
dist/docs/classes/Raster.html
vendored
File diff suppressed because it is too large
Load diff
1380
dist/docs/classes/Rectangle.html
vendored
1380
dist/docs/classes/Rectangle.html
vendored
File diff suppressed because it is too large
Load diff
765
dist/docs/classes/RgbColor.html
vendored
765
dist/docs/classes/RgbColor.html
vendored
|
|
@ -1,765 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RgbColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>RgbColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>An RgbColor object is used to represent any RGB color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="rgbcolor-red-green-blue-member" class="member">
|
||||
<div id="rgbcolor-red-green-blue-link" class="member-link">
|
||||
<a name="rgbcolor-red-green-blue" href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="rgbcolor-red-green-blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rgbcolor-red-green-blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an RgbColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>red:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of red in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>green:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of green in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>blue:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of blue in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an RgbColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// 100% red, 0% blue, 50% blue:
|
||||
circle.fillColor = new RgbColor(1, 0, 0.5);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSB Components</h3>
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
544
dist/docs/classes/Segment.html
vendored
544
dist/docs/classes/Segment.html
vendored
|
|
@ -1,544 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Segment</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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-arg3-arg4-arg5-member" class="member">
|
||||
<div id="segment-arg3-arg4-arg5-link" class="member-link">
|
||||
<a name="segment-arg3-arg4-arg5" href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
|
||||
</div>
|
||||
<div id="segment-arg3-arg4-arg5-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment-arg3-arg4-arg5', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a new Segment object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<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>
|
||||
|
||||
<li>
|
||||
<tt>arg3:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg4:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg5:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The anchor point of the segment.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handlein-member" class="member">
|
||||
<div id="handlein-link" class="member-link">
|
||||
<a name="handlein" href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
|
||||
</div>
|
||||
<div id="handlein-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlein', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handleout-member" class="member">
|
||||
<div id="handleout-link" class="member-link">
|
||||
<a name="handleout" href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
|
||||
</div>
|
||||
<div id="handleout-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handleout', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selected-member" class="member">
|
||||
<div id="selected-link" class="member-link">
|
||||
<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
<div id="selected-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the <a href="../classes/Segment.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a> of the segment is selected.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Hierarchy</h3>
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-member" class="member">
|
||||
<div id="path-link" class="member-link">
|
||||
<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div id="path-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path that the segment belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Path.html"><tt>Path</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curve-member" class="member">
|
||||
<div id="curve-link" class="member-link">
|
||||
<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
<div id="curve-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve that the segment belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Sibling Segments</h3>
|
||||
|
||||
<div id="next-member" class="member">
|
||||
<div id="next-link" class="member-link">
|
||||
<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
<div id="next-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="previous-member" class="member">
|
||||
<div id="previous-link" class="member-link">
|
||||
<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
<div id="previous-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<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="reverse-member" class="member">
|
||||
<div id="reverse-link" class="member-link">
|
||||
<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
<div id="reverse-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the reversed the segment, without modifying the segment itself.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the reversed segment
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes the segment from the path that it belongs to.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the segment.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
1247
dist/docs/classes/Size.html
vendored
1247
dist/docs/classes/Size.html
vendored
File diff suppressed because it is too large
Load diff
271
dist/docs/classes/Symbol.html
vendored
271
dist/docs/classes/Symbol.html
vendored
|
|
@ -1,271 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Symbol</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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-member" class="member">
|
||||
<div id="symbol-item-link" class="member-link">
|
||||
<a name="symbol-item" href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
|
||||
</div>
|
||||
<div id="symbol-item-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbol-item', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Symbol item.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Placing 100 instances of a symbol:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The project that this symbol belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="definition-member" class="member">
|
||||
<div id="definition-link" class="member-link">
|
||||
<a name="definition" href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
|
||||
</div>
|
||||
<div id="definition-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('definition', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The symbol definition.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<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-member" class="member">
|
||||
<div id="place-link" class="member-link">
|
||||
<a name="place" href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
|
||||
</div>
|
||||
<div id="place-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('place', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Places in instance of the symbol in the project.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>position:</tt>
|
||||
|
||||
— The position of the placed symbol.
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns a copy of the symbol.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
3600
dist/docs/classes/TextItem.html
vendored
3600
dist/docs/classes/TextItem.html
vendored
File diff suppressed because it is too large
Load diff
584
dist/docs/classes/Tool.html
vendored
584
dist/docs/classes/Tool.html
vendored
|
|
@ -1,584 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tool</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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
|
||||
<tt>tool</tt> variable. All its properties are also available in the paper
|
||||
scope.</p>
|
||||
<p>The global <tt>tool</tt> variable only exists in scripts that contain mouse
|
||||
handler functions (<a href="../classes/Tool.html#onmousemove" onclick="return toggleMember('onmousemove', true);"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a>,
|
||||
<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup" onclick="return toggleMember('onmouseup', true);"><tt>onMouseUp</tt></a>) or a keyboard handler
|
||||
function (<a href="../classes/Tool.html#onkeydown" onclick="return toggleMember('onkeydown', true);"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup" onclick="return toggleMember('onkeyup', true);"><tt>onKeyUp</tt></a>).</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var path;
|
||||
|
||||
// Only execute onMouseDrag when the mouse
|
||||
// has moved at least 10 points:
|
||||
tool.distanceThreshold = 10;
|
||||
|
||||
function onMouseDown(event) {
|
||||
// Create a new path every time the mouse is clicked
|
||||
path = new Path();
|
||||
path.add(event.point);
|
||||
path.strokeColor = 'black';
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
// Add a point to the path every time the mouse is dragged
|
||||
path.add(event.point);
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="eventinterval-member" class="member">
|
||||
<div id="eventinterval-link" class="member-link">
|
||||
<a name="eventinterval" href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
|
||||
</div>
|
||||
<div id="eventinterval-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('eventinterval', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fixed time delay in milliseconds between each call to the
|
||||
<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event. Setting this to an interval means the
|
||||
<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event is called repeatedly after the initial
|
||||
<a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a> until the user releases the mouse.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="mindistance-member" class="member">
|
||||
<div id="mindistance-link" class="member-link">
|
||||
<a name="mindistance" href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
|
||||
</div>
|
||||
<div id="mindistance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('mindistance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="maxdistance-member" class="member">
|
||||
<div id="maxdistance-link" class="member-link">
|
||||
<a name="maxdistance" href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
|
||||
</div>
|
||||
<div id="maxdistance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('maxdistance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fixeddistance-member" class="member">
|
||||
<div id="fixeddistance-link" class="member-link">
|
||||
<a name="fixeddistance" href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
|
||||
</div>
|
||||
<div id="fixeddistance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fixeddistance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Mouse Event Handlers</h3>
|
||||
|
||||
<div id="onmousedown-member" class="member">
|
||||
<div id="onmousedown-link" class="member-link">
|
||||
<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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 mouse event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating circle shaped paths where the user presses the mouse button:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
function onMouseDown(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(event.point, 10);
|
||||
path.fillColor = 'black';
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousedrag-member" class="member">
|
||||
<div id="onmousedrag-link" class="member-link">
|
||||
<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedrag-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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 mouse event.</p>
|
||||
<p>This function can also be called periodically while the mouse doesn't
|
||||
move by setting the <a href="../classes/Tool.html#eventinterval" onclick="return toggleMember('eventinterval', true);"><tt>eventInterval</tt></a></p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Draw a line by adding a segment to a path on every mouse drag event:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create an empty path:
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
|
||||
function onMouseDrag(event) {
|
||||
// Add a segment to the path at the position of the mouse:
|
||||
path.add(event.point);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousemove-member" class="member">
|
||||
<div id="onmousemove-link" class="member-link">
|
||||
<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousemove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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 mouse event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Moving a path to the position of the mouse:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</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([0, 0], 10);
|
||||
path.fillColor = 'black';
|
||||
|
||||
function onMouseMove(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-member" class="member">
|
||||
<div id="onmouseup-link" class="member-link">
|
||||
<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onmouseup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
mouse event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating circle shaped paths where the user releases the mouse:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
function onMouseUp(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(event.point, 10);
|
||||
path.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-member" class="member">
|
||||
<div id="onkeydown-link" class="member-link">
|
||||
<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeydown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the user presses a key on the keyboard.</p>
|
||||
<p>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 <tt>false</tt>, 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><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Scaling a path whenever the user presses the space bar:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
// Create a circle shaped path:
|
||||
var path = new Path.Circle(new Point(50, 50), 30);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onKeyDown(event) {
|
||||
if(event.key == 'space') {
|
||||
// Scale the path by 110%:
|
||||
path.scale(1.1);
|
||||
|
||||
// Prevent the key event from bubbling
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onkeyup-member" class="member">
|
||||
<div id="onkeyup-link" class="member-link">
|
||||
<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeyup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the user releases a key on the keyboard.</p>
|
||||
<p>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 <tt>false</tt>, 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><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">function onKeyUp(event) {
|
||||
if(event.key == 'space') {
|
||||
console.log('The spacebar was released!');
|
||||
}
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate-member" class="member">
|
||||
<div id="activate-link" class="member-link">
|
||||
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div id="activate-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<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 recieves mouse events.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
406
dist/docs/classes/ToolEvent.html
vendored
406
dist/docs/classes/ToolEvent.html
vendored
|
|
@ -1,406 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ToolEvent</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of tool event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('mousedown', 'mouseup', 'mousemove', 'mousedrag')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the event was
|
||||
fired.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="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);
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="lastpoint-member" class="member">
|
||||
<div id="lastpoint-link" class="member-link">
|
||||
<a name="lastpoint" href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
|
||||
</div>
|
||||
<div id="lastpoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastpoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the previous
|
||||
event was fired.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="downpoint-member" class="member">
|
||||
<div id="downpoint-link" class="member-link">
|
||||
<a name="downpoint" href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
|
||||
</div>
|
||||
<div id="downpoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('downpoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the mouse button
|
||||
was last clicked.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="middlepoint-member" class="member">
|
||||
<div id="middlepoint-link" class="member-link">
|
||||
<a name="middlepoint" href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
|
||||
</div>
|
||||
<div id="middlepoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('middlepoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The point in the middle between <a href="../classes/ToolEvent.html#lastpoint" onclick="return toggleMember('lastpoint', true);"><tt>lastPoint</tt></a> and
|
||||
<a href="../classes/ToolEvent.html#point" onclick="return toggleMember('point', true);"><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" onclick="return toggleMember('delta', true);"><tt>delta</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="delta-member" class="member">
|
||||
<div id="delta-link" class="member-link">
|
||||
<a name="delta" href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
|
||||
</div>
|
||||
<div id="delta-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('delta', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="count-member" class="member">
|
||||
<div id="count-link" class="member-link">
|
||||
<a name="count" href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
|
||||
</div>
|
||||
<div id="count-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('count', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The number of times the mouse event was fired.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item-member" class="member">
|
||||
<div id="item-link" class="member-link">
|
||||
<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div id="item-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<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><b>Type:</b>
|
||||
<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-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<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="modifiers-member" class="member">
|
||||
<div id="modifiers-link" class="member-link">
|
||||
<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div id="modifiers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
538
dist/docs/classes/View.html
vendored
538
dist/docs/classes/View.html
vendored
|
|
@ -1,538 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>View</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>View</h1>
|
||||
|
||||
<p>The View object wraps a canvas element and handles drawing and user
|
||||
interaction through mouse and keyboard for it. It offer means to scroll the
|
||||
view, find the currently visible bounds in project coordinates, or the
|
||||
center, both useful for constructing artwork that should appear centered on
|
||||
screen.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="view-canvas-member" class="member">
|
||||
<div id="view-canvas-link" class="member-link">
|
||||
<a name="view-canvas" href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
|
||||
</div>
|
||||
<div id="view-canvas-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view-canvas', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a view object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>canvas:</tt>
|
||||
<tt>HTMLCanvasElement</tt> / <tt>String</tt>
|
||||
— The canvas object that this
|
||||
view should wrap, or the String id that represents it
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="canvas-member" class="member">
|
||||
<div id="canvas-link" class="member-link">
|
||||
<a name="canvas" href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
|
||||
</div>
|
||||
<div id="canvas-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('canvas', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The underlying native canvas element.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>HTMLCanvasElement</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="viewsize-member" class="member">
|
||||
<div id="viewsize-link" class="member-link">
|
||||
<a name="viewsize" href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
|
||||
</div>
|
||||
<div id="viewsize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewsize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The size of the view canvas. Changing the view's size will resize it's
|
||||
underlying canvas.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="bounds-member" class="member">
|
||||
<div id="bounds-link" class="member-link">
|
||||
<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
||||
</div>
|
||||
<div id="bounds-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The bounds of the currently visible area in project coordinates.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="size-member" class="member">
|
||||
<div id="size-link" class="member-link">
|
||||
<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
|
||||
</div>
|
||||
<div id="size-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The size of the visible area in project coordinates.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="center-member" class="member">
|
||||
<div id="center-link" class="member-link">
|
||||
<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
|
||||
</div>
|
||||
<div id="center-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The center of the visible area in project coordinates.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="zoom-member" class="member">
|
||||
<div id="zoom-link" class="member-link">
|
||||
<a name="zoom" href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
|
||||
</div>
|
||||
<div id="zoom-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('zoom', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The zoom factor by which the project coordinates are magnified.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Event Handlers</h3>
|
||||
|
||||
<div id="onframe-member" class="member">
|
||||
<div id="onframe-link" class="member-link">
|
||||
<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
<div id="onframe-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Handler function to be called on each frame of an animation.</p>
|
||||
<p>The function receives an event object which contains information about
|
||||
the frame event:</p>
|
||||
<p><b><tt>event.count</tt></b>: the number of times the frame event was fired.</p>
|
||||
<p><b><tt>event.time</tt></b>: the total amount of time passed since the first frame
|
||||
event in seconds.</p>
|
||||
<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last frame
|
||||
event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an animation:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a rectangle shaped path with its top left point at:
|
||||
// {x: 50, y: 25} and a size of {width: 50, height: 50}
|
||||
var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
||||
path.fillColor = 'black';
|
||||
|
||||
function onFrame(event) {
|
||||
// Every frame, rotate the path by 3 degrees:
|
||||
path.rotate(3);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onresize-member" class="member">
|
||||
<div id="onresize-link" class="member-link">
|
||||
<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
<div id="onresize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Handler function that is called whenever a view is resized.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Repositioning items when a view is resized:
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">// Create a circle shaped path in the center of the view:
|
||||
var path = new Path.Circle(view.bounds.center, 30);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onResize(event) {
|
||||
// Whenever the view is resized, move the path to its center:
|
||||
path.position = view.center;
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate-member" class="member">
|
||||
<div id="activate-link" class="member-link">
|
||||
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div id="activate-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Makes this view the active one, meaning <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> will
|
||||
point to it.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes thsi view from the <a href="../classes/PaperScope.html#views"><tt>paperScope.views</tt></a> list and frees the
|
||||
associated canvas.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="isvisible-member" class="member">
|
||||
<div id="isvisible-link" class="member-link">
|
||||
<a name="isvisible" href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
|
||||
</div>
|
||||
<div id="isvisible-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isvisible', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks whether the view is currently visible within the current browser
|
||||
viewport.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — Whether the view is visible.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="scrollby-point-member" class="member">
|
||||
<div id="scrollby-point-link" class="member-link">
|
||||
<a name="scrollby-point" href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="scrollby-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scrollby-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Scrolls the view by the given vector.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="draw-member" class="member">
|
||||
<div id="draw-link" class="member-link">
|
||||
<a name="draw" href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
|
||||
</div>
|
||||
<div id="draw-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('draw', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Draws the view.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
529
dist/docs/classes/global.html
vendored
529
dist/docs/classes/global.html
vendored
|
|
@ -1,529 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>_global_</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Global Scope</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="paper-member" class="member">
|
||||
<div id="paper-link" class="member-link">
|
||||
<a name="paper" href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
|
||||
</div>
|
||||
<div id="paper-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paper', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Global PaperScope Properties (for PaperScript)</h3>
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects-member" class="member">
|
||||
<div id="projects-link" class="member-link">
|
||||
<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
<div id="projects-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of all open projects within the current Paper.js context.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="view-member" class="member">
|
||||
<div id="view-link" class="member-link">
|
||||
<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div id="view-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The active view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="views-member" class="member">
|
||||
<div id="views-link" class="member-link">
|
||||
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
<div id="views-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tool-member" class="member">
|
||||
<div id="tool-link" class="member-link">
|
||||
<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
<div id="tool-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the active tool.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools-member" class="member">
|
||||
<div id="tools-link" class="member-link">
|
||||
<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
<div id="tools-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of available tools.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>View Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onframe-member" class="member">
|
||||
<div id="onframe-link" class="member-link">
|
||||
<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
<div id="onframe-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onresize-member" class="member">
|
||||
<div id="onresize-link" class="member-link">
|
||||
<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
<div id="onresize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/View.html#onresize"><tt>view.onResize</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Mouse Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onmousedown-member" class="member">
|
||||
<div id="onmousedown-link" class="member-link">
|
||||
<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousedrag-member" class="member">
|
||||
<div id="onmousedrag-link" class="member-link">
|
||||
<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedrag-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousemove-member" class="member">
|
||||
<div id="onmousemove-link" class="member-link">
|
||||
<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousemove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmouseup-member" class="member">
|
||||
<div id="onmouseup-link" class="member-link">
|
||||
<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onmouseup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Keyboard Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onkeydown-member" class="member">
|
||||
<div id="onkeydown-link" class="member-link">
|
||||
<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeydown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onkeyup-member" class="member">
|
||||
<div id="onkeyup-link" class="member-link">
|
||||
<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeyup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <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>
|
||||
|
||||
</body>
|
||||
96
dist/docs/classes/index.html
vendored
96
dist/docs/classes/index.html
vendored
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paper.js</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-packages">
|
||||
<h1>Paper.js</h1>
|
||||
<ul class="package-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>Items</h2>
|
||||
<ul>
|
||||
<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/PlacedItem.html">PlacedItem</a></li>
|
||||
<li><a href="../classes/Raster.html">Raster</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><a href="../classes/PathStyle.html">PathStyle</a></li>
|
||||
<li><hr /></li>
|
||||
<li><a href="../classes/CurveLocation.html">CurveLocation</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Projects</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Project.html">Project</a></li>
|
||||
<li><a href="../classes/Symbol.html">Symbol</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Colors</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Color.html">Color</a></li>
|
||||
<li><a href="../classes/RgbColor.html">RgbColor</a></li>
|
||||
<li><a href="../classes/GrayColor.html">GrayColor</a></li>
|
||||
<li><a href="../classes/HsbColor.html">HsbColor</a></li>
|
||||
<li><a href="../classes/HslColor.html">HslColor</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Gradients</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/GradientColor.html">GradientColor</a></li>
|
||||
<li><a href="../classes/Gradient.html">Gradient</a></li>
|
||||
<li><a href="../classes/GradientStop.html">GradientStop</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Interface</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/View.html">View</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>Typography</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/TextItem.html">TextItem</a></li>
|
||||
<li><a href="../classes/PointText.html">PointText</a></li>
|
||||
<li><h3>Style</h3></li>
|
||||
<li><a href="../classes/CharacterStyle.html">CharacterStyle</a></li>
|
||||
<li><a href="../classes/ParagraphStyle.html">ParagraphStyle</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>
|
||||
13
dist/docs/index.html
vendored
13
dist/docs/index.html
vendored
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
Paper.js API
|
||||
</title>
|
||||
</head>
|
||||
<frameset cols="230,*">
|
||||
<frame src="classes/index.html" name="packageListFrame" title="All Packages">
|
||||
<frame src="about:blank" name="classFrame" title="Class and interface descriptions">
|
||||
</frameset>
|
||||
</html>
|
||||
BIN
dist/docs/resources/css/assets/bullet.gif
vendored
BIN
dist/docs/resources/css/assets/bullet.gif
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 44 B |
141
dist/docs/resources/css/codemirror.css
vendored
141
dist/docs/resources/css/codemirror.css
vendored
|
|
@ -1,141 +0,0 @@
|
|||
.CodeMirror,
|
||||
.CodeMirror textarea,
|
||||
.CodeMirror pre {
|
||||
font-family: Menlo, Consolas, "Vera Mono", monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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; /* 2px required for CodeMirror-selected */
|
||||
}
|
||||
|
||||
.CodeMirror-gutter-text pre {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
background: #ffffff;
|
||||
padding: 2px 0 2px 8px; /* 2px required for CodeMirror-selected */
|
||||
}
|
||||
|
||||
.CodeMirror-lines pre.highlight {
|
||||
background-color: #edf5fc;
|
||||
}
|
||||
|
||||
/*
|
||||
.CodeMirror-lines pre:hover {
|
||||
background-color: #edf5fc;
|
||||
}
|
||||
|
||||
.CodeMirror-lines pre.highlight:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
*/
|
||||
|
||||
.CodeMirror pre {
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
border-left: 1px solid #7c7c7c !important;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.CodeMirror-focused .CodeMirror-cursor {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
span.CodeMirror-selected {
|
||||
background: #ccc !important;
|
||||
color: HighlightText !important;
|
||||
padding: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
.CodeMirror-focused span.CodeMirror-selected {
|
||||
background: Highlight !important;
|
||||
}
|
||||
|
||||
.CodeMirror-matchingbracket {
|
||||
background: #e3fc8d !important;
|
||||
}
|
||||
|
||||
.CodeMirror-nonmatchingbracket {
|
||||
color: #d62a28 !important;
|
||||
}
|
||||
|
||||
/* JavaScript */
|
||||
|
||||
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;
|
||||
}
|
||||
64
dist/docs/resources/css/paperscript.css
vendored
64
dist/docs/resources/css/paperscript.css
vendored
|
|
@ -1,64 +0,0 @@
|
|||
.paperscript .button,
|
||||
.paperscript .explain {
|
||||
display: none;
|
||||
position: relative; /* position (top / right) relative to paperscriptcontainer */
|
||||
float: right; /* align right as block */
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
padding: 2px 6px;
|
||||
margin-bottom: -20px; /* move canvas up by 16px (height) + 2 * 2px (padding) */
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
z-index: 1;
|
||||
top: 8px; /* margin to top */
|
||||
}
|
||||
|
||||
.paperscript .button {
|
||||
right: 8px; /* margin to right */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.paperscript .explain {
|
||||
display: block;
|
||||
right: 64px; /* margin to right */
|
||||
background: #e3f4fc;
|
||||
margin-bottom: -36px; /* (height) + 2 * 2px (padding) */
|
||||
}
|
||||
|
||||
.paperscript:hover .button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paperscript .button:hover {
|
||||
background: #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paperscript .source {
|
||||
overflow: auto;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.paperscript .CodeMirror {
|
||||
margin: 0 !important; /* Override any potential margins again */
|
||||
}
|
||||
|
||||
.paperscript .CodeMirror-gutter-text,
|
||||
.paperscript .CodeMirror-lines {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.paperscript .canvas {
|
||||
line-height: 0; /* prevent weird 5px padding under canvas elements */
|
||||
}
|
||||
|
||||
.paperscript .canvas.border canvas {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.paperscript.split .canvas {
|
||||
border: 1px solid #999;
|
||||
border-top: 0;
|
||||
}
|
||||
128
dist/docs/resources/css/reference.css
vendored
128
dist/docs/resources/css/reference.css
vendored
|
|
@ -1,128 +0,0 @@
|
|||
/* These styles are shared with the server version of docs */
|
||||
|
||||
.reference h1, .reference h2, .reference h3 {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
height: 18px; /* -2px so border-bottom aligns with contained links */
|
||||
border-bottom: 1px solid;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.reference h3 {
|
||||
margin-top: 16px;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
|
||||
.reference a tt {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.reference p {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.reference ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.reference-list ul, .reference-inherited ul {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.reference hr {
|
||||
border: none;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
.reference-packages {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.reference-packages h2, .reference-packages h3, .reference-packages hr {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.reference-packages .first h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
* html .reference-packages img {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.reference-packages li {
|
||||
list-style: none;
|
||||
list-style-image: none; /* needed for ie 6 */
|
||||
}
|
||||
|
||||
.reference-members {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.member-group-text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.member-description {
|
||||
border: 1px solid #999;
|
||||
/* .member-header defines border-top for operator lists */
|
||||
border-top: 0;
|
||||
margin: 16px 0 16px 0;
|
||||
}
|
||||
|
||||
.member-header {
|
||||
border-top: 1px solid #999;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.member-title {
|
||||
float: left;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.member-close {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.member-text {
|
||||
border-top: 1px dashed #999;
|
||||
padding: 10px 10px 0 10px;
|
||||
margin-bottom: -6px; /* Compensate margins of p and ul to end up with 10px */
|
||||
}
|
||||
|
||||
.reference ul,
|
||||
.reference .paperscript,
|
||||
.reference .CodeMirror {
|
||||
margin-top: -8px; /* Move half way up close to previous paragraph */
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.reference ul {
|
||||
margin-top: 0; /* Clear the above -10px for ul again */
|
||||
}
|
||||
|
||||
.member-link {
|
||||
text-indent: -30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.reference-inherited ul li {
|
||||
text-indent: -30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.package-classes {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.package-classes ul {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.reference h2 a {
|
||||
font-weight: bold;
|
||||
}
|
||||
86
dist/docs/resources/css/style.css
vendored
86
dist/docs/resources/css/style.css
vendored
|
|
@ -1,86 +0,0 @@
|
|||
body, select, input, textarea {
|
||||
font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
select, input, textarea {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
tt, pre {
|
||||
font-family: Menlo, Consolas, "Vera Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0 0 20px 16px;
|
||||
list-style: disc outside url(assets/bullet.gif);
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reference-packages, .reference-packages a {
|
||||
color: #009dec;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
/* Border-bottom color for headers and ruler */
|
||||
.reference-packages h2, .reference-packages h3, .reference-packages hr {
|
||||
border-color: #009dec;
|
||||
}
|
||||
|
||||
.reference-packages a:hover {
|
||||
background: #e3f4fc;
|
||||
}
|
||||
|
||||
.reference h1 {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 24px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
4040
dist/docs/resources/js/bootstrap.js
vendored
4040
dist/docs/resources/js/bootstrap.js
vendored
File diff suppressed because it is too large
Load diff
1
dist/docs/resources/js/codemirror.js
vendored
1
dist/docs/resources/js/codemirror.js
vendored
File diff suppressed because one or more lines are too long
0
dist/docs/resources/js/paper.js
vendored
0
dist/docs/resources/js/paper.js
vendored
258
dist/docs/resources/js/reference.js
vendored
258
dist/docs/resources/js/reference.js
vendored
|
|
@ -1,258 +0,0 @@
|
|||
ContentEnd = HtmlElement.extend({
|
||||
_class: 'content-end',
|
||||
|
||||
initialize: function() {
|
||||
var anchor = $$('a[name]').getLast(),
|
||||
that = this;
|
||||
if (anchor) {
|
||||
function resize() {
|
||||
var bottom = $window.getScrollSize().height
|
||||
- anchor.getOffset().y - $window.getSize().height;
|
||||
that.setHeight(that.getHeight() - bottom);
|
||||
}
|
||||
$window.addEvents({
|
||||
load: resize,
|
||||
resize: resize
|
||||
});
|
||||
// Not sure why these are required twice, in addition to load()..
|
||||
resize();
|
||||
resize();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function createCodeMirror(place, options, source) {
|
||||
return new CodeMirror(place, Hash.create({}, {
|
||||
lineNumbers: true,
|
||||
matchBrackets: true,
|
||||
indentUnit: 4,
|
||||
tabMode: 'shift',
|
||||
value: source.getText().replace(/\t/gi, ' ').match(
|
||||
// Remove first & last empty line
|
||||
/^\s*?[\n\r]?([\u0000-\uffff]*?)[\n\r]?\s*?$/)[1]
|
||||
}, options));
|
||||
}
|
||||
|
||||
Code = HtmlElement.extend({
|
||||
_class: 'code',
|
||||
|
||||
initialize: function() {
|
||||
// Only format this element if it is visible, otherwise wait until
|
||||
// it is made visible and then call initialize() manually.
|
||||
if (this.initialized || this.getBounds().height == 0)
|
||||
return;
|
||||
var that = this;
|
||||
var start = this.getProperty('start');
|
||||
var highlight = this.getProperty('highlight');
|
||||
var editor = createCodeMirror(function(el) {
|
||||
that.replaceWith(el);
|
||||
}, {
|
||||
lineNumbers: !this.hasParent('.resource-text'),
|
||||
firstLineNumber: (start || 1).toInt(),
|
||||
readOnly: true
|
||||
}, this);
|
||||
if (highlight) {
|
||||
var highlights = highlight.split(',');
|
||||
for (var i = 0, l = highlights.length; i < l; i++) {
|
||||
var highlight = highlights[i].split('-');
|
||||
var hlStart = highlight[0].toInt() - 1;
|
||||
var hlEnd = highlight.length == 2
|
||||
? highlight[1].toInt() - 1 : hlStart;
|
||||
if (start) {
|
||||
hlStart -= start - 1;
|
||||
hlEnd -= start - 1;
|
||||
}
|
||||
for (var j = hlStart; j <= hlEnd; j++) {
|
||||
editor.setLineClass(j, 'highlight');
|
||||
}
|
||||
}
|
||||
}
|
||||
this.initialized = true;
|
||||
}
|
||||
});
|
||||
|
||||
PaperScript = HtmlElement.extend({
|
||||
_class: 'paperscript',
|
||||
|
||||
initialize: function() {
|
||||
// Only format this element if it is visible, otherwise wait until
|
||||
// it is made visible and then call initialize() manually.
|
||||
if (this.initialized || this.getBounds().height == 0)
|
||||
return;
|
||||
var script = $('script', this),
|
||||
button = $('.button', this);
|
||||
if (!script || !button)
|
||||
return;
|
||||
var source = button.injectAfter('div', {
|
||||
className: 'source hidden'
|
||||
});
|
||||
var that = this,
|
||||
canvas = $('canvas', this),
|
||||
hasResize = canvas.getProperty('resize'),
|
||||
showSplit = this.hasClass('split'),
|
||||
sourceFirst = this.hasClass('source'),
|
||||
width, height,
|
||||
editor = null,
|
||||
hasBorders = true;
|
||||
|
||||
function showSource(show) {
|
||||
source.modifyClass('hidden', !show);
|
||||
button.setText(show ? 'Run' : 'Source');
|
||||
if (show && !editor) {
|
||||
editor = createCodeMirror(source.$, {
|
||||
/*
|
||||
onKeyEvent: function(editor, event) {
|
||||
event = new DomEvent(event);
|
||||
if (event.type == 'keydown') {
|
||||
var pos = editor.getCursor();
|
||||
pos.ch += 4;
|
||||
editor.setCursor(pos);
|
||||
event.stop();
|
||||
}
|
||||
},
|
||||
*/
|
||||
}, script);
|
||||
}
|
||||
}
|
||||
|
||||
function runScript() {
|
||||
var scope = paper.PaperScope.get(script.$);
|
||||
if (scope) {
|
||||
// Update script to edited version
|
||||
var code = editor.getValue();
|
||||
script.setText(code);
|
||||
// Keep a reference to the used canvas, since we're going to
|
||||
// fully clear the scope and initialize again with this canvas.
|
||||
var canvas = scope.view.canvas;
|
||||
// Clear scope first, then evaluate a new script.
|
||||
scope.clear();
|
||||
scope.initialize(canvas);
|
||||
scope.evaluate(code);
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
if (!canvas.hasClass('hidden')) {
|
||||
width = canvas.getWidth();
|
||||
height = canvas.getHeight();
|
||||
} else if (hasResize) {
|
||||
// Can't get correct dimensions from hidden canvas,
|
||||
// so calculate again.
|
||||
var size = $window.getScrollSize();
|
||||
var offset = source.getOffset();
|
||||
width = size.width - offset.x;
|
||||
height = size.height - offset.y;
|
||||
}
|
||||
// Resize the main element as well, so that the float:right button
|
||||
// is always positioned correctly.
|
||||
that.set({ width: width, height: height });
|
||||
source.set({
|
||||
width: width - (hasBorders ? 2 : 1),
|
||||
height: height - (hasBorders ? 2 : 0)
|
||||
});
|
||||
}
|
||||
|
||||
function toggleView() {
|
||||
var show = source.hasClass('hidden');
|
||||
resize();
|
||||
canvas.modifyClass('hidden', show);
|
||||
showSource(show);
|
||||
if (!show)
|
||||
runScript();
|
||||
// Remove padding
|
||||
button.setStyle('right',
|
||||
$('.CodeMirror', source).getScrollSize().height > height
|
||||
? 24 : 8);
|
||||
}
|
||||
|
||||
if (hasResize) {
|
||||
// Delay the installing of the resize event, so paper.js installs
|
||||
// its own before us.
|
||||
(function() {
|
||||
$window.addEvents({
|
||||
resize: resize
|
||||
});
|
||||
}).delay(1);
|
||||
hasBorders = false;
|
||||
source.setStyles({
|
||||
borderWidth: '0 0 0 1px'
|
||||
});
|
||||
}
|
||||
|
||||
if (showSplit) {
|
||||
showSource(true);
|
||||
} else if (sourceFirst) {
|
||||
toggleView();
|
||||
}
|
||||
|
||||
button.addEvents({
|
||||
click: function(event) {
|
||||
if (showSplit) {
|
||||
runScript();
|
||||
} else {
|
||||
toggleView();
|
||||
}
|
||||
event.stop();
|
||||
},
|
||||
|
||||
mousedown: function(event) {
|
||||
event.stop();
|
||||
}
|
||||
});
|
||||
this.initialized = true;
|
||||
}
|
||||
});
|
||||
|
||||
var lastMemberId = null;
|
||||
function toggleMember(id, scrollTo, dontScroll) {
|
||||
var link = $('#' + id + '-link');
|
||||
if (!link)
|
||||
return true;
|
||||
var desc = $('#' + id + '-description');
|
||||
var v = !link.hasClass('hidden');
|
||||
// Retrieve y-offset before any changes, so we can correct scrolling after
|
||||
var offset = (v ? link : desc).getOffset().y;
|
||||
if (lastMemberId && lastMemberId != id) {
|
||||
var prevId = lastMemberId;
|
||||
lastMemberId = null;
|
||||
toggleMember(prevId, false, true);
|
||||
}
|
||||
lastMemberId = v && id;
|
||||
link.modifyClass('hidden', v);
|
||||
desc.modifyClass('hidden', !v);
|
||||
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 = $window.getScrollOffset();
|
||||
$window.setScrollOffset(scroll.x, scroll.y
|
||||
+ (v ? desc : link).getOffset().y - offset + 11 * (v ? 1 : -1));
|
||||
}
|
||||
if (!desc.editor && v) {
|
||||
desc.editor = $$('pre.code, .paperscript', desc).each(function(code) {
|
||||
code.initialize();
|
||||
});
|
||||
}
|
||||
if (scrollTo)
|
||||
scrollToMember(id);
|
||||
return false;
|
||||
}
|
||||
|
||||
function scrollToElement(id) {
|
||||
var e = $('#' + id + '-member');
|
||||
if (e) {
|
||||
if (e.hasClass('member'))
|
||||
toggleMember(id);
|
||||
var offs = e.getOffset();
|
||||
$window.setScrollOffset(offs);
|
||||
} else {
|
||||
window.location.hash = id;
|
||||
}
|
||||
}
|
||||
|
||||
$document.addEvent('domready', function() {
|
||||
var h = unescape(window.location.hash);
|
||||
if (h) scrollToElement(h.substring(1));
|
||||
if (window.paper)
|
||||
paper.load();
|
||||
});
|
||||
3
dist/paper.js
vendored
3
dist/paper.js
vendored
|
|
@ -1,3 +0,0 @@
|
|||
// Paper.js loader for development, as produced by the build/load.sh script
|
||||
document.write('<script type="text/javascript" src="../../lib/prepro.js"></script>');
|
||||
document.write('<script type="text/javascript" src="../../src/load.js"></script>');
|
||||
411
lib/bootstrap.js
vendored
411
lib/bootstrap.js
vendored
|
|
@ -1,411 +0,0 @@
|
|||
/**
|
||||
* Bootstrap JavaScript Library
|
||||
* (c) 2006 - 2011 Juerg Lehni, http://lehni.org/
|
||||
*
|
||||
* Bootstrap is released under the MIT license
|
||||
* http://bootstrapjs.org/
|
||||
*
|
||||
* Inspirations:
|
||||
* http://dean.edwards.name/weblog/2006/03/base/
|
||||
* http://dev.helma.org/Wiki/JavaScript+Inheritance+Sugar/
|
||||
* http://prototypejs.org/
|
||||
*/
|
||||
|
||||
var Base = new function() { // Bootstrap scope
|
||||
// Fix __proto__ for browsers where it is not implemented (IE and Opera).
|
||||
var fix = !this.__proto__,
|
||||
hidden = /^(statics|generics|preserve|enumerable|prototype|__proto__|toString|valueOf)$/,
|
||||
proto = Object.prototype,
|
||||
/**
|
||||
* Private function that checks if an object contains a given property.
|
||||
* Naming it 'has' causes problems on Opera when defining
|
||||
* Object.prototype.has, as the local version then seems to be overriden
|
||||
* by that. Giving it a idfferent name fixes it.
|
||||
*/
|
||||
has = fix
|
||||
? function(name) {
|
||||
return name !== '__proto__' && this.hasOwnProperty(name);
|
||||
}
|
||||
: proto.hasOwnProperty,
|
||||
toString = proto.toString,
|
||||
proto = Array.prototype,
|
||||
isArray = Array.isArray = Array.isArray || function(obj) {
|
||||
return toString.call(obj) === '[object Array]';
|
||||
},
|
||||
slice = proto.slice,
|
||||
forEach = proto.forEach || function(iter, bind) {
|
||||
for (var i = 0, l = this.length; i < l; i++)
|
||||
iter.call(bind, this[i], i, this);
|
||||
},
|
||||
forIn = function(iter, bind) {
|
||||
// Do not use Object.keys for iteration as iterators might modify
|
||||
// the object we're iterating over, making the hasOwnProperty still
|
||||
// necessary.
|
||||
for (var i in this)
|
||||
if (this.hasOwnProperty(i))
|
||||
iter.call(bind, this[i], i, this);
|
||||
},
|
||||
_define = Object.defineProperty,
|
||||
_describe = Object.getOwnPropertyDescriptor;
|
||||
|
||||
// Support a mixed environment of some ECMAScript 5 features present,
|
||||
// along with __defineGetter/Setter__ functions, as found in browsers today.
|
||||
function define(obj, name, desc) {
|
||||
// Unfortunately Safari seems to ignore configurable: true and
|
||||
// does not override existing properties, so we need to delete
|
||||
// first:
|
||||
if (_define) {
|
||||
try {
|
||||
delete obj[name];
|
||||
return _define(obj, name, desc);
|
||||
} catch (e) {}
|
||||
}
|
||||
if ((desc.get || desc.set) && obj.__defineGetter__) {
|
||||
desc.get && obj.__defineGetter__(name, desc.get);
|
||||
desc.set && obj.__defineSetter__(name, desc.set);
|
||||
} else {
|
||||
obj[name] = desc.value;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
function describe(obj, name) {
|
||||
if (_describe) {
|
||||
try {
|
||||
return _describe(obj, name);
|
||||
} catch (e) {}
|
||||
}
|
||||
var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
|
||||
return get
|
||||
? { get: get, set: obj.__lookupSetter__(name), enumerable: true,
|
||||
configurable: true }
|
||||
: has.call(obj, name)
|
||||
? { value: obj[name], enumerable: true, configurable: true,
|
||||
writable: true }
|
||||
: null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Private function that injects functions from src into dest, overriding
|
||||
* (and inherinting from) base.
|
||||
*/
|
||||
function inject(dest, src, enumerable, base, preserve, generics) {
|
||||
var beans, bean;
|
||||
|
||||
/**
|
||||
* Private function that injects one field with given name and checks if
|
||||
* the field is a function that needs to be wrapped for calls of base().
|
||||
* This is only needed if the function in base is different from the one
|
||||
* in src, and if the one in src is actually calling base through base.
|
||||
* The string of the function is parsed for this.base to detect calls.
|
||||
*/
|
||||
function field(name, val, dontCheck, generics) {
|
||||
// This does even work for prop: 0, as it will just be looked up
|
||||
// again through describe.
|
||||
var val = val || (val = describe(src, name))
|
||||
&& (val.get ? val : val.value),
|
||||
func = typeof val === 'function',
|
||||
res = val,
|
||||
// Only lookup previous value if we preserve or define a
|
||||
// function that might need it for this.base(). If we're
|
||||
// defining a getter, don't lookup previous value, but look if
|
||||
// the property exists (name in dest) and store result in prev
|
||||
prev = preserve || func
|
||||
? (val && val.get ? name in dest : dest[name]) : null;
|
||||
// Make generics first, as we might jump out bellow in the
|
||||
// val !== (src.__proto__ || Object.prototype)[name] check,
|
||||
// e.g. when explicitely reinjecting Array.prototype methods
|
||||
// to produce generics of them.
|
||||
if (generics && func && (!preserve || !generics[name])) {
|
||||
generics[name] = function(bind) {
|
||||
// Do not call Array.slice generic here, as on Safari,
|
||||
// this seems to confuse scopes (calling another
|
||||
// generic from generic-producing code).
|
||||
return bind && dest[name].apply(bind,
|
||||
slice.call(arguments, 1));
|
||||
}
|
||||
}
|
||||
if ((dontCheck || val !== undefined && has.call(src, name))
|
||||
&& (!preserve || !prev)) {
|
||||
if (func) {
|
||||
if (prev && /\bthis\.base\b/.test(val)) {
|
||||
var fromBase = base && base[name] == prev;
|
||||
res = function() {
|
||||
// Look up the base function each time if we can,
|
||||
// to reflect changes to the base class after
|
||||
// inheritance.
|
||||
var tmp = describe(this, 'base');
|
||||
define(this, 'base', { value: fromBase
|
||||
? base[name] : prev, configurable: true });
|
||||
try {
|
||||
return val.apply(this, arguments);
|
||||
} finally {
|
||||
tmp ? define(this, 'base', tmp)
|
||||
: delete this.base;
|
||||
}
|
||||
};
|
||||
// Make wrapping closure pretend to be the original
|
||||
// function on inspection
|
||||
res.toString = function() {
|
||||
return val.toString();
|
||||
}
|
||||
res.valueOf = function() {
|
||||
return val.valueOf();
|
||||
}
|
||||
}
|
||||
// Produce bean properties if getters are specified. This
|
||||
// does not produce properties for setter-only properties.
|
||||
// Just collect beans for now, and look them up in dest at
|
||||
// the end of fields injection. This ensures this.base()
|
||||
// works in beans too, and inherits setters for redefined
|
||||
// getters in subclasses. Only add getter beans if they do
|
||||
// not expect arguments. Functions that should function both
|
||||
// with optional arguments and as beans should not declare
|
||||
// the parameters and use the arguments array internally
|
||||
// instead.
|
||||
if (beans && val.length == 0
|
||||
&& (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
|
||||
beans.push([ bean[3].toLowerCase() + bean[4], bean[2] ]);
|
||||
}
|
||||
// No need to look up getter if this is a function already.
|
||||
if (!res || func || !res.get)
|
||||
res = { value: res, writable: true };
|
||||
// Only set/change configurable and enumerable if this field is
|
||||
// configurable
|
||||
if ((describe(dest, name)
|
||||
|| { configurable: true }).configurable) {
|
||||
res.configurable = true;
|
||||
res.enumerable = enumerable;
|
||||
}
|
||||
define(dest, name, res);
|
||||
}
|
||||
}
|
||||
// Iterate through all definitions in src now and call field() for each.
|
||||
if (src) {
|
||||
beans = [];
|
||||
for (var name in src)
|
||||
if (has.call(src, name) && !hidden.test(name))
|
||||
field(name, null, true, generics);
|
||||
// IE (and some other browsers?) never enumerate these, even if
|
||||
// they are simply set on an object. Force their creation. Do not
|
||||
// create generics for these, and check them for not being defined
|
||||
// (by passing undefined for dontCheck).
|
||||
field('toString');
|
||||
field('valueOf');
|
||||
// Now finally define beans as well. Look up methods on dest, for
|
||||
// support of this.base() (See above).
|
||||
for (var i = 0, l = beans && beans.length; i < l; i++)
|
||||
try {
|
||||
var bean = beans[i], part = bean[1];
|
||||
field(bean[0], {
|
||||
get: dest['get' + part] || dest['is' + part],
|
||||
set: dest['set' + part]
|
||||
}, true);
|
||||
} catch (e) {}
|
||||
}
|
||||
return dest;
|
||||
}
|
||||
|
||||
/**
|
||||
* Private function that creates a constructor to extend the given object.
|
||||
* When this constructor is called through new, a new object is craeted
|
||||
* that inherits all from obj.
|
||||
*/
|
||||
function extend(obj) {
|
||||
// Create the constructor for the new prototype that calls initialize
|
||||
// if it is defined.
|
||||
var ctor = function(dont) {
|
||||
// Fix __proto__
|
||||
if (fix) define(this, '__proto__', { value: obj });
|
||||
// Call the constructor function, if defined and we are not
|
||||
// inheriting, in which case ctor.dont would be set, see bellow.
|
||||
if (this.initialize && dont !== ctor.dont)
|
||||
return this.initialize.apply(this, arguments);
|
||||
}
|
||||
ctor.prototype = obj;
|
||||
// Add a toString function that delegates to initialize if possible
|
||||
ctor.toString = function() {
|
||||
return (this.prototype.initialize || function() {}).toString();
|
||||
}
|
||||
return ctor;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts the argument to an iterator function. If none is specified, the
|
||||
* identity function is returned.
|
||||
* This supports normal functions, which are returned unmodified, and values
|
||||
* to compare to. Wherever this function is used in the Enumerable
|
||||
* functions, a value, a Function or null may be passed.
|
||||
*/
|
||||
function iterator(iter) {
|
||||
return !iter
|
||||
? function(val) { return val }
|
||||
: typeof iter !== 'function'
|
||||
? function(val) { return val == iter }
|
||||
: iter;
|
||||
}
|
||||
|
||||
function each(obj, iter, bind, asArray) {
|
||||
try {
|
||||
if (obj)
|
||||
(asArray || asArray === undefined && isArray(obj)
|
||||
? forEach : forIn).call(obj, iterator(iter),
|
||||
bind = bind || obj);
|
||||
} catch (e) {
|
||||
if (e !== Base.stop) throw e;
|
||||
}
|
||||
return bind;
|
||||
}
|
||||
|
||||
function clone(obj) {
|
||||
return each(obj, function(val, i) {
|
||||
this[i] = val;
|
||||
}, new obj.constructor());
|
||||
}
|
||||
|
||||
// Inject into new ctor object that's passed to inject(), and then returned
|
||||
return inject(function() {}, {
|
||||
inject: function(src/*, ... */) {
|
||||
if (src) {
|
||||
var proto = this.prototype,
|
||||
base = proto.__proto__ && proto.__proto__.constructor,
|
||||
// Allow the whole scope to just define statics by defining
|
||||
// statics: true.
|
||||
statics = src.statics == true ? src : src.statics;
|
||||
if (statics != src)
|
||||
inject(proto, src, src.enumerable, base && base.prototype,
|
||||
src.preserve, src.generics && this);
|
||||
// Define new static fields as enumerable, and inherit from
|
||||
// base. enumerable is necessary so they can be copied over from
|
||||
// base, and it does not harm to have enumerable properties in
|
||||
// the constructor. Use the preserve setting in src.preserve for
|
||||
// statics too, not their own.
|
||||
inject(this, statics, true, base, src.preserve);
|
||||
}
|
||||
// If there are more than one argument, loop through them and call
|
||||
// inject again. Do not simple inline the above code in one loop,
|
||||
// since each of the passed objects might override this.inject.
|
||||
for (var i = 1, l = arguments.length; i < l; i++)
|
||||
this.inject(arguments[i]);
|
||||
return this;
|
||||
},
|
||||
|
||||
extend: function(src/* , ... */) {
|
||||
// The new prototype extends the constructor on which extend is
|
||||
// called. Fix constructor.
|
||||
// TODO: Consider using Object.create instead of using this.dont if
|
||||
// available?
|
||||
var proto = new this(this.dont),
|
||||
ctor = extend(proto);
|
||||
define(proto, 'constructor',
|
||||
{ value: ctor, writable: true, configurable: true });
|
||||
// Define an object to be passed as the first parameter in
|
||||
// constructors when initialize should not be called.
|
||||
ctor.dont = {};
|
||||
// Copy over static fields, as prototype-like inheritance
|
||||
// is not possible for static fields. Mark them as enumerable
|
||||
// so they can be copied over again.
|
||||
inject(ctor, this, true);
|
||||
// Inject all the definitions in src. Use the new inject instead of
|
||||
// the one in ctor, in case it was overriden. this is needed when
|
||||
// overriding the static .inject(). But only inject if there's
|
||||
// something to actually inject.
|
||||
return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
|
||||
}
|
||||
// Pass true for enumerable, so inject() and extend() can be passed on
|
||||
// to subclasses of Base through Base.inject() / extend().
|
||||
}, true).inject({
|
||||
/**
|
||||
* Returns true if the object contains a property with the given name,
|
||||
* false otherwise.
|
||||
* Just like in .each, objects only contained in the prototype(s) are
|
||||
* filtered.
|
||||
*/
|
||||
has: has,
|
||||
each: each,
|
||||
|
||||
/**
|
||||
* Injects the fields from the given object, adding this.base()
|
||||
* functionality
|
||||
*/
|
||||
inject: function(/* src, ... */) {
|
||||
for (var i = 0, l = arguments.length; i < l; i++)
|
||||
inject(this, arguments[i]);
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a new object that inherits all properties from "this",
|
||||
* through proper JS inheritance, not copying.
|
||||
* Optionally, src and hide parameters can be passed to fill in the
|
||||
* newly created object just like in inject(), to copy the behavior
|
||||
* of Function.prototype.extend.
|
||||
*/
|
||||
extend: function(/* src, ... */) {
|
||||
// Notice the "new" here: the private extend returns a constructor
|
||||
// as it's used for Function.prototype.extend as well. But when
|
||||
// extending objects, we want to return a new object that inherits
|
||||
// from "this". In that case, the constructor is never used again,
|
||||
// its just created to create a new object with the proper
|
||||
// inheritance set and is garbage collected right after.
|
||||
var res = new (extend(this));
|
||||
return res.inject.apply(res, arguments);
|
||||
},
|
||||
|
||||
each: function(iter, bind) {
|
||||
return each(this, iter, bind);
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a new object of the same type and copies over all
|
||||
* name / value pairs from this object.
|
||||
*/
|
||||
clone: function() {
|
||||
return clone(this);
|
||||
},
|
||||
|
||||
statics: {
|
||||
// Expose some local privates as Base generics.
|
||||
each: each,
|
||||
clone: clone,
|
||||
define: define,
|
||||
describe: describe,
|
||||
iterator: iterator,
|
||||
|
||||
has: function(obj, name) {
|
||||
return has.call(obj, name);
|
||||
},
|
||||
|
||||
type: function(obj) {
|
||||
return (obj || obj === 0) && (obj._type || typeof obj) || null;
|
||||
},
|
||||
|
||||
check: function(obj) {
|
||||
return !!(obj || obj === 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the first argument that is defined.
|
||||
* Null is counted as defined too, since !== undefined is used for
|
||||
* comparisons. In this it differs from Mootools!
|
||||
*/
|
||||
pick: function() {
|
||||
for (var i = 0, l = arguments.length; i < l; i++)
|
||||
if (arguments[i] !== undefined)
|
||||
return arguments[i];
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* A special constant, to be thrown by closures passed to each()
|
||||
*
|
||||
* $continue / Base.next is not implemented, as the same
|
||||
* functionality can achieved by using return in the closure.
|
||||
* In prototype, the implementation of $continue also leads to a
|
||||
* huge speed decrease, as the closure is wrapped in another closure
|
||||
* that does nothing else than handling $continue.
|
||||
*/
|
||||
stop: {}
|
||||
}
|
||||
});
|
||||
}
|
||||
14
lib/parse-js-min.js
vendored
14
lib/parse-js-min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
1916
lib/parse-js.js
1916
lib/parse-js.js
File diff suppressed because it is too large
Load diff
|
|
@ -1,43 +0,0 @@
|
|||
/*
|
||||
* Paper.js
|
||||
*
|
||||
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||
* based on Scriptographer.org and designed to be largely API compatible.
|
||||
* http://paperjs.org/
|
||||
* http://scriptographer.org/
|
||||
*
|
||||
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||
*
|
||||
* Distributed under the MIT license. See LICENSE file for details.
|
||||
*
|
||||
* All rights reserved.
|
||||
*/
|
||||
|
||||
// Since loading prepro.js is also used further down to prevent inline scripts
|
||||
// from executing right away, check that its actual code is only executed once.
|
||||
if (!window.include) {
|
||||
// Determine the source of prepro.js, so we can use it to prevent inline
|
||||
// scripts from loading straight away.
|
||||
var scripts = document.getElementsByTagName('script');
|
||||
var script = scripts[scripts.length - 1];
|
||||
var src = script.getAttribute('src');
|
||||
var root = src.match(/^(.*\/)/)[1];
|
||||
|
||||
window.include = function(url) {
|
||||
url = root + url;
|
||||
var newRoot = url.match(/^(.*\/)/)[1];
|
||||
// Load prepro.js again, just to prevent the setting of newRoot frome
|
||||
// executing straight away, and delaying it until right before the
|
||||
// script at 'url' is loaded.
|
||||
document.write([
|
||||
'<script type="text/javascript" src="', src, '"></script>',
|
||||
// Set newRoot, so include() from 'url' load from the right place
|
||||
'<script type="text/javascript">root = "', newRoot, '";</script>',
|
||||
// Load the actual script
|
||||
'<script type="text/javascript" src="', url, '"></script>',
|
||||
// Set root back to the root before
|
||||
'<script type="text/javascript">root = "', root, '";</script>'
|
||||
].join(''));
|
||||
}
|
||||
}
|
||||
10
lib/stats.js
10
lib/stats.js
|
|
@ -1,10 +0,0 @@
|
|||
// stats.js r5 - http://github.com/mrdoob/stats.js
|
||||
var Stats=function(){function w(d,K,n){var u,f,c;for(f=0;f<30;f++)for(u=0;u<73;u++){c=(u+f*74)*4;d[c]=d[c+4];d[c+1]=d[c+5];d[c+2]=d[c+6]}for(f=0;f<30;f++){c=(73+f*74)*4;if(f<K){d[c]=b[n].bg.r;d[c+1]=b[n].bg.g;d[c+2]=b[n].bg.b}else{d[c]=b[n].fg.r;d[c+1]=b[n].fg.g;d[c+2]=b[n].fg.b}}}var v=0,x=2,e,y=0,l=(new Date).getTime(),J=l,z=l,o=0,A=1E3,B=0,m,g,a,p,C,q=0,D=1E3,E=0,h,i,r,F,s=0,G=1E3,H=0,j,k,t,I,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mem:{bg:{r:48,
|
||||
g:16,b:26},fg:{r:255,g:0,b:128}}};e=document.createElement("div");e.style.cursor="pointer";e.style.width="80px";e.style.opacity="0.9";e.style.zIndex="10001";e.addEventListener("click",function(){v++;v==x&&(v=0);m.style.display="none";h.style.display="none";j.style.display="none";switch(v){case 0:m.style.display="block";break;case 1:h.style.display="block";break;case 2:j.style.display="block"}},false);m=document.createElement("div");m.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
|
||||
2)+","+Math.floor(b.fps.bg.b/2)+")";m.style.padding="2px 0px 3px 0px";e.appendChild(m);g=document.createElement("div");g.style.fontFamily="Helvetica, Arial, sans-serif";g.style.textAlign="left";g.style.fontSize="9px";g.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";g.style.margin="0px 0px 1px 3px";g.innerHTML='<span style="font-weight:bold">FPS</span>';m.appendChild(g);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";m.appendChild(a);
|
||||
p=a.getContext("2d");p.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";p.fillRect(0,0,a.width,a.height);C=p.getImageData(0,0,a.width,a.height);h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";e.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize=
|
||||
"9px";i.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MS</span>';h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);r=a.getContext("2d");r.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";r.fillRect(0,0,a.width,a.height);F=r.getImageData(0,0,a.width,a.height);try{if(performance&&performance.memory&&performance.memory.totalJSHeapSize)x=
|
||||
3}catch(L){}j=document.createElement("div");j.style.backgroundColor="rgb("+Math.floor(b.mem.bg.r/2)+","+Math.floor(b.mem.bg.g/2)+","+Math.floor(b.mem.bg.b/2)+")";j.style.padding="2px 0px 3px 0px";j.style.display="none";e.appendChild(j);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.textAlign="left";k.style.fontSize="9px";k.style.color="rgb("+b.mem.fg.r+","+b.mem.fg.g+","+b.mem.fg.b+")";k.style.margin="0px 0px 1px 3px";k.innerHTML='<span style="font-weight:bold">MEM</span>';
|
||||
j.appendChild(k);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";j.appendChild(a);t=a.getContext("2d");t.fillStyle="#301010";t.fillRect(0,0,a.width,a.height);I=t.getImageData(0,0,a.width,a.height);return{domElement:e,update:function(){y++;l=(new Date).getTime();q=l-J;D=Math.min(D,q);E=Math.max(E,q);w(F.data,Math.min(30,30-q/200*30),"ms");i.innerHTML='<span style="font-weight:bold">'+q+" MS</span> ("+D+"-"+E+")";r.putImageData(F,0,0);J=l;if(l>
|
||||
z+1E3){o=Math.round(y*1E3/(l-z));A=Math.min(A,o);B=Math.max(B,o);w(C.data,Math.min(30,30-o/100*30),"fps");g.innerHTML='<span style="font-weight:bold">'+o+" FPS</span> ("+A+"-"+B+")";p.putImageData(C,0,0);if(x==3){s=performance.memory.usedJSHeapSize*9.54E-7;G=Math.min(G,s);H=Math.max(H,s);w(I.data,Math.min(30,30-s/2),"mem");k.innerHTML='<span style="font-weight:bold">'+Math.round(s)+" MEM</span> ("+Math.round(G)+"-"+Math.round(H)+")";t.putImageData(I,0,0)}z=l;y=0}}}};
|
||||
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
var fs = require('fs'),
|
||||
vm = require('vm'),
|
||||
path = require('path'),
|
||||
Canvas = require('canvas');
|
||||
|
||||
__dirname = path.resolve(__dirname, '../src/');
|
||||
|
||||
// Create the context within which we will run the source files:
|
||||
var context = vm.createContext({
|
||||
options: {
|
||||
server: true,
|
||||
version: 'dev'
|
||||
},
|
||||
fs: fs,
|
||||
// Node Canvas library: https://github.com/learnboost/node-canvas
|
||||
Canvas: Canvas,
|
||||
HTMLCanvasElement: Canvas,
|
||||
Image: Canvas.Image,
|
||||
// Copy over global variables:
|
||||
console: console,
|
||||
require: require,
|
||||
__dirname: __dirname,
|
||||
__filename: __filename,
|
||||
// Used to load and run source files within the same context:
|
||||
include: function(uri) {
|
||||
var source = fs.readFileSync(path.resolve(__dirname, uri), 'utf8');
|
||||
// For relative includes, we save the current directory and then
|
||||
// add the uri directory to __dirname:
|
||||
var oldDirname = __dirname;
|
||||
__dirname = path.resolve(__dirname, path.dirname(uri));
|
||||
vm.runInContext(source, context, uri);
|
||||
__dirname = oldDirname;
|
||||
}
|
||||
});
|
||||
|
||||
// Load Paper.js library files:
|
||||
context.include('paper.js');
|
||||
|
||||
context.Base.each(context, function(val, key) {
|
||||
if (val && val.prototype instanceof context.Base) {
|
||||
val._name = key;
|
||||
// Export all classes through PaperScope:
|
||||
context.PaperScope.prototype[key] = val;
|
||||
}
|
||||
});
|
||||
context.PaperScope.prototype['Canvas'] = context.Canvas;
|
||||
|
||||
require.extensions['.pjs'] = function(module, uri) {
|
||||
var source = context.PaperScript.compile(fs.readFileSync(uri, 'utf8'));
|
||||
var envVars = 'var __dirname = \'' + path.dirname(uri) + '\';' +
|
||||
'var __filename = \'' + uri + '\';';
|
||||
vm.runInContext(envVars, context);
|
||||
var scope = new context.PaperScope();
|
||||
context.PaperScript.evaluate(source, scope);
|
||||
module.exports = scope;
|
||||
};
|
||||
|
||||
module.exports = new context.PaperScope();
|
||||
Loading…
Reference in a new issue