mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-07 13:22:07 -05:00
567 lines
No EOL
17 KiB
HTML
567 lines
No EOL
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Project</title>
|
|
<base target="classFrame">
|
|
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
|
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
|
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
|
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
|
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
|
</head>
|
|
<body class="reference">
|
|
<div class="reference-class">
|
|
<h1>Project</h1>
|
|
|
|
<p>A Project object in Paper.js is what usually is referred to as the
|
|
document: The top level object that holds all the items contained in the
|
|
scene graph. As the term document is already taken in the browser context,
|
|
it is called Project.</p>
|
|
<p>Projects allow the manipluation of the styles that are applied to all newly
|
|
created items, give access to the selected items, and will in future versions
|
|
offer ways to query for items in the scene graph defining specific
|
|
requirements, and means to persist and load from different formats, such as
|
|
SVG and PDF.</p>
|
|
<p>The currently active project can be accessed through the
|
|
<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
|
|
<p>An array of all open projects is accessible through the
|
|
<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
|
|
|
|
</div>
|
|
|
|
<!-- ============================== constructors ========================= -->
|
|
<div class="reference-members"><h2>Constructors</h2>
|
|
|
|
|
|
<div id="project-member" class="member">
|
|
<div id="project-link" class="member-link">
|
|
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
|
|
</div>
|
|
<div id="project-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Creates a Paper.js project.</p>
|
|
<p>When working with PaperScript, a project is automatically created for us
|
|
and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="reference-members"><h2>Properties</h2>
|
|
|
|
|
|
<div id="currentstyle-member" class="member">
|
|
<div id="currentstyle-link" class="member-link">
|
|
<a name="currentstyle" href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
|
|
</div>
|
|
<div id="currentstyle-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('currentstyle', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The currently active path style. All selected items and newly
|
|
created items will be styled with this style.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-0">
|
|
project.currentStyle = {
|
|
fillColor: 'red',
|
|
strokeColor: 'black',
|
|
strokeWidth: 5
|
|
}
|
|
|
|
// The following paths will take over all style properties of
|
|
// the current style:
|
|
var path = new Path.Circle(new Point(75, 50), 30);
|
|
var path2 = new Path.Circle(new Point(175, 50), 20);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
<b>Example</b>
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-1">
|
|
project.currentStyle.fillColor = 'red';
|
|
|
|
// The following path will take over the fill color we just set:
|
|
var path = new Path.Circle(new Point(75, 50), 30);
|
|
var path2 = new Path.Circle(new Point(175, 50), 20);
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="index-member" class="member">
|
|
<div id="index-link" class="member-link">
|
|
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
|
</div>
|
|
<div id="index-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="selecteditems-member" class="member">
|
|
<div id="selecteditems-link" class="member-link">
|
|
<a name="selecteditems" href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
|
|
</div>
|
|
<div id="selecteditems-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selecteditems', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The selected items contained within the project.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Project Hierarchy</h3>
|
|
|
|
<div id="layers-member" class="member">
|
|
<div id="layers-link" class="member-link">
|
|
<a name="layers" href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
|
|
</div>
|
|
<div id="layers-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layers', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The layers contained within the project.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="activelayer-member" class="member">
|
|
<div id="activelayer-link" class="member-link">
|
|
<a name="activelayer" href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
|
|
</div>
|
|
<div id="activelayer-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activelayer', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The layer which is currently active. New items will be created on this
|
|
layer by default.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Layer.html"><tt>Layer</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="symbols-member" class="member">
|
|
<div id="symbols-link" class="member-link">
|
|
<a name="symbols" href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
|
|
</div>
|
|
<div id="symbols-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbols', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The symbols contained within the project.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="views-member" class="member">
|
|
<div id="views-link" class="member-link">
|
|
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
|
</div>
|
|
<div id="views-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The views contained within the project.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="activeview-member" class="member">
|
|
<div id="activeview-link" class="member-link">
|
|
<a name="activeview" href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
|
|
</div>
|
|
<div id="activeview-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activeview', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The view which is currently active.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/View.html"><tt>View</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- ============================== methods ================================ -->
|
|
<div class="reference-members"><h2>Methods</h2>
|
|
|
|
|
|
<div id="activate-member" class="member">
|
|
<div id="activate-link" class="member-link">
|
|
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
|
</div>
|
|
<div id="activate-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Activates this project, so all newly created items will be placed
|
|
in it.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="remove-member" class="member">
|
|
<div id="remove-link" class="member-link">
|
|
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
|
</div>
|
|
<div id="remove-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="selectall-member" class="member">
|
|
<div id="selectall-link" class="member-link">
|
|
<a name="selectall" href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
|
|
</div>
|
|
<div id="selectall-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selectall', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Selects all items in the project.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="deselectall-member" class="member">
|
|
<div id="deselectall-link" class="member-link">
|
|
<a name="deselectall" href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
|
|
</div>
|
|
<div id="deselectall-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('deselectall', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Deselects all selected items in the project.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="hittest-point-member" class="member">
|
|
<div id="hittest-point-link" class="member-link">
|
|
<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
|
|
</div>
|
|
<div id="hittest-point-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Perform a hit test on the items contained within the project at the
|
|
location of the specified point.</p>
|
|
<p>The optional options object allows you to control the specifics of the
|
|
hit test and may contain a combination of the following values:</p>
|
|
<p><b>options.tolerance:</b> <tt>Number</tt> - The tolerance of the hit test
|
|
in points.</p>
|
|
<p><b>options.type:</b> Only hit test again a certain item
|
|
type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
|
|
<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
|
|
<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
|
|
items, taking into account stroke width.</p>
|
|
<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
|
|
<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
|
|
<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
|
|
(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
|
|
<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
|
|
last segment points of open path items.</p>
|
|
<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
|
|
side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
|
|
<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
|
|
<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
|
|
(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
|
|
<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
|
|
<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
|
|
<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>point:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
— The point where the hit test should be performed
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<tt>options:</tt>
|
|
<tt>Object</tt>
|
|
|
|
— optional, default: <tt>{ fill: true, stroke: true, segments: true,
|
|
tolerance: true }</tt>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt> — A hit result object that contains more
|
|
information about what exactly was hit or <tt>null</tt> if nothing was
|
|
hit.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- =========================== copyright notice ========================= -->
|
|
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
<div class="content-end"></div>
|
|
|
|
</body> |