mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-08 05:42:07 -05:00
5267 lines
No EOL
134 KiB
HTML
5267 lines
No EOL
134 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Path</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>Path</h1>
|
|
|
|
<p> Extends <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b>, <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
|
|
|
|
<p>The Path item represents a path in a Paper.js project.</p>
|
|
|
|
</div>
|
|
|
|
<!-- ============================== constructors ========================= -->
|
|
<div class="reference-members"><h2>Constructors</h2>
|
|
|
|
|
|
<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>([segments])</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>([segments])</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>Creates a new Path item and places it at the top of the active layer.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>segments:</tt>
|
|
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
|
|
— An optional array of segments (or points to be
|
|
converted to segments) that will be added to the path.
|
|
— optional
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Create an empty path and add segments to it:
|
|
</p>
|
|
|
|
|
|
<pre class="code">var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(30, 30));
|
|
path.add(new Point(100, 100));</pre>
|
|
|
|
<p>
|
|
<b>Example</b> — Create a path with two segments:
|
|
</p>
|
|
|
|
|
|
<pre class="code">var segments = [new Point(30, 30), new Point(100, 100)];
|
|
var path = new Path(segments);
|
|
path.strokeColor = 'black';</pre>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="reference-members"><h2>Properties</h2>
|
|
|
|
|
|
<div id="segments-member" class="member">
|
|
<div id="segments-link" class="member-link">
|
|
<a name="segments" href="#" onClick="return toggleMember('segments', false);"><tt><b>segments</b></tt></a>
|
|
</div>
|
|
<div id="segments-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('segments', false);"><tt><b>segments</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segments', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The segments contained within the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="firstsegment-member" class="member">
|
|
<div id="firstsegment-link" class="member-link">
|
|
<a name="firstsegment" href="#" onClick="return toggleMember('firstsegment', false);"><tt><b>firstSegment</b></tt></a>
|
|
</div>
|
|
<div id="firstsegment-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('firstsegment', false);"><tt><b>firstSegment</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstsegment', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The first Segment contained within the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="lastsegment-member" class="member">
|
|
<div id="lastsegment-link" class="member-link">
|
|
<a name="lastsegment" href="#" onClick="return toggleMember('lastsegment', false);"><tt><b>lastSegment</b></tt></a>
|
|
</div>
|
|
<div id="lastsegment-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('lastsegment', false);"><tt><b>lastSegment</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastsegment', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The last Segment contained within the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="curves-member" class="member">
|
|
<div id="curves-link" class="member-link">
|
|
<a name="curves" href="#" onClick="return toggleMember('curves', false);"><tt><b>curves</b></tt></a>
|
|
</div>
|
|
<div id="curves-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('curves', false);"><tt><b>curves</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curves', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The curves contained within the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/Curve.html"><tt>Curve</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="firstcurve-member" class="member">
|
|
<div id="firstcurve-link" class="member-link">
|
|
<a name="firstcurve" href="#" onClick="return toggleMember('firstcurve', false);"><tt><b>firstCurve</b></tt></a>
|
|
</div>
|
|
<div id="firstcurve-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('firstcurve', false);"><tt><b>firstCurve</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstcurve', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The first Curve contained within the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="lastcurve-member" class="member">
|
|
<div id="lastcurve-link" class="member-link">
|
|
<a name="lastcurve" href="#" onClick="return toggleMember('lastcurve', false);"><tt><b>lastCurve</b></tt></a>
|
|
</div>
|
|
<div id="lastcurve-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('lastcurve', false);"><tt><b>lastCurve</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastcurve', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The last Curve contained within the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="closed-member" class="member">
|
|
<div id="closed-link" class="member-link">
|
|
<a name="closed" href="#" onClick="return toggleMember('closed', false);"><tt><b>closed</b></tt></a>
|
|
</div>
|
|
<div id="closed-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('closed', false);"><tt><b>closed</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closed', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Specifies whether the path is closed. If it is closed, Paper.js connects
|
|
the first and last segments.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Boolean</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-0">
|
|
var myPath = new Path();
|
|
myPath.strokeColor = 'black';
|
|
myPath.add(new Point(50, 75));
|
|
myPath.add(new Point(100, 25));
|
|
myPath.add(new Point(150, 75));
|
|
|
|
// Close the path:
|
|
myPath.closed = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="fullyselected-member" class="member">
|
|
<div id="fullyselected-link" class="member-link">
|
|
<a name="fullyselected" href="#" onClick="return toggleMember('fullyselected', false);"><tt><b>fullySelected</b></tt></a>
|
|
</div>
|
|
<div id="fullyselected-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('fullyselected', false);"><tt><b>fullySelected</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fullyselected', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Specifies whether the path and all its segments are selected.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Boolean</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — A path is fully selected, if all of its segments are selected:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-1">
|
|
var path = new Path.Circle(new Size(80, 50), 35);
|
|
path.fullySelected = true;
|
|
|
|
var path2 = new Path.Circle(new Size(180, 50), 35);
|
|
path2.fullySelected = true;
|
|
|
|
// Deselect the second segment of the second path:
|
|
path2.segments[1].selected = false;
|
|
|
|
// If the path is fully selected (which it is),
|
|
// set its fill color to red:
|
|
if (path.fullySelected) {
|
|
path.fillColor = 'red';
|
|
}
|
|
|
|
// If the second path is fully selected (which it isn't, since we just
|
|
// deselected its second segment),
|
|
// set its fill color to red:
|
|
if (path2.fullySelected) {
|
|
path2.fillColor = 'red';
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="clockwise-member" class="member">
|
|
<div id="clockwise-link" class="member-link">
|
|
<a name="clockwise" href="#" onClick="return toggleMember('clockwise', false);"><tt><b>clockwise</b></tt></a>
|
|
</div>
|
|
<div id="clockwise-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('clockwise', false);"><tt><b>clockwise</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clockwise', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Specifies whether the path is oriented clock-wise.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Boolean</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="length-member" class="member">
|
|
<div id="length-link" class="member-link">
|
|
<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
|
|
</div>
|
|
<div id="length-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The length of the perimeter of the path.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- ============================== methods ================================ -->
|
|
<div class="reference-members"><h2>Methods</h2>
|
|
|
|
|
|
<div id="add-segment-member" class="member">
|
|
<div id="add-segment-link" class="member-link">
|
|
<a name="add-segment" href="#" onClick="return toggleMember('add-segment', false);"><tt><b>add</b>(segment)</tt></a>
|
|
</div>
|
|
<div id="add-segment-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('add-segment', false);"><tt><b>add</b>(segment)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add-segment', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Adds one or more segments to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array of
|
|
this path.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>segment:</tt>
|
|
<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the segment or point to be added.
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the added segment. This is not necessarily the same
|
|
object, e.g. if the segment to be added already belongs to another path.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding segments to a path using point objects:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-2">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
// Add a segment at {x: 30, y: 75}
|
|
path.add(new Point(30, 75));
|
|
|
|
// Add two segments in one go at {x: 100, y: 20}
|
|
// and {x: 170, y: 75}:
|
|
path.add(new Point(100, 20), new Point(170, 75));
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding segments to a path using arrays containing number pairs:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-3">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
// Add a segment at {x: 30, y: 75}
|
|
path.add([30, 75]);
|
|
|
|
// Add two segments in one go at {x: 100, y: 20}
|
|
// and {x: 170, y: 75}:
|
|
path.add([100, 20], [170, 75]);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding segments to a path using objects:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-4">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
// Add a segment at {x: 30, y: 75}
|
|
path.add({x: 30, y: 75});
|
|
|
|
// Add two segments in one go at {x: 100, y: 20}
|
|
// and {x: 170, y: 75}:
|
|
path.add({x: 100, y: 20}, {x: 170, y: 75});
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding a segment with handles to a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-5">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
path.add(new Point(30, 75));
|
|
|
|
// Add a segment with handles:
|
|
var point = new Point(100, 20);
|
|
var handleIn = new Point(-50, 0);
|
|
var handleOut = new Point(50, 0);
|
|
var added = path.add(new Segment(point, handleIn, handleOut));
|
|
|
|
// Select the added segment, so we can see its handles:
|
|
added.selected = true;
|
|
|
|
path.add(new Point(170, 75));
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="insert-index-segment-member" class="member">
|
|
<div id="insert-index-segment-link" class="member-link">
|
|
<a name="insert-index-segment" href="#" onClick="return toggleMember('insert-index-segment', false);"><tt><b>insert</b>(index, segment)</tt></a>
|
|
</div>
|
|
<div id="insert-index-segment-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('insert-index-segment', false);"><tt><b>insert</b>(index, segment)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insert-index-segment', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Inserts one or more segments at a given index in the list of this path's
|
|
segments.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>index:</tt>
|
|
<tt>Number</tt>
|
|
— the index at which to insert the segment.
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>segment:</tt>
|
|
<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the segment or point to be inserted.
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the added segment. This is not necessarily the same
|
|
object, e.g. if the segment to be added already belongs to another path.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Inserting a segment:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-6">
|
|
var myPath = new Path();
|
|
myPath.strokeColor = 'black';
|
|
myPath.add(new Point(50, 75));
|
|
myPath.add(new Point(150, 75));
|
|
|
|
// Insert a new segment into myPath at index 1:
|
|
myPath.insert(1, new Point(100, 25));
|
|
|
|
// Select the segment which we just inserted:
|
|
myPath.segments[1].selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Inserting multiple segments:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-7">
|
|
var myPath = new Path();
|
|
myPath.strokeColor = 'black';
|
|
myPath.add(new Point(50, 75));
|
|
myPath.add(new Point(150, 75));
|
|
|
|
// Insert two segments into myPath at index 1:
|
|
myPath.insert(1, [80, 25], [120, 25]);
|
|
|
|
// Select the segments which we just inserted:
|
|
myPath.segments[1].selected = true;
|
|
myPath.segments[2].selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="addsegments-segments-member" class="member">
|
|
<div id="addsegments-segments-link" class="member-link">
|
|
<a name="addsegments-segments" href="#" onClick="return toggleMember('addsegments-segments', false);"><tt><b>addSegments</b>(segments)</tt></a>
|
|
</div>
|
|
<div id="addsegments-segments-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('addsegments-segments', false);"><tt><b>addSegments</b>(segments)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addsegments-segments', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Adds an array of segments (or types that can be converted to segments)
|
|
to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>segments:</tt>
|
|
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — an array of the added segments. These segments are
|
|
not necessarily the same objects, e.g. if the segment to be added already
|
|
belongs to another path.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding an array of Point objects:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-8">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
var points = [new Point(30, 50), new Point(170, 50)];
|
|
path.addSegments(points);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding an array of [x, y] arrays:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-9">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
var array = [[30, 75], [100, 20], [170, 75]];
|
|
path.addSegments(array);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Adding segments from one path to another:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-10">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.addSegments([[30, 75], [100, 20], [170, 75]]);
|
|
|
|
var path2 = new Path();
|
|
path2.strokeColor = 'red';
|
|
|
|
// Add the second and third segments of path to path2:
|
|
path2.add(path.segments[1], path.segments[2]);
|
|
|
|
// Move path2 30pt to the right:
|
|
path2.position.x += 30;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="insertsegments-index-segments-member" class="member">
|
|
<div id="insertsegments-index-segments-link" class="member-link">
|
|
<a name="insertsegments-index-segments" href="#" onClick="return toggleMember('insertsegments-index-segments', false);"><tt><b>insertSegments</b>(index, segments)</tt></a>
|
|
</div>
|
|
<div id="insertsegments-index-segments-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('insertsegments-index-segments', false);"><tt><b>insertSegments</b>(index, segments)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertsegments-index-segments', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Inserts an array of segments at a given index in the path's
|
|
<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>index:</tt>
|
|
<tt>Number</tt>
|
|
— the index at which to insert the segments.
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>segments:</tt>
|
|
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
|
|
— the segments to be inserted.
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — an array of the added segments. These segments are
|
|
not necessarily the same objects, e.g. if the segment to be added already
|
|
belongs to another path.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removesegment-index-member" class="member">
|
|
<div id="removesegment-index-link" class="member-link">
|
|
<a name="removesegment-index" href="#" onClick="return toggleMember('removesegment-index', false);"><tt><b>removeSegment</b>(index)</tt></a>
|
|
</div>
|
|
<div id="removesegment-index-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removesegment-index', false);"><tt><b>removeSegment</b>(index)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegment-index', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the segment at the specified index of the path's
|
|
<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>index:</tt>
|
|
<tt>Number</tt>
|
|
— the index of the segment to be removed
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the removed segment
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Removing a segment from a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-11">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 35:
|
|
var path = new Path.Circle(new Point(80, 50), 35);
|
|
path.strokeColor = 'black';
|
|
|
|
// Remove its second segment:
|
|
path.removeSegment(1);
|
|
|
|
// Select the path, so we can see its segments:
|
|
path.selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removesegments-from-to-member" class="member">
|
|
<div id="removesegments-from-to-link" class="member-link">
|
|
<a name="removesegments-from-to" href="#" onClick="return toggleMember('removesegments-from-to', false);"><tt><b>removeSegments</b>(from, to)</tt></a>
|
|
</div>
|
|
<div id="removesegments-from-to-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removesegments-from-to', false);"><tt><b>removeSegments</b>(from, to)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegments-from-to', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the segments from the specified 'from' index to the specified
|
|
'to' index from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>from:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>to:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Array</tt></tt> — an array containing the removed segments.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Removing segments from a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-12">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 35:
|
|
var path = new Path.Circle(new Point(80, 50), 35);
|
|
path.strokeColor = 'black';
|
|
|
|
// Remove the segments from index 1 till index 2:
|
|
path.removeSegments(1, 2);
|
|
|
|
// Select the path, so we can see its segments:
|
|
path.selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="curvestopoints-maxDistance-member" class="member">
|
|
<div id="curvestopoints-maxDistance-link" class="member-link">
|
|
<a name="curvestopoints-maxDistance" href="#" onClick="return toggleMember('curvestopoints-maxDistance', false);"><tt><b>curvesToPoints</b>(maxDistance)</tt></a>
|
|
</div>
|
|
<div id="curvestopoints-maxDistance-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('curvestopoints-maxDistance', false);"><tt><b>curvesToPoints</b>(maxDistance)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curvestopoints-maxDistance', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Converts the curves in the path to straight lines.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>maxDistance:</tt>
|
|
<tt>Number</tt>
|
|
— the maximum distance between the points
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Straightening the curves of a circle:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-13">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 35:
|
|
var path = new Path.Circle(new Size(80, 50), 35);
|
|
|
|
// Select the path, so we can inspect its segments:
|
|
path.selected = true;
|
|
|
|
// Create a copy of the path and move it 150 points to the right:
|
|
var copy = path.clone();
|
|
copy.position.x += 150;
|
|
|
|
// Convert its curves to points, with a max distance of 20:
|
|
copy.curvesToPoints(20);
|
|
|
|
// Select the copy, so we can inspect its segments:
|
|
copy.selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="pointstocurves-member" class="member">
|
|
<div id="pointstocurves-link" class="member-link">
|
|
<a name="pointstocurves" href="#" onClick="return toggleMember('pointstocurves', false);"><tt><b>pointsToCurves</b>([tolerance])</tt></a>
|
|
</div>
|
|
<div id="pointstocurves-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('pointstocurves', false);"><tt><b>pointsToCurves</b>([tolerance])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('pointstocurves', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>tolerance:</tt>
|
|
<tt>Number</tt>
|
|
|
|
— optional, default: <tt>2.5</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Click and drag below to draw to draw a line, when you release the mouse, the is made smooth using path.pointsToCurves():
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-14">
|
|
var path;
|
|
function onMouseDown(event) {
|
|
// If we already made a path before, deselect it:
|
|
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:
|
|
path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(event.point);
|
|
path.selected = true;
|
|
}
|
|
|
|
function onMouseDrag(event) {
|
|
// On every drag event, add a segment to the path
|
|
// at the position of the mouse:
|
|
path.add(event.point);
|
|
}
|
|
|
|
function onMouseUp(event) {
|
|
// When the mouse is released, simplify the path using
|
|
// the pointsToCurves function:
|
|
path.pointsToCurves();
|
|
path.selected = true;
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="300" id="canvas-14"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="reverse-member" class="member">
|
|
<div id="reverse-link" class="member-link">
|
|
<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
|
</div>
|
|
<div id="reverse-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Reverses the segments of the path.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="join-path-member" class="member">
|
|
<div id="join-path-link" class="member-link">
|
|
<a name="join-path" href="#" onClick="return toggleMember('join-path', false);"><tt><b>join</b>(path)</tt></a>
|
|
</div>
|
|
<div id="join-path-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('join-path', false);"><tt><b>join</b>(path)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('join-path', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Joins the path with the specified path, which will be removed in the
|
|
process.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>path:</tt>
|
|
<a href="../classes/Path.html"><tt>Path</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Joining two paths:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-15">
|
|
var path = new Path([30, 25], [30, 75]);
|
|
path.strokeColor = 'black';
|
|
|
|
var path2 = new Path([200, 25], [200, 75]);
|
|
path2.strokeColor = 'black';
|
|
|
|
// Join the paths:
|
|
path.join(path2);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Joining two paths that share a point at the start or end of their segments array:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-16">
|
|
var path = new Path([30, 25], [30, 75]);
|
|
path.strokeColor = 'black';
|
|
|
|
var path2 = new Path([30, 25], [80, 25]);
|
|
path2.strokeColor = 'black';
|
|
|
|
// Join the paths:
|
|
path.join(path2);
|
|
|
|
// After joining, path with have 3 segments, since it
|
|
// shared its first segment point with the first
|
|
// segment point of path2.
|
|
|
|
// Select the path to show that they have joined:
|
|
path.selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Joining two paths that connect at two points:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-17">
|
|
var path = new Path([30, 25], [80, 25], [80, 75]);
|
|
path.strokeColor = 'black';
|
|
|
|
var path2 = new Path([30, 25], [30, 75], [80, 75]);
|
|
path2.strokeColor = 'black';
|
|
|
|
// Join the paths:
|
|
path.join(path2);
|
|
|
|
// Because the paths were joined at two points, the path is closed
|
|
// and has 4 segments.
|
|
|
|
// Select the path to show that they have joined:
|
|
path.selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Positions on Paths and Curves</h3>
|
|
|
|
<div id="getlocationat-offset-member" class="member">
|
|
<div id="getlocationat-offset-link" class="member-link">
|
|
<a name="getlocationat-offset" href="#" onClick="return toggleMember('getlocationat-offset', false);"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
<div id="getlocationat-offset-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('getlocationat-offset', false);"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getlocationat-offset', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>offset:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>isParameter:</tt>
|
|
<tt>Boolean</tt>
|
|
|
|
— optional, default: <tt>false</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="getpointat-offset-member" class="member">
|
|
<div id="getpointat-offset-link" class="member-link">
|
|
<a name="getpointat-offset" href="#" onClick="return toggleMember('getpointat-offset', false);"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
<div id="getpointat-offset-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('getpointat-offset', false);"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpointat-offset', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Get the point on the path at the given offset.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>offset:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>isParameter:</tt>
|
|
<tt>Boolean</tt>
|
|
|
|
— optional, default: <tt>false</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the point at the given offset
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Finding the point on a path at a given offset:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-18">
|
|
// Create an arc shaped path:
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(40, 100));
|
|
path.arcTo(new Point(150, 100));
|
|
|
|
// We're going to be working with a third of the length
|
|
// of the path as the offset:
|
|
var offset = path.length / 3;
|
|
|
|
// Find the point on the path:
|
|
var point = path.getPointAt(offset);
|
|
|
|
// Create a small circle shaped path at the point:
|
|
var circle = new Path.Circle(point, 3);
|
|
circle.fillColor = 'red';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="150" id="canvas-18"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Iterating over the length of a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-19">
|
|
// Create an arc shaped path:
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(40, 100));
|
|
path.arcTo(new Point(150, 100));
|
|
|
|
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';
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="150" id="canvas-19"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="gettangentat-offset-member" class="member">
|
|
<div id="gettangentat-offset-link" class="member-link">
|
|
<a name="gettangentat-offset" href="#" onClick="return toggleMember('gettangentat-offset', false);"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
<div id="gettangentat-offset-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('gettangentat-offset', false);"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangentat-offset', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Get the tangent to the path at the given offset as a vector
|
|
point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>offset:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>isParameter:</tt>
|
|
<tt>Boolean</tt>
|
|
|
|
— optional, default: <tt>false</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the tangent vector at the given offset
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Working with the tangent vector at a given offset:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-20">
|
|
// Create an arc shaped path:
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(40, 100));
|
|
path.arcTo(new Point(150, 100));
|
|
|
|
// We're going to be working with a third of the length
|
|
// of the path as the offset:
|
|
var offset = path.length / 3;
|
|
|
|
// Find the point on the path:
|
|
var point = path.getPointAt(offset);
|
|
|
|
// Find the tangent vector at the given offset:
|
|
var tangent = path.getTangentAt(offset);
|
|
|
|
// Make the tangent vector 60pt long:
|
|
tangent.length = 60;
|
|
|
|
var path = new Path();
|
|
path.strokeColor = 'red';
|
|
path.add(point);
|
|
path.add(point + tangent);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="150" id="canvas-20"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Iterating over the length of a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-21">
|
|
// Create an arc shaped path:
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(40, 100));
|
|
path.arcTo(new Point(150, 100));
|
|
|
|
var amount = 6;
|
|
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 tangent = path.getTangentAt(offset);
|
|
|
|
// Make the tangent vector 60pt long:
|
|
tangent.length = 60;
|
|
|
|
var line = new Path();
|
|
line.strokeColor = 'red';
|
|
line.add(point);
|
|
line.add(point + tangent);
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-21"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="getnormalat-offset-member" class="member">
|
|
<div id="getnormalat-offset-link" class="member-link">
|
|
<a name="getnormalat-offset" href="#" onClick="return toggleMember('getnormalat-offset', false);"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
<div id="getnormalat-offset-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('getnormalat-offset', false);"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormalat-offset', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Get the normal to the path at the given offset as a vector point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>offset:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>isParameter:</tt>
|
|
<tt>Boolean</tt>
|
|
|
|
— optional, default: <tt>false</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the normal vector at the given offset
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Working with the normal vector at a given offset:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-22">
|
|
// Create an arc shaped path:
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(40, 100));
|
|
path.arcTo(new Point(150, 100));
|
|
|
|
// We're going to be working with a third of the length
|
|
// of the path as the offset:
|
|
var offset = path.length / 3;
|
|
|
|
// Find the point on the path:
|
|
var point = path.getPointAt(offset);
|
|
|
|
// Find the normal vector at the given offset:
|
|
var normal = path.getNormalAt(offset);
|
|
|
|
// Make the normal vector 30pt long:
|
|
normal.length = 30;
|
|
|
|
var path = new Path();
|
|
path.strokeColor = 'red';
|
|
path.add(point);
|
|
path.add(point + normal);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="150" id="canvas-22"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Iterating over the length of a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-23">
|
|
// Create an arc shaped path:
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(new Point(40, 100));
|
|
path.arcTo(new Point(150, 100));
|
|
|
|
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);
|
|
line.add(point + normal);
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-23"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- =========================== inherited methods ========================= -->
|
|
<div class="reference-members"><h2>Methods inherited from <a href="../classes/PathItem.html"><tt>PathItem</tt></a></h2>
|
|
|
|
|
|
<div id="smooth-member" class="member">
|
|
<div id="smooth-link" class="member-link">
|
|
<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
|
|
</div>
|
|
<div id="smooth-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Smooth bezier curves without changing the amount of segments or their
|
|
points, by only smoothing and adjusting their handle points, for both
|
|
open ended and closed paths.</p>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Smoothing a closed shape:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-24">
|
|
// Create a rectangular path with its top-left point at
|
|
// {x: 30, y: 25} and a size of {width: 50, height: 50}:
|
|
var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
|
|
path.strokeColor = 'black';
|
|
|
|
// Select the path, so we can see its handles:
|
|
path.selected = true;
|
|
|
|
// Create a copy of the path and move it 100pt to the right:
|
|
var copy = path.clone();
|
|
copy.position.x += 100;
|
|
|
|
// Smooth the segments of the copy:
|
|
copy.smooth();
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-25">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
path.add(new Point(30, 50));
|
|
|
|
var y = 5;
|
|
var x = 3;
|
|
|
|
for (var i = 0; i < 28; i++) {
|
|
y *= -1.1;
|
|
x *= 1.1;
|
|
path.lineBy(x, y);
|
|
}
|
|
|
|
// Create a copy of the path and move it 100pt down:
|
|
var copy = path.clone();
|
|
copy.position.y += 120;
|
|
|
|
// Set its stroke color to red:
|
|
copy.strokeColor = 'red';
|
|
|
|
// Smooth the segments of the copy:
|
|
copy.smooth();
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="220" id="canvas-25"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Postscript Style Drawing Commands</h3>
|
|
|
|
<div id="moveto-point-member" class="member">
|
|
<div id="moveto-point-link" class="member-link">
|
|
<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
|
|
</div>
|
|
<div id="moveto-point-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
|
|
child and the point is added as its first segment. On a normal empty
|
|
<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>point:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="lineto-point-member" class="member">
|
|
<div id="lineto-point-link" class="member-link">
|
|
<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
|
|
</div>
|
|
<div id="lineto-point-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-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>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="cubiccurveto-handle1-handle2-to-member" class="member">
|
|
<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
|
|
<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
|
|
</div>
|
|
<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Adds a cubic bezier curve to the path, defined by two handles and a to
|
|
point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>handle1:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>handle2:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>to:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="quadraticcurveto-handle-to-member" class="member">
|
|
<div id="quadraticcurveto-handle-to-link" class="member-link">
|
|
<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
|
|
</div>
|
|
<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
|
|
point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>handle:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>to:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="curveto-through-to-member" class="member">
|
|
<div id="curveto-through-to-link" class="member-link">
|
|
<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
|
|
</div>
|
|
<div id="curveto-through-to-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Draws a curve from the position of the last segment point in the path
|
|
that goes through the specified <tt>through</tt> point, to the specified
|
|
<tt>to</tt> point by adding one segment to the path.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>through:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the point through which the curve should go
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>to:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the point where the curve should end
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>parameter:</tt>
|
|
<tt>Number</tt>
|
|
|
|
— optional, default: <tt>0.5</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Interactive example. Click and drag in the view below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-26">
|
|
var myPath;
|
|
function onMouseDrag(event) {
|
|
// If we created a path before, remove it:
|
|
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 a curve through the position of the mouse to 'toPoint'
|
|
var toPoint = new Point(350, 150);
|
|
myPath.curveTo(event.point, toPoint);
|
|
|
|
// Select the path, so we can see its segments:
|
|
myPath.selected = true;
|
|
}
|
|
|
|
// When the mouse is released, deselect the path
|
|
// and set its stroke-color to black:
|
|
function onMouseUp(event) {
|
|
myPath.selected = false;
|
|
myPath.strokeColor = 'black';
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="300" id="canvas-26"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="arcto-through-to-member" class="member">
|
|
<div id="arcto-through-to-link" class="member-link">
|
|
<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
|
|
</div>
|
|
<div id="arcto-through-to-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Draws an arc from the position of the last segment point in the path that
|
|
goes through the specified <tt>through</tt> point, to the specified
|
|
<tt>to</tt> point by adding one or more segments to the path.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>through:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the point where the arc should pass through
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>to:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the point where the arc should end
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-27">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
var firstPoint = new Point(30, 75);
|
|
path.add(firstPoint);
|
|
|
|
// The point through which we will create the arc:
|
|
var throughPoint = new Point(40, 40);
|
|
|
|
// The point at which the arc will end:
|
|
var toPoint = new Point(130, 75);
|
|
|
|
// Draw an arc through 'throughPoint' to 'toPoint'
|
|
path.arcTo(throughPoint, toPoint);
|
|
|
|
// Add a red circle shaped path at the position of 'throughPoint':
|
|
var circle = new Path.Circle(throughPoint, 3);
|
|
circle.fillColor = 'red';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Interactive example. Click and drag in the view below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-28">
|
|
var myPath;
|
|
function onMouseDrag(event) {
|
|
// If we created a path before, remove it:
|
|
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;
|
|
}
|
|
|
|
// When the mouse is released, deselect the path
|
|
// and fill it with black.
|
|
function onMouseUp(event) {
|
|
myPath.selected = false;
|
|
myPath.fillColor = 'black';
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="300" id="canvas-28"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="arcto-to-member" class="member">
|
|
<div id="arcto-to-link" class="member-link">
|
|
<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
|
|
</div>
|
|
<div id="arcto-to-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Draws an arc from the position of the last segment point in the path to
|
|
the specified point by adding one or more segments to the path.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>to:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the point where the arc should end
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>clockwise:</tt>
|
|
<tt>Boolean</tt>
|
|
— specifies whether the arc should be
|
|
drawn in clockwise direction.
|
|
— optional, default: <tt>true</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-29">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
path.add(new Point(30, 75));
|
|
path.arcTo(new Point(130, 75));
|
|
|
|
var path2 = new Path();
|
|
path2.strokeColor = 'red';
|
|
path2.add(new Point(180, 25));
|
|
|
|
// To draw an arc in anticlockwise direction,
|
|
// we pass 'false' as the second argument to arcTo:
|
|
path2.arcTo(new Point(280, 25), false);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Interactive example. Click and drag in the view below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-30">
|
|
var myPath;
|
|
|
|
// The mouse has to move at least 20 points before
|
|
// the next mouse drag event is fired:
|
|
tool.minDistance = 20;
|
|
|
|
// When the user clicks, create a new path and add
|
|
// the current mouse position to it as its first segment:
|
|
function onMouseDown(event) {
|
|
myPath = new Path();
|
|
myPath.strokeColor = 'black';
|
|
myPath.add(event.point);
|
|
}
|
|
|
|
// On each mouse drag event, draw an arc to the current
|
|
// position of the mouse:
|
|
function onMouseDrag(event) {
|
|
myPath.arcTo(event.point);
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="300" id="canvas-30"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="closepath-member" class="member">
|
|
<div id="closepath-link" class="member-link">
|
|
<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
|
|
</div>
|
|
<div id="closepath-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Closes the path. When closed, Paper.js connects the first and last
|
|
segments.</p>
|
|
|
|
|
|
|
|
<p><b>See also:</b>
|
|
<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Relative Drawing Commands</h3>
|
|
|
|
<div id="moveby-point-member" class="member">
|
|
<div id="moveby-point-link" class="member-link">
|
|
<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
|
|
</div>
|
|
<div id="moveby-point-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
|
|
child and the point is added as its first segment relative to the
|
|
position of the last segment of the current path.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>point:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="lineby-vector-member" class="member">
|
|
<div id="lineby-vector-link" class="member-link">
|
|
<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
|
|
</div>
|
|
<div id="lineby-vector-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Adds a segment relative to the last segment point of the path.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>vector:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— The vector which is added to the position of the
|
|
last segment of the path, to become the new segment.
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-31">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
// Add a segment at {x: 50, y: 50}
|
|
path.add(25, 25);
|
|
|
|
// Add a segment relative to the last segment of the path.
|
|
// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
|
|
path.lineBy(50, 0);
|
|
|
|
// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
|
|
path.lineBy(0, 50);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Drawing a spiral using lineBy:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-32">
|
|
var path = new Path();
|
|
path.strokeColor = 'black';
|
|
|
|
// Add the first segment at {x: 50, y: 50}
|
|
path.add(view.center);
|
|
|
|
// Loop 500 times:
|
|
for (var i = 0; i < 500; i++) {
|
|
// Create a vector with an ever increasing length
|
|
// and an angle in increments of 45 degrees
|
|
var vector = new Point({
|
|
angle: i * 45,
|
|
length: i / 2
|
|
});
|
|
// Add the vector relatively to the last segment point:
|
|
path.lineBy(vector);
|
|
}
|
|
|
|
// Smooth the handles of the path:
|
|
path.smooth();
|
|
|
|
// Uncomment the following line and click on 'run' to see
|
|
// the construction of the path:
|
|
// path.selected = true;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="300" id="canvas-32"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="curveby-throughVector-toVector-member" class="member">
|
|
<div id="curveby-throughVector-toVector-link" class="member-link">
|
|
<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
|
|
</div>
|
|
<div id="curveby-throughVector-toVector-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>throughVector:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>toVector:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>parameter:</tt>
|
|
<tt>Number</tt>
|
|
|
|
— optional, default: <tt>0.5</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="arcby-throughVector-toVector-member" class="member">
|
|
<div id="arcby-throughVector-toVector-link" class="member-link">
|
|
<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
|
|
</div>
|
|
<div id="arcby-throughVector-toVector-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>throughVector:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>toVector:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- =========================== inherited properties ====================== -->
|
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
|
|
|
|
<div id="id-member" class="member">
|
|
<div id="id-link" class="member-link">
|
|
<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
|
|
</div>
|
|
<div id="id-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The unique id of the item.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="name-member" class="member">
|
|
<div id="name-link" class="member-link">
|
|
<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
|
|
</div>
|
|
<div id="name-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The name of the item. If the item has a name, it can be accessed by name
|
|
through its parent's children list.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>String</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-33">
|
|
var path = new Path.Circle(new Point(80, 50), 35);
|
|
// Set the name of the path:
|
|
path.name = 'example';
|
|
|
|
// Create a group and move path into it:
|
|
var group = new Group();
|
|
group.appendTop(path);
|
|
|
|
// The path can be accessed by name:
|
|
group.children['example'].fillColor = 'red';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="position-member" class="member">
|
|
<div id="position-link" class="member-link">
|
|
<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
|
|
</div>
|
|
<div id="position-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The item's position within the project. This is the
|
|
<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Changing the position of a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-34">
|
|
// Create a circle at position { x: 10, y: 10 }
|
|
var circle = new Path.Circle(new Point(10, 10), 10);
|
|
circle.fillColor = 'red';
|
|
|
|
// Move the circle to { x: 20, y: 20 }
|
|
circle.position = new Point(20, 20);
|
|
|
|
// Move the circle 100 points to the right and 50 points down
|
|
circle.position += new Point(100, 50);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Changing the x coordinate of an item's position:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-35">
|
|
// Create a circle at position { x: 20, y: 20 }
|
|
var circle = new Path.Circle(new Point(20, 20), 10);
|
|
circle.fillColor = 'red';
|
|
|
|
// Move the circle 100 points to the right
|
|
circle.position.x += 100;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="style-member" class="member">
|
|
<div id="style-link" class="member-link">
|
|
<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
|
|
</div>
|
|
<div id="style-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The path style of the item.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Applying several styles to an item in one go, by passing an object to its style property:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-36">
|
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
|
circle.style = {
|
|
fillColor: 'blue',
|
|
strokeColor: 'red',
|
|
strokeWidth: 5
|
|
};
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Copying the style of another item:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-37">
|
|
var path = new Path.Circle(new Point(50, 50), 30);
|
|
path.fillColor = 'red';
|
|
|
|
var path2 = new Path.Circle(new Point(180, 50), 20);
|
|
// Copy the path style of path:
|
|
path2.style = path.style;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Applying the same style object to multiple items:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-38">
|
|
var myStyle = {
|
|
fillColor: 'red',
|
|
strokeColor: 'blue',
|
|
strokeWidth: 4
|
|
};
|
|
|
|
var path = new Path.Circle(new Point(80, 50), 30);
|
|
path.style = myStyle;
|
|
|
|
var path2 = new Path.Circle(new Point(150, 50), 20);
|
|
path2.style = myStyle;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="selected-member" class="member">
|
|
<div id="selected-link" class="member-link">
|
|
<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
|
</div>
|
|
<div id="selected-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Specifies whether an item is selected and will also return <tt>true</tt>
|
|
if the item is partially selected (groups with some selected or partially
|
|
selected paths).</p>
|
|
<p>Paper.js draws the visual outlines of selected items on top of your
|
|
project. This can be useful for debugging, as it allows you to see the
|
|
construction of paths, position of path curves, individual segment points
|
|
and bounding boxes of symbol and raster items.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Boolean</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p><b>See also:</b>
|
|
<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Example</b> — Selecting an item:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-39">
|
|
var path = new Path.Circle(new Size(80, 50), 35);
|
|
path.selected = true; // Select the path
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="visible-member" class="member">
|
|
<div id="visible-link" class="member-link">
|
|
<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
|
|
</div>
|
|
<div id="visible-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
|
|
item won't be drawn.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>true</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Boolean</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Hiding an item:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-40">
|
|
var path = new Path.Circle(new Point(50, 50), 20);
|
|
path.fillColor = 'red';
|
|
|
|
// Hide the path:
|
|
path.visible = false;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="blendmode-member" class="member">
|
|
<div id="blendmode-link" class="member-link">
|
|
<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
|
|
</div>
|
|
<div id="blendmode-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The blend mode of the item.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>'normal'</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
|
|
'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
|
|
'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
|
|
'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Setting an item's blend mode:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-41">
|
|
// Create a white rectangle in the background
|
|
// with the same dimensions as the view:
|
|
var background = new Path.Rectangle(view.bounds);
|
|
background.fillColor = 'white';
|
|
|
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
|
circle.fillColor = 'red';
|
|
|
|
var circle2 = new Path.Circle(new Point(120, 50), 35);
|
|
circle2.fillColor = 'blue';
|
|
|
|
// Set the blend mode of circle2:
|
|
circle2.blendMode = 'multiply';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="opacity-member" class="member">
|
|
<div id="opacity-link" class="member-link">
|
|
<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
|
|
</div>
|
|
<div id="opacity-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>1</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Making an item 50% transparent:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-42">
|
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
|
circle.fillColor = 'red';
|
|
|
|
var circle2 = new Path.Circle(new Point(120, 50), 35);
|
|
circle2.style = {
|
|
fillColor: 'blue',
|
|
strokeColor: 'green',
|
|
strokeWidth: 10
|
|
};
|
|
|
|
// Make circle2 50% transparent:
|
|
circle2.opacity = 0.5;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Project Hierarchy</h3>
|
|
|
|
<div id="project-member" class="member">
|
|
<div id="project-link" class="member-link">
|
|
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
|
</div>
|
|
<div id="project-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The project that this item belongs to.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Project.html"><tt>Project</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="parent-member" class="member">
|
|
<div id="parent-link" class="member-link">
|
|
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
|
</div>
|
|
<div id="parent-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The item that this item is contained within.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
|
|
<pre class="code">var path = new Path();
|
|
|
|
// New items are placed in the active layer:
|
|
console.log(path.parent == project.activeLayer); // true
|
|
|
|
var group = new Group();
|
|
group.appendTop(path);
|
|
|
|
// Now the parent of the path has become the group:
|
|
console.log(path.parent == group); // true</pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="children-member" class="member">
|
|
<div id="children-link" class="member-link">
|
|
<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
|
|
</div>
|
|
<div id="children-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The children items contained within this item. Items that define a
|
|
<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Accessing items in the children array:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-43">
|
|
var path = new Path.Circle(new Point(80, 50), 35);
|
|
|
|
// Create a group and move the path into it:
|
|
var group = new Group();
|
|
group.appendTop(path);
|
|
|
|
// Access the path through the group's children array:
|
|
group.children[0].fillColor = 'red';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Accessing children by name:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-44">
|
|
var path = new Path.Circle(new Point(80, 50), 35);
|
|
// Set the name of the path:
|
|
path.name = 'example';
|
|
|
|
// Create a group and move the path into it:
|
|
var group = new Group();
|
|
group.appendTop(path);
|
|
|
|
// The path can be accessed by name:
|
|
group.children['example'].fillColor = 'orange';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Passing an array of items to item.children:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-45">
|
|
var path = new Path.Circle(new Point(80, 50), 35);
|
|
|
|
var group = new Group();
|
|
group.children = [path];
|
|
|
|
// The path is the first child of the group:
|
|
group.firstChild.fillColor = 'green';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="firstchild-member" class="member">
|
|
<div id="firstchild-link" class="member-link">
|
|
<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
|
|
</div>
|
|
<div id="firstchild-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The first item contained within this item. This is a shortcut for
|
|
accessing <tt>item.children[0]</tt>.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="lastchild-member" class="member">
|
|
<div id="lastchild-link" class="member-link">
|
|
<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
|
|
</div>
|
|
<div id="lastchild-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The last item contained within this item.This is a shortcut for
|
|
accessing <tt>item.children[item.children.length - 1]</tt>.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="nextsibling-member" class="member">
|
|
<div id="nextsibling-link" class="member-link">
|
|
<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
|
|
</div>
|
|
<div id="nextsibling-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The next item on the same level as this item.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="previoussibling-member" class="member">
|
|
<div id="previoussibling-link" class="member-link">
|
|
<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
|
|
</div>
|
|
<div id="previoussibling-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The previous item on the same level as this item.</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 this item within the list of its parent's children.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Bounding Rectangles</h3>
|
|
|
|
<div id="bounds-member" class="member">
|
|
<div id="bounds-link" class="member-link">
|
|
<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
|
</div>
|
|
<div id="bounds-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The bounding rectangle of the item excluding stroke width.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="strokebounds-member" class="member">
|
|
<div id="strokebounds-link" class="member-link">
|
|
<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
|
|
</div>
|
|
<div id="strokebounds-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Stroke Style</h3>
|
|
|
|
<div id="strokecolor-member" class="member">
|
|
<div id="strokecolor-link" class="member-link">
|
|
<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
|
</div>
|
|
<div id="strokecolor-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The color of the stroke.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Setting the stroke color of a path:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-46">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 35:
|
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
|
|
|
// Set its stroke color to RGB red:
|
|
circle.strokeColor = new RGBColor(1, 0, 0);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="strokewidth-member" class="member">
|
|
<div id="strokewidth-link" class="member-link">
|
|
<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
|
</div>
|
|
<div id="strokewidth-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The width of the stroke.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Setting an item's stroke width:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-47">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 35:
|
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
|
|
|
// Set its stroke color to black:
|
|
circle.strokeColor = 'black';
|
|
|
|
// Set its stroke width to 10:
|
|
circle.strokeWidth = 10;
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="strokecap-member" class="member">
|
|
<div id="strokecap-link" class="member-link">
|
|
<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
|
</div>
|
|
<div id="strokecap-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
|
have a stroke.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>'butt'</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>String('round', 'square', 'butt')</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — A look at the different stroke caps:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-48">
|
|
var line = new Path(new Point(80, 50), new Point(420, 50));
|
|
line.strokeColor = 'black';
|
|
line.strokeWidth = 20;
|
|
|
|
// Select the path, so we can see where the stroke is formed:
|
|
line.selected = true;
|
|
|
|
// Set the stroke cap of the line to be round:
|
|
line.strokeCap = 'round';
|
|
|
|
// Copy the path and set its stroke cap to be square:
|
|
var line2 = line.clone();
|
|
line2.position.y += 50;
|
|
line2.strokeCap = 'square';
|
|
|
|
// Make another copy and set its stroke cap to be butt:
|
|
var line2 = line.clone();
|
|
line2.position.y += 100;
|
|
line2.strokeCap = 'butt';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-48"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="strokejoin-member" class="member">
|
|
<div id="strokejoin-link" class="member-link">
|
|
<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
|
</div>
|
|
<div id="strokejoin-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The shape to be used at the corners of paths when they have a stroke.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>'miter'</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>String</tt> ('miter', 'round', 'bevel')
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — A look at the different stroke joins:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-49">
|
|
var path = new Path();
|
|
path.add(new Point(80, 100));
|
|
path.add(new Point(120, 40));
|
|
path.add(new Point(160, 100));
|
|
path.strokeColor = 'black';
|
|
path.strokeWidth = 20;
|
|
|
|
// Select the path, so we can see where the stroke is formed:
|
|
path.selected = true;
|
|
|
|
var path2 = path.clone();
|
|
path2.position.x += path2.bounds.width * 1.5;
|
|
path2.strokeJoin = 'round';
|
|
|
|
var path3 = path2.clone();
|
|
path3.position.x += path3.bounds.width * 1.5;
|
|
path3.strokeJoin = 'bevel';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="120" id="canvas-49"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="miterlimit-member" class="member">
|
|
<div id="miterlimit-link" class="member-link">
|
|
<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
|
</div>
|
|
<div id="miterlimit-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The miter limit of the stroke.</p>
|
|
<p>When two line segments meet at a sharp angle and miter joins have been
|
|
specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
|
|
extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
|
|
miterLimit imposes a limit on the ratio of the miter length to the
|
|
<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>10</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Fill Style</h3>
|
|
|
|
<div id="fillcolor-member" class="member">
|
|
<div id="fillcolor-link" class="member-link">
|
|
<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
|
</div>
|
|
<div id="fillcolor-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The fill color of the item.</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>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Setting the fill color of a path to red:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-50">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 35:
|
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
|
|
|
// Set the fill color of the circle to RGB red:
|
|
circle.fillColor = new RGBColor(1, 0, 0);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="strokecap-member" class="member">
|
|
<div id="strokecap-link" class="member-link">
|
|
<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
|
</div>
|
|
<div id="strokecap-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
|
have a stroke.</p>
|
|
|
|
|
|
<ul><b>Default:</b>
|
|
<li>
|
|
<tt>'butt'</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>String('round', 'square', 'butt')</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — A look at the different stroke caps:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-51">
|
|
var line = new Path(new Point(80, 50), new Point(420, 50));
|
|
line.strokeColor = 'black';
|
|
line.strokeWidth = 20;
|
|
|
|
// Select the path, so we can see where the stroke is formed:
|
|
line.selected = true;
|
|
|
|
// Set the stroke cap of the line to be round:
|
|
line.strokeCap = 'round';
|
|
|
|
// Copy the path and set its stroke cap to be square:
|
|
var line2 = line.clone();
|
|
line2.position.y += 50;
|
|
line2.strokeCap = 'square';
|
|
|
|
// Make another copy and set its stroke cap to be butt:
|
|
var line2 = line.clone();
|
|
line2.position.y += 100;
|
|
line2.strokeCap = 'butt';
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-51"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- =========================== inherited methods ========================= -->
|
|
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
|
|
|
|
<div id="remove-member" class="member">
|
|
<div id="remove-link" class="member-link">
|
|
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
|
</div>
|
|
<div id="remove-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the item from the project. If the item has children, they are also
|
|
removed.</p>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> the item was removed, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removechildren-member" class="member">
|
|
<div id="removechildren-link" class="member-link">
|
|
<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
|
|
</div>
|
|
<div id="removechildren-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> removing was successful, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="copyto-item-member" class="member">
|
|
<div id="copyto-item-link" class="member-link">
|
|
<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
|
|
</div>
|
|
<div id="copyto-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>When passed a project, copies the item to the project,
|
|
or duplicates it within the same project. When passed an item,
|
|
copies the item into the specified item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
|
|
— the item or project to
|
|
copy the item to
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the new copy of the item
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="clone-member" class="member">
|
|
<div id="clone-link" class="member-link">
|
|
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
|
</div>
|
|
<div id="clone-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Clones the item within the same project and places the copy above the
|
|
item.</p>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the newly cloned item
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Cloning items:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-52">
|
|
var circle = new Path.Circle(new Point(50, 50), 10);
|
|
circle.fillColor = 'red';
|
|
|
|
// Make 20 copies of the circle:
|
|
for (var i = 0; i < 20; i++) {
|
|
var copy = circle.clone();
|
|
|
|
// Distribute the copies horizontally, so we can see them:
|
|
copy.position.x += i * copy.bounds.width;
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="reversechildren-member" class="member">
|
|
<div id="reversechildren-link" class="member-link">
|
|
<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
|
|
</div>
|
|
<div id="reversechildren-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Reverses the order of the item's children</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="rasterize-member" class="member">
|
|
<div id="rasterize-link" class="member-link">
|
|
<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
|
|
</div>
|
|
<div id="rasterize-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Rasterizes the item into a newly created Raster object. The item itself
|
|
is not removed after rasterization.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>resolution:</tt>
|
|
<tt>Number</tt>
|
|
— the resolution of the raster in dpi
|
|
— optional, default: <tt>72</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — the newly created raster item
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Rasterizing an item:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-53">
|
|
var circle = new Path.Circle(new Point(80, 50), 5);
|
|
circle.fillColor = 'red';
|
|
|
|
// Create a rasterized version of the path:
|
|
var raster = circle.rasterize();
|
|
|
|
// Move it 100pt to the right:
|
|
raster.position.x += 100;
|
|
|
|
// Scale the path and the raster by 300%, so we can compare them:
|
|
circle.scale(5);
|
|
raster.scale(5);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Tests</h3>
|
|
|
|
<div id="haschildren-member" class="member">
|
|
<div id="haschildren-link" class="member-link">
|
|
<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
|
|
</div>
|
|
<div id="haschildren-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks if the item contains any children items.</p>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> it has one or more children, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="isabove-item-member" class="member">
|
|
<div id="isabove-item-link" class="member-link">
|
|
<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
|
|
</div>
|
|
<div id="isabove-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks if this item is above the specified item in the stacking order
|
|
of the project.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item to check against
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="isbelow-item-member" class="member">
|
|
<div id="isbelow-item-link" class="member-link">
|
|
<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
|
|
</div>
|
|
<div id="isbelow-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks if the item is below the specified item in the stacking order of
|
|
the project.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item to check against
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Hierarchy Tests</h3>
|
|
|
|
<div id="isparent-item-member" class="member">
|
|
<div id="isparent-item-link" class="member-link">
|
|
<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
|
|
</div>
|
|
<div id="isparent-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks whether the specified item is the parent of the item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item to check against
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="ischild-item-member" class="member">
|
|
<div id="ischild-item-link" class="member-link">
|
|
<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
|
|
</div>
|
|
<div id="ischild-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks whether the specified item is a child of the item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item to check against
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="isdescendant-item-member" class="member">
|
|
<div id="isdescendant-item-link" class="member-link">
|
|
<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
|
|
</div>
|
|
<div id="isdescendant-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks if the item is contained within the specified item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item to check against
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="isancestor-item-member" class="member">
|
|
<div id="isancestor-item-link" class="member-link">
|
|
<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
|
|
</div>
|
|
<div id="isancestor-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks if the item is an ancestor of the specified item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— the item to check against
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item is an ancestor of the specified
|
|
item, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="isgroupedwith-item-member" class="member">
|
|
<div id="isgroupedwith-item-link" class="member-link">
|
|
<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
|
|
</div>
|
|
<div id="isgroupedwith-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks whether the item is grouped with the specified item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Transform Functions</h3>
|
|
|
|
<div id="scale-scale-member" class="member">
|
|
<div id="scale-scale-link" class="member-link">
|
|
<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
|
|
</div>
|
|
<div id="scale-scale-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Scales the item by the given value from its center point, or optionally
|
|
from a supplied point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>scale:</tt>
|
|
<tt>Number</tt>
|
|
— the scale factor
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>center:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
— optional, default: <tt>the center point of the item</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Scaling an item from its center point:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-54">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 20:
|
|
var circle = new Path.Circle(new Point(80, 50), 20);
|
|
circle.fillColor = 'red';
|
|
|
|
// Scale the path by 150% from its center point
|
|
circle.scale(1.5);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Scaling an item from a specific point:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-55">
|
|
// Create a circle shaped path at { x: 80, y: 50 }
|
|
// with a radius of 20:
|
|
var circle = new Path.Circle(new Point(80, 50), 20);
|
|
circle.fillColor = 'red';
|
|
|
|
// Scale the path 150% from its bottom left corner
|
|
circle.scale(1.5, circle.bounds.bottomLeft);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<div id="scale-sx-sy-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>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-sx-sy', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Scales the item by the given values from its center point, or optionally
|
|
from a supplied point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>sx:</tt>
|
|
<tt>Number</tt>
|
|
— the horizontal scale factor
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>sy:</tt>
|
|
<tt>Number</tt>
|
|
— the vertical scale factor
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>center:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
— optional, default: <tt>the center point of the item</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Scaling an item horizontally by 300%:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-56">
|
|
// Create a circle shaped path at { x: 100, y: 50 }
|
|
// with a radius of 20:
|
|
var circle = new Path.Circle(new Point(100, 50), 20);
|
|
circle.fillColor = 'red';
|
|
|
|
// Scale the path horizontally by 300%
|
|
circle.scale(3, 1);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="translate-delta-member" class="member">
|
|
<div id="translate-delta-link" class="member-link">
|
|
<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
|
|
</div>
|
|
<div id="translate-delta-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Translates (moves) the item by the given offset point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>delta:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— the offset to translate the item by
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="rotate-angle-member" class="member">
|
|
<div id="rotate-angle-link" class="member-link">
|
|
<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
|
|
</div>
|
|
<div id="rotate-angle-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Rotates the item by a given angle around the given point.</p>
|
|
<p>Angles are oriented clockwise and measured in degrees.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>angle:</tt>
|
|
<tt>Number</tt>
|
|
— the rotation angle
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>center:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
— optional, default: <tt>the center point of the item</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p><b>See also:</b>
|
|
<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
|
|
</p>
|
|
|
|
<p>
|
|
<b>Example</b> — Rotating an item:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-57">
|
|
// Create a rectangle shaped path with its top left
|
|
// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
|
|
var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
|
|
path.fillColor = 'black';
|
|
|
|
// Rotate the path by 30 degrees:
|
|
path.rotate(30);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Rotating an item around a specific point:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-58">
|
|
// Create a rectangle shaped path with its top left
|
|
// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
|
|
var topLeft = new Point(175, 50);
|
|
var size = new Size(100, 100);
|
|
var path = new Path.Rectangle(topLeft, size);
|
|
path.fillColor = 'black';
|
|
|
|
// Draw a circle shaped path in the center of the view,
|
|
// to show the rotation point:
|
|
var circle = new Path.Circle(view.center, 5);
|
|
circle.fillColor = 'white';
|
|
|
|
// Each frame rotate the path 3 degrees around the center point
|
|
// of the view:
|
|
function onFrame(event) {
|
|
path.rotate(3, view.center);
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="shear-point-member" class="member">
|
|
<div id="shear-point-link" class="member-link">
|
|
<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
|
|
</div>
|
|
<div id="shear-point-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Shears the item by the given value from its center point, or optionally
|
|
by a supplied point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>point:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>center:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
— optional, default: <tt>the center point of the item</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p><b>See also:</b>
|
|
<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<div id="shear-shx-shy-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>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-shx-shy', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Shears the item by the given values from its center point, or optionally
|
|
by a supplied point.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>shx:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>shy:</tt>
|
|
<tt>Number</tt>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>center:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
— optional, default: <tt>the center point of the item</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p><b>See also:</b>
|
|
<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="transform-matrix-flags-member" class="member">
|
|
<div id="transform-matrix-flags-link" class="member-link">
|
|
<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
|
|
</div>
|
|
<div id="transform-matrix-flags-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Transform the item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>matrix:</tt>
|
|
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>flags:</tt>
|
|
<tt>Array</tt>
|
|
— Array of any of the following: 'objects', 'children',
|
|
'fill-gradients', 'fill-patterns', 'stroke-patterns', 'lines'.
|
|
Default: ['objects', 'children']
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Hierarchy Operations</h3>
|
|
|
|
<div id="appendtop-item-member" class="member">
|
|
<div id="appendtop-item-link" class="member-link">
|
|
<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
|
|
</div>
|
|
<div id="appendtop-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Inserts the specified item as a child of the item by appending it to
|
|
the list of children and moving it above all other children. You can
|
|
use this function for groups, compound paths and layers.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item that will be appended as a child
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="appendbottom-item-member" class="member">
|
|
<div id="appendbottom-item-link" class="member-link">
|
|
<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
|
|
</div>
|
|
<div id="appendbottom-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Inserts the specified item as a child of this item by appending it to
|
|
the list of children and moving it below all other children. You can
|
|
use this function for groups, compound paths and layers.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item that will be appended as a child
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="moveabove-item-member" class="member">
|
|
<div id="moveabove-item-link" class="member-link">
|
|
<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
|
|
</div>
|
|
<div id="moveabove-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Moves this item above the specified item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— The item above which it should be moved
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> it was moved, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="movebelow-item-member" class="member">
|
|
<div id="movebelow-item-link" class="member-link">
|
|
<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
|
|
</div>
|
|
<div id="movebelow-item-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Moves the item below the specified item.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>item:</tt>
|
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
— the item below which it should be moved
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — <tt>true</tt> it was moved, <tt>false</tt> otherwise
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Remove On Event</h3>
|
|
|
|
<div id="removeon-object-member" class="member">
|
|
<div id="removeon-object-link" class="member-link">
|
|
<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
|
|
</div>
|
|
<div id="removeon-object-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the item when the events specified in the passed object literal
|
|
occur.</p>
|
|
<p>The object literal can contain the following values:</p>
|
|
<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
|
|
fired: <tt>object.move = true</tt></p>
|
|
<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
|
|
fired: <tt>object.drag = true</tt></p>
|
|
<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
|
|
fired: <tt>object.down = true</tt></p>
|
|
<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
|
|
fired: <tt>object.up = true</tt></p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>object:</tt>
|
|
<tt>Object</tt>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Click and drag below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-59">
|
|
function onMouseDrag(event) {
|
|
// Create a circle shaped path at the mouse position,
|
|
// 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,
|
|
down: true
|
|
});
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-59"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removeonmove-member" class="member">
|
|
<div id="removeonmove-link" class="member-link">
|
|
<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
|
|
</div>
|
|
<div id="removeonmove-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Move your mouse below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-60">
|
|
function onMouseMove(event) {
|
|
// Create a circle shaped path at the mouse position,
|
|
// 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();
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-60"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removeondown-member" class="member">
|
|
<div id="removeondown-link" class="member-link">
|
|
<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
|
|
</div>
|
|
<div id="removeondown-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Click a few times below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-61">
|
|
function onMouseDown(event) {
|
|
// Create a circle shaped path at the mouse position,
|
|
// with a radius of 10:
|
|
var path = new Path.Circle(event.point, 10);
|
|
path.fillColor = 'black';
|
|
|
|
// Remove the path, next time the mouse is pressed:
|
|
path.removeOnDown();
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-61"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removeondrag-member" class="member">
|
|
<div id="removeondrag-link" class="member-link">
|
|
<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
|
|
</div>
|
|
<div id="removeondrag-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Click and drag below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-62">
|
|
function onMouseDrag(event) {
|
|
// Create a circle shaped path at the mouse position,
|
|
// 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();
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-62"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="removeonup-member" class="member">
|
|
<div id="removeonup-link" class="member-link">
|
|
<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
|
|
</div>
|
|
<div id="removeonup-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
|
|
|
|
|
|
|
|
<p>
|
|
<b>Example</b> — Click a few times below:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-63">
|
|
function onMouseDown(event) {
|
|
// Create a circle shaped path at the mouse position,
|
|
// 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();
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="200" id="canvas-63"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- =========================== copyright notice ========================= -->
|
|
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
<div class="content-end"></div>
|
|
|
|
</body> |