Merge remote branch 'origin/master'

This commit is contained in:
Jonathan Puckey 2011-07-13 16:54:01 +02:00
commit 61052a9da9
32 changed files with 7368 additions and 1820 deletions

View file

@ -22,6 +22,9 @@
# compressed No comments and no whitespaces
# uglified Uses UglifyJS to further reduce file size
VERSION=0.2
DATE=$(git log -1 --pretty=format:%ad)
if [ $# -eq 0 ]
then
MODE="stripped"
@ -35,5 +38,5 @@ then
mkdir ../dist/
fi
./preprocess.sh ../src/paper.js ../dist/paper.js "-DBROWSER" $MODE
./preprocess.sh ../src/paper.js ../dist/paper-server.js "-DSERVER" $MODE
./preprocess.sh $MODE ../src/paper.js ../dist/paper.js "-DBROWSER -DVERSION=$VERSION -DDATE='$DATE'"
#./preprocess.sh $MODE ../src/paper.js ../dist/paper-server.js "-DSERVER"

View file

@ -21,36 +21,37 @@
# are preserved or stripped and whitespaces are compressed.
#
# Usage:
# preprocess.sh SOURCE DESTINATION ARGUMENTS MODE
# preprocess.sh MODE SOURCE DESTINATION ARGUMENTS
#
# ARGUMENTS:
# e.g. "-DBROWSER"
#
# MODE:
# commented Preprocessed but still formated and commented (default)
# commented Preprocessed but still formated and commented
# stripped Formated but without comments
# compressed No comments and no whitespaces
# uglified Uses UglifyJS to further reduce file size
KEYWORD="//#"
COMMAND="./filepp.pl -kc $KEYWORD $4 $2"
case $4 in
case $1 in
stripped)
./filepp.pl -kc $KEYWORD $3 $1 | ./jsstrip.pl -w -q | sed -n '/^[ ][ ]*$/d
eval $COMMAND | ./jsstrip.pl -w -q | sed -n '/^[ ][ ]*$/d
/./,/^$/!d
p' > $2
p' > $3
;;
compressed)
./filepp.pl -kc $KEYWORD $3 $1 | ./jsstrip.pl -q > $2
eval $COMMAND | ./jsstrip.pl -q > $3
;;
commented)
./filepp.pl -kc $KEYWORD $3 $1 | sed -n '/^[ ][ ]*$/d
eval $COMMAND | sed -n '/^[ ][ ]*$/d
/./,/^$/!d
p' > $2
p' > $3
;;
uglified)
./filepp.pl -kc $KEYWORD $3 $1 > temp.js
../../uglifyjs/bin/uglifyjs temp.js --extra --unsafe --reserved-names "$eval,$sign" > $2
eval $COMMAND > temp.js
../../uglifyjs/bin/uglifyjs temp.js --extra --unsafe --reserved-names "$eval,$sign" > $3
rm temp.js
;;
esac

View file

@ -150,7 +150,7 @@ text.characterStyle = {
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -529,7 +529,7 @@ limit on the ratio of the miter length to the <a href="../classes/PathStyle.html
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>

View file

@ -567,16 +567,16 @@ function onMouseDrag(event) {
if (myPath) {
myPath.remove();
}
// Create a new path and add a segment point to it
// at {x: 150, y: 150):
myPath = new Path();
myPath.add(150, 150);
// Draw an arc through the position of the mouse to 'toPoint'
var toPoint = new Point(350, 150);
myPath.arcTo(event.point, toPoint);
// Select the path, so we can see its segments:
myPath.selected = true;
}
@ -1391,6 +1391,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1881,6 +1920,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1910,7 +1981,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2284,7 +2355,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -3481,18 +3552,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -3502,14 +3573,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -3729,18 +3800,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -3750,16 +3821,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3993,7 +4064,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -4041,7 +4112,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -4131,7 +4202,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -4176,7 +4247,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -552,18 +552,18 @@ handle.</p>
</div>
<div id="getparameter-length-member" class="member">
<div id="getparameter-length-link" class="member-link">
<a name="getparameter-length" href="#" onClick="return toggleMember('getparameter-length', false);"><tt><b>getParameter</b>(length[, start])</tt></a>
<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="getparameter-length-description" class="member-description hidden">
<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('getparameter-length', false);"><tt><b>getParameter</b>(length[, start])</tt></a>
<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('getparameter-length', false);"></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">
@ -572,7 +572,7 @@ handle.</p>
<ul><b>Parameters:</b>
<li>
<tt>length:</tt>
<tt>offset:</tt>
<tt>Number</tt>
@ -591,7 +591,7 @@ handle.</p>
<ul><b>Returns:</b>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the curve is linear, <tt>false</tt> otherwise
<tt><tt>Number</tt></tt>
</li>
</ul>
@ -626,7 +626,7 @@ handle.</p>
<tt>parameter:</tt>
<tt>Number</tt>
&mdash;&nbsp;the position at which to find the point as
a value between <tt>0</tt> and <tt>1</tt>.
a value between <tt>0</tt> and <tt>1</tt>.
</li>
@ -671,7 +671,7 @@ handle.</p>
<tt>parameter:</tt>
<tt>Number</tt>
&mdash;&nbsp;the position at which to find the tangent
point as a value between <tt>0</tt> and <tt>1</tt>.
point as a value between <tt>0</tt> and <tt>1</tt>.
</li>
@ -708,7 +708,7 @@ handle.</p>
<tt>parameter:</tt>
<tt>Number</tt>
&mdash;&nbsp;the position at which to find the normal
point as a value between <tt>0</tt> and <tt>1</tt>.
point as a value between <tt>0</tt> and <tt>1</tt>.
</li>
@ -717,6 +717,50 @@ handle.</p>
</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>

View file

@ -21,6 +21,8 @@ objects, as defined by the curve <a href="../classes/CurveLocation.html#paramete
<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>
@ -28,18 +30,18 @@ the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, it
<div class="reference-members"><h2>Constructors</h2>
<div id="curvelocation-curve-parameter-point-member" class="member">
<div id="curvelocation-curve-parameter-point-link" class="member-link">
<a name="curvelocation-curve-parameter-point" href="#" onClick="return toggleMember('curvelocation-curve-parameter-point', false);"><tt><b>CurveLocation</b>(curve, parameter, point)</tt></a>
<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-description" class="member-description hidden">
<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', false);"><tt><b>CurveLocation</b>(curve, parameter, point)</tt></a>
<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', false);"></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">
@ -66,6 +68,13 @@ the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, it
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
<li>
<tt>distance:</tt>
</li>
</ul>
@ -150,23 +159,23 @@ the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, it
</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 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="item-description" class="member-description hidden">
<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('item', false);"><tt><b>item</b></tt></a>
<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('item', false);"></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 item this curve belongs to, if any.</p>
<p>The path this curve belongs to, if any.</p>
<ul><b>Type:</b>
@ -406,6 +415,38 @@ the curve).</p>
</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>

View file

@ -131,7 +131,7 @@ var from = path.position;
// center point of the path + 80pt in horizontal direction:
var to = path.position + [80, 0];
// Create the gradient color:
// Create the gradient color:
var gradientColor = new GradientColor(gradient, from, to);
// Set the fill color of the path to the gradient color:

View file

@ -127,7 +127,7 @@ 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;

View file

@ -596,6 +596,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1086,6 +1125,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1115,7 +1186,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -1489,7 +1560,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2686,18 +2757,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2707,14 +2778,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -2934,18 +3005,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2955,16 +3026,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3198,7 +3269,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3246,7 +3317,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3336,7 +3407,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3381,7 +3452,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

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

@ -0,0 +1,729 @@
<!DOCTYPE html>
<html>
<head>
<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>
&mdash;&nbsp;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>
&mdash;&nbsp;the saturation of the color as a value
between <tt>0</tt> and <tt>1</tt>
</li>
<li>
<tt>lightness:</tt>
<tt>Number</tt>
&mdash;&nbsp;the lightness of the color as a value
between <tt>0</tt> and <tt>1</tt>
</li>
<li>
<tt>alpha:</tt>
<tt>Number</tt>
&mdash;&nbsp;the alpha of the color as a value between
<tt>0</tt> and <tt>1</tt>
&mdash;&nbsp;optional
</li>
</ul>
<p>
<b>Example</b> &mdash; 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 100%:
circle.fillColor = new HSLColor(90, 1, 1);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; 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>
<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> &mdash; 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> &mdash; 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>
</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>&nbsp;&mdash;&nbsp;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>&nbsp;&mdash;&nbsp;<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>
&mdash;&nbsp;the color to compare with
</li>
</ul>
<ul><b>Returns:</b>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<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>&nbsp;&mdash;&nbsp;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>&nbsp;&mdash;&nbsp;A css string representation of the color.
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================= -->
<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</body>

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

@ -0,0 +1,507 @@
<!DOCTYPE html>
<html>
<head>
<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> Extends <b><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></b></p>
</div>
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></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>
<!-- =========================== inherited methods ========================= -->
<div class="reference-members"><h2>Methods inherited from <a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></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>initialize</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>initialize</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>
<ul><b>Returns:</b>
<li>
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</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>&nbsp;&mdash;&nbsp;A string representation of the curve location.
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================= -->
<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>
</body>

View file

@ -460,6 +460,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -950,6 +989,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -979,7 +1050,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -1353,7 +1424,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2387,18 +2458,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2408,14 +2479,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -2635,18 +2706,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2656,16 +2727,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -2899,7 +2970,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -2947,7 +3018,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3037,7 +3108,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3082,7 +3153,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -54,7 +54,7 @@ so all newly created items will be placed within it.</p>
<li>
<tt>children:</tt>
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
&mdash;&nbsp;An array of items that will be added to the
&mdash;&nbsp;An array of items that will be added to the
newly created layer.
&mdash;&nbsp;optional
</li>
@ -555,6 +555,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1045,6 +1084,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1074,7 +1145,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -1448,7 +1519,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2645,18 +2716,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2666,14 +2737,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -2893,18 +2964,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2914,16 +2985,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3157,7 +3228,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3205,7 +3276,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3295,7 +3366,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3340,7 +3411,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -285,18 +285,18 @@ transformation.
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -305,16 +305,16 @@ transformation.
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;The x-axis scaling factor.
&mdash;&nbsp;The horizontal scaling factor.
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;The y-axis scaling factor.
&mdash;&nbsp;The vertical scaling factor.
</li>
@ -601,18 +601,18 @@ anchor point.</p>
</div>
<div id="shear-shx-shy-member" class="member">
<div id="shear-shx-shy-link" class="member-link">
<a name="shear-shx-shy" href="#" onClick="return toggleMember('shear-shx-shy', false);"><tt><b>shear</b>(shx, shy[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shx-shy-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shx-shy', false);"><tt><b>shear</b>(shx, shy[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shx-shy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -621,16 +621,16 @@ anchor point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;The x shear factor.
&mdash;&nbsp;The horizontal shear factor.
</li>
<li>
<tt>shy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;The y shear factor.
&mdash;&nbsp;The vertical shear factor.
</li>
@ -1060,18 +1060,18 @@ inverted.</p>
</div>
<div id="settoscale-sx-sy-member" class="member">
<div id="settoscale-sx-sy-link" class="member-link">
<a name="settoscale-sx-sy" href="#" onClick="return toggleMember('settoscale-sx-sy', false);"><tt><b>setToScale</b>(sx, sy)</tt></a>
<div id="settoscale-hor-ver-member" class="member">
<div id="settoscale-hor-ver-link" class="member-link">
<a name="settoscale-hor-ver" href="#" onClick="return toggleMember('settoscale-hor-ver', false);"><tt><b>setToScale</b>(hor, ver)</tt></a>
</div>
<div id="settoscale-sx-sy-description" class="member-description hidden">
<div id="settoscale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('settoscale-sx-sy', false);"><tt><b>setToScale</b>(sx, sy)</tt></a>
<a href="#" onClick="return toggleMember('settoscale-hor-ver', false);"><tt><b>setToScale</b>(hor, ver)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoscale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoscale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -1080,16 +1080,16 @@ inverted.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;The x-axis scaling factor.
&mdash;&nbsp;The horizontal scaling factor.
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;The y-axis scaling factor.
&mdash;&nbsp;The vertical scaling factor.
</li>
@ -1162,18 +1162,18 @@ inverted.</p>
</div>
<div id="settoshear-shx-shy-member" class="member">
<div id="settoshear-shx-shy-link" class="member-link">
<a name="settoshear-shx-shy" href="#" onClick="return toggleMember('settoshear-shx-shy', false);"><tt><b>setToShear</b>(shx, shy)</tt></a>
<div id="settoshear-hor-ver-member" class="member">
<div id="settoshear-hor-ver-link" class="member-link">
<a name="settoshear-hor-ver" href="#" onClick="return toggleMember('settoshear-hor-ver', false);"><tt><b>setToShear</b>(hor, ver)</tt></a>
</div>
<div id="settoshear-shx-shy-description" class="member-description hidden">
<div id="settoshear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('settoshear-shx-shy', false);"><tt><b>setToShear</b>(shx, shy)</tt></a>
<a href="#" onClick="return toggleMember('settoshear-hor-ver', false);"><tt><b>setToShear</b>(hor, ver)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoshear-shx-shy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoshear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -1182,16 +1182,16 @@ inverted.</p>
<ul><b>Parameters:</b>
<li>
<tt>shx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;The x-axis shear factor.
&mdash;&nbsp;The horizontal shear factor.
</li>
<li>
<tt>shy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;The y-axis shear factor.
&mdash;&nbsp;The vertical shear factor.
</li>
@ -1319,18 +1319,18 @@ inverted.</p>
<div class="reference-members"><h2>Static Methods</h2>
<div id="getscaleinstance-sx-sy-member" class="member">
<div id="getscaleinstance-sx-sy-link" class="member-link">
<a name="getscaleinstance-sx-sy" href="#" onClick="return toggleMember('getscaleinstance-sx-sy', false);"><tt><b>Matrix.getScaleInstance</b>(sx, sy)</tt></a>
<div id="getscaleinstance-hor-ver-member" class="member">
<div id="getscaleinstance-hor-ver-link" class="member-link">
<a name="getscaleinstance-hor-ver" href="#" onClick="return toggleMember('getscaleinstance-hor-ver', false);"><tt><b>Matrix.getScaleInstance</b>(hor, ver)</tt></a>
</div>
<div id="getscaleinstance-sx-sy-description" class="member-description hidden">
<div id="getscaleinstance-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('getscaleinstance-sx-sy', false);"><tt><b>Matrix.getScaleInstance</b>(sx, sy)</tt></a>
<a href="#" onClick="return toggleMember('getscaleinstance-hor-ver', false);"><tt><b>Matrix.getScaleInstance</b>(hor, ver)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getscaleinstance-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getscaleinstance-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -1339,16 +1339,16 @@ inverted.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;The x-axis scaling factor.
&mdash;&nbsp;The horizontal scaling factor.
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;The y-axis scaling factor.
&mdash;&nbsp;The vertical scaling factor.
</li>
@ -1423,18 +1423,18 @@ inverted.</p>
</div>
<div id="getshearinstance-shx-shy-center-member" class="member">
<div id="getshearinstance-shx-shy-center-link" class="member-link">
<a name="getshearinstance-shx-shy-center" href="#" onClick="return toggleMember('getshearinstance-shx-shy-center', false);"><tt><b>Matrix.getShearInstance</b>(shx, shy, center)</tt></a>
<div id="getshearinstance-hor-ver-center-member" class="member">
<div id="getshearinstance-hor-ver-center-link" class="member-link">
<a name="getshearinstance-hor-ver-center" href="#" onClick="return toggleMember('getshearinstance-hor-ver-center', false);"><tt><b>Matrix.getShearInstance</b>(hor, ver, center)</tt></a>
</div>
<div id="getshearinstance-shx-shy-center-description" class="member-description hidden">
<div id="getshearinstance-hor-ver-center-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('getshearinstance-shx-shy-center', false);"><tt><b>Matrix.getShearInstance</b>(shx, shy, center)</tt></a>
<a href="#" onClick="return toggleMember('getshearinstance-hor-ver-center', false);"><tt><b>Matrix.getShearInstance</b>(hor, ver, center)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getshearinstance-shx-shy-center', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getshearinstance-hor-ver-center', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -1443,16 +1443,16 @@ inverted.</p>
<ul><b>Parameters:</b>
<li>
<tt>shx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;The x-axis shear factor.
&mdash;&nbsp;The horizontal shear factor.
</li>
<li>
<tt>shy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;The y-axis shear factor.
&mdash;&nbsp;The vertical shear factor.
</li>

View file

@ -1784,7 +1784,7 @@ function onMouseDown(event) {
if (path) {
path.selected = false;
}
// Create a new path and add the position of the mouse
// as its first segment. Select it, so we can see the
// segment points:
@ -2092,10 +2092,10 @@ var amount = 5;
var length = path.length;
for (var i = 0; i < amount + 1; i++) {
var offset = i / amount * length;
// Find the point on the path at the given offset:
var point = path.getPointAt(offset);
// Create a small circle shaped path at the point:
var circle = new Path.Circle(point, 3);
circle.fillColor = 'red';
@ -2211,13 +2211,13 @@ for (var i = 0; i < amount + 1; i++) {
// Find the point on the path at the given offset:
var point = path.getPointAt(offset);
// Find the normal vector on the path at the given offset:
var tangent = path.getTangentAt(offset);
// Make the tangent vector 60pt long:
tangent.length = 60;
var line = new Path();
line.strokeColor = 'red';
line.add(point);
@ -2330,16 +2330,16 @@ var amount = 10;
var length = path.length;
for (var i = 0; i < amount + 1; i++) {
var offset = i / amount * length;
// Find the point on the path at the given offset:
var point = path.getPointAt(offset);
// Find the normal vector on the path at the given offset:
var normal = path.getNormalAt(offset);
// Make the normal vector 30pt long:
normal.length = 30;
var line = new Path();
line.strokeColor = 'red';
line.add(point);
@ -2793,16 +2793,16 @@ function onMouseDrag(event) {
if (myPath) {
myPath.remove();
}
// Create a new path and add a segment point to it
// at {x: 150, y: 150):
myPath = new Path();
myPath.add(150, 150);
// Draw an arc through the position of the mouse to 'toPoint'
var toPoint = new Point(350, 150);
myPath.arcTo(event.point, toPoint);
// Select the path, so we can see its segments:
myPath.selected = true;
}
@ -3617,6 +3617,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -4107,6 +4146,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -4136,7 +4207,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -4510,7 +4581,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -5707,18 +5778,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -5728,14 +5799,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -5955,18 +6026,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -5976,16 +6047,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -6219,7 +6290,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -6267,7 +6338,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -6357,7 +6428,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -6402,7 +6473,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -18,7 +18,9 @@
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
<p>The PathItem class is the base for any items that describe paths
and offer standardised methods for drawing and path manipulation, such as
<a href="../classes/Path.html"><tt>Path</tt></a> and <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>.</p>
</div>
@ -461,16 +463,16 @@ function onMouseDrag(event) {
if (myPath) {
myPath.remove();
}
// Create a new path and add a segment point to it
// at {x: 150, y: 150):
myPath = new Path();
myPath.add(150, 150);
// Draw an arc through the position of the mouse to 'toPoint'
var toPoint = new Point(350, 150);
myPath.arcTo(event.point, toPoint);
// Select the path, so we can see its segments:
myPath.selected = true;
}
@ -1286,6 +1288,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1776,6 +1817,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1805,7 +1878,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2179,7 +2252,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -3376,18 +3449,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -3397,14 +3470,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -3624,18 +3697,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -3645,16 +3718,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3888,7 +3961,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3936,7 +4009,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -4026,7 +4099,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -4071,7 +4144,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -76,7 +76,7 @@ path.style = circleStyle;
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -455,7 +455,7 @@ limit on the ratio of the miter length to the <a href="../classes/PathStyle.html
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>

3382
dist/docs/classes/PlacedItem.html vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -16,7 +16,7 @@
<div class="reference-class">
<h1>PlacedSymbol</h1>
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></b></p>
<p>A PlacedSymbol represents an instance of a symbol which has been
placed in a Paper.js project.</p>
@ -134,7 +134,7 @@ for (var i = 0; i < 100; i++) {
</div>
<div class="member-text">
<p>The symbol that the placed symbol refers to:</p>
<p>The symbol that the placed symbol refers to.</p>
<ul><b>Type:</b>
@ -588,6 +588,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1078,6 +1117,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1107,7 +1178,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -1481,7 +1552,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2678,18 +2749,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2699,14 +2770,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -2926,18 +2997,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2947,16 +3018,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3190,7 +3261,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3238,7 +3309,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3328,7 +3399,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3373,7 +3444,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}
@ -3390,6 +3461,47 @@ function onMouseDown(event) {
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></h2>
<div id="matrix-member" class="member">
<div id="matrix-link" class="member-link">
<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
</div>
<div id="matrix-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The item's transformation matrix, defining position and dimensions in the
document.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================= -->
<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>

View file

@ -551,6 +551,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1041,6 +1080,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1070,7 +1141,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -1444,7 +1515,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2641,18 +2712,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2662,14 +2733,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -2889,18 +2960,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2910,16 +2981,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3153,7 +3224,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3201,7 +3272,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3291,7 +3362,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3336,7 +3407,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -16,7 +16,7 @@
<div class="reference-class">
<h1>Raster</h1>
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></b></p>
<p>The Raster item represents an image in a Paper.js project.</p>
@ -1172,6 +1172,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1662,6 +1701,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1691,7 +1762,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2065,7 +2136,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -3262,18 +3333,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -3283,14 +3354,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -3510,18 +3581,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -3531,16 +3602,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3774,7 +3845,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3822,7 +3893,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3912,7 +3983,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3957,7 +4028,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}
@ -3974,6 +4045,47 @@ function onMouseDown(event) {
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></h2>
<div id="matrix-member" class="member">
<div id="matrix-link" class="member-link">
<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
</div>
<div id="matrix-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The item's transformation matrix, defining position and dimensions in the
document.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================= -->
<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>

View file

@ -1083,7 +1083,7 @@ var circle = new Path.Circle(new Point(80, 50), 30);
function onMouseMove(event) {
// Move the circle to the position of the mouse:
circle.position = event.point;
// Check whether the bounding box of the smaller circle
// is contained within the bounding box of the larger item:
if (largeCircle.bounds.contains(circle.bounds)) {
@ -1170,7 +1170,7 @@ var circle = new Path.Circle(new Point(80, 50), 30);
function onMouseMove(event) {
// Move the circle to the position of the mouse:
circle.position = event.point;
// Check whether the bounding box of the two circle
// shaped paths intersect:
if (largeCircle.bounds.intersects(circle.bounds)) {

View file

@ -609,6 +609,45 @@ circle2.opacity = 0.5;
</div>
<div id="guide-member" class="member">
<div id="guide-link" class="member-link">
<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
<div id="guide-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Specifies whether the item functions as a guide. When set to
<tt>true</tt>, the item will be drawn at the end as a guide.</p>
<ul><b>Default:</b>
<li>
<tt>1</tt>
</li>
</ul>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</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>
@ -1099,6 +1138,38 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
</ul>
</div>
</div>
</div>
<div id="handlebounds-member" class="member">
<div id="handlebounds-link" class="member-link">
<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
<div id="handlebounds-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
@ -1128,7 +1199,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -1502,7 +1573,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<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/GrayColor.html"><tt>GrayColor</tt></a>
<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>
@ -2699,18 +2770,18 @@ circle.scale(1.5, circle.bounds.bottomLeft);
</div>
<div id="scale-sx-sy-member" class="member">
<div id="scale-sx-sy-link" class="member-link">
<a name="scale-sx-sy" href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<div id="scale-hor-ver-member" class="member">
<div id="scale-hor-ver-link" class="member-link">
<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
<div id="scale-sx-sy-description" class="member-description hidden">
<div id="scale-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('scale-sx-sy', false);"><tt><b>scale</b>(sx, sy[, center])</tt></a>
<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2720,14 +2791,14 @@ from a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>sx:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal scale factor
</li>
<li>
<tt>sy:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical scale factor
@ -2947,18 +3018,18 @@ by a supplied point.</p>
</div>
<div id="shear-shearX-shearY-member" class="member">
<div id="shear-shearX-shearY-link" class="member-link">
<a name="shear-shearX-shearY" href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<div id="shear-hor-ver-member" class="member">
<div id="shear-hor-ver-link" class="member-link">
<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
<div id="shear-shearX-shearY-description" class="member-description hidden">
<div id="shear-hor-ver-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('shear-shearX-shearY', false);"><tt><b>shear</b>(shearX, shearY[, center])</tt></a>
<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shearX-shearY', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
@ -2968,16 +3039,16 @@ by a supplied point.</p>
<ul><b>Parameters:</b>
<li>
<tt>shearX:</tt>
<tt>hor:</tt>
<tt>Number</tt>
&mdash;&nbsp;the horizontal shear factor.
</li>
<li>
<tt>shearY:</tt>
<tt>ver:</tt>
<tt>Number</tt>
&mdash;&nbsp;the vertical shear factor.
</li>
@ -3211,7 +3282,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path on the next onMouseDrag or onMouseDown event:
path.removeOn({
drag: true,
@ -3259,7 +3330,7 @@ function onMouseMove(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next move event, automatically remove the path:
path.removeOnMove();
}
@ -3349,7 +3420,7 @@ function onMouseDrag(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// On the next drag event, automatically remove the path:
path.removeOnDrag();
}
@ -3394,7 +3465,7 @@ function onMouseDown(event) {
// with a radius of 10:
var path = new Path.Circle(event.point, 10);
path.fillColor = 'black';
// Remove the path, when the mouse is released:
path.removeOnUp();
}

View file

@ -33,6 +33,38 @@ information about the mouse event.</p>
<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>

View file

@ -26,6 +26,7 @@
<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>
</ul>

View file

@ -89,22 +89,27 @@ span.CodeMirror-selected {
/* JavaScript */
span.js-comment {
color: #8c868f;
}
span.js-keyword {
span.cm-keyword {
color: #ff7800;
}
span.js-atom {
span.cm-number,
span.cm-atom {
color: #3b5bb5;
}
span.js-string {
span.cm-string {
color: #409b1c;
}
span.js-variable {
color: #000000;
span.cm-comment {
color: #8c868f;
}
span.js-variabledef,
span.js-localvariable {
span.cm-property {
color: #000;
}
span.cm-variable {
color: #000;
}
span.cm-def,
span.cm-variable-2,
span.cm-variable-3 {
color: #3a4a64;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1105
dist/paper.js vendored

File diff suppressed because it is too large Load diff

View file

@ -28,7 +28,7 @@ var PaperScope = this.PaperScope = Base.extend(/** @scope _global_ */{
*
* @type Number
*/
version: 0.2,
version: VERSION,
initialize: function(id) {
/** @lends _global_# */

View file

@ -19,6 +19,9 @@
//
// NOTE: Any files added as includes to paper.js also need to be listed here
// Define VERSION, so PaperScope is not bailing out.
var VERSION = 'dev;'
var sources = [
'lib/bootstrap.js',
'lib/parse-js.js',

View file

@ -1,9 +1,8 @@
/***
/*!
* Paper.js vVERSION
*
* Paper.js
*
* A JavaScript Vector Graphics Library, based on Scriptographer.org and
* designed to be largely API compatible.
* 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/
*
@ -14,6 +13,8 @@
*
* All rights reserved.
*
* Date: DATE
*
***
*
* Bootstrap.js JavaScript Framework.
@ -40,8 +41,7 @@
* http://lehni.org/
*
* Distributed under the BSD license.
*
***/
*/
/**
* The global PaperScope object