<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 manipulation 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 <ahref="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
<p>An array of all open projects is accessible through the <ahref="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
<p>Creates a Paper.js project containing one empty <ahref="../classes/Layer.html"><tt>Layer</tt></a>, referenced by <ahref="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a>.</p>
<p>Note that when working with PaperScript, a project is automatically created for us and the <ahref="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>element:</tt>
<tt>HTMLCanvasElement</tt>⟋<tt>String</tt>
— the HTML canvas element that should be used as the element for the view, or an ID string by which to find the element.
<p>Removes this project from the <ahref="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list, and also removes its view, if one was defined.</p>
<p>Perform a hit-test on the items contained within the project at the location of the specified point.</p>
<p>The options object allows you to control the specifics of the hit-test and may contain a combination of the following values:</p>
<ulclass="member-list">
<h4>Options:</h4>
<li><tt>options.tolerance: <tt>Number</tt></tt>— the tolerance of the hit-test — default: <tt><ahref="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
<li><tt>options.class: <tt>Function</tt></tt>— only hit-test again a certain item class and its sub-classes: <tt>Group</tt>, <tt>Layer</tt>, <tt>Path</tt>, <tt>CompoundPath</tt>, <tt>Shape</tt>, <tt>Raster</tt>, <tt>SymbolItem</tt>, <tt>PointText</tt>, …</li>
<li><tt>options.fill: <tt>Boolean</tt></tt>— hit-test the fill of items — default: <tt>true</tt></li>
<li><tt>options.stroke: <tt>Boolean</tt></tt>— hit-test the stroke of path items, taking into account the setting of stroke color and width — default: <tt>true</tt></li>
<li><tt>options.segments: <tt>Boolean</tt></tt>— hit-test for <ahref="../classes/Segment.html#point"><tt>segment.point</tt></a> of <ahref="../classes/Path.html"><tt>Path</tt></a> items — default: <tt>true</tt></li>
<li><tt>options.curves: <tt>Boolean</tt></tt>— hit-test the curves of path items, without taking the stroke color or width into account</li>
<li><tt>options.handles: <tt>Boolean</tt></tt>— hit-test for the handles (<ahref="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <ahref="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</li>
<li><tt>options.ends: <tt>Boolean</tt></tt>— only hit-test for the first or last segment points of open path items</li>
<li><tt>options.bounds: <tt>Boolean</tt></tt>— hit-test the corners and side-centers of the bounding rectangle of items (<ahref="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
<li><tt>options.center: <tt>Boolean</tt></tt>— hit-test the <ahref="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items (<ahref="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
<li><tt>options.guides: <tt>Boolean</tt></tt>— hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
<li><tt>options.selected: <tt>Boolean</tt></tt>— only hit selected items</li>
</ul>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<ahref="../classes/Point.html"><tt>Point</tt></a>
— the point where the hit-test should be performed
<tt><ahref="../classes/HitResult.html"><tt>HitResult</tt></a></tt> — a hit result object that contains more information about what exactly was hit or <code>null</code> if nothing was hit
<p>Fetch items contained within the project whose properties match the criteria in the specified object.</p>
<p>Extended matching of properties is possible by providing a comparator function or regular expression. Matching points, colors only work as a comparison of the full object, not partial matching (e.g. only providing the x- coordinate to match all points with that x-value). Partial matching does work for <ahref="../classes/Item.html#data"><tt>item.data</tt></a>.</p>
<p>Matching items against a rectangular area is also possible, by setting either <code>match.inside</code> or <code>match.overlapping</code> to a rectangle describing the area in which the items either have to be fully or partly contained.</p>
<ulclass="member-list">
<h4>Options:</h4>
<li><tt>match.recursive: <tt>Boolean</tt></tt>— whether to loop recursively through all children, or stop at the current level — default: <tt>true</tt></li>
<li><tt>match.match: <tt>Function</tt></tt>— a match function to be called for each item, allowing the definition of more flexible item checks that are not bound to properties. If no other match properties are defined, this function can also be passed instead of the <code>match</code> object</li>
<li><tt>match.class: <tt>Function</tt></tt>— the constructor function of the item type to match against</li>
<li><tt>match.inside: <ahref="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>— the rectangle in which the items need to be fully contained</li>
<li><tt>match.overlapping: <ahref="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>— the rectangle with which the items need to at least partly overlap</li>
</ul>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>match:</tt>
<tt>Object</tt>⟋<tt>Function</tt>
— the criteria to match against
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt>Array of <ahref="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching items contained in the project
<p>Fetch the first item contained within the project whose properties match the criteria in the specified object. Extended matching is possible by providing a compare function or regular expression. Matching points, colors only work as a comparison of the full object, not partial matching (e.g. only providing the x- coordinate to match all points with that x-value). Partial matching does work for <ahref="../classes/Item.html#data"><tt>item.data</tt></a>. See <ahref="../classes/Project.html#getitems-match"><tt>getItems(match)</tt></a> for a selection of illustrated examples.</p>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>match:</tt>
<tt>Object</tt>⟋<tt>Function</tt>
— the criteria to match against
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><ahref="../classes/Item.html"><tt>Item</tt></a></tt> — the first item in the project matching the given criteria
<p>Exports (serializes) the project with all its layers and child items to a JSON data object or string.</p>
<ulclass="member-list">
<h4>Options:</h4>
<li><tt>options.asString: <tt>Boolean</tt></tt>— whether the JSON is returned as a <code>Object</code> or a <code>String</code>— default: <tt>true</tt></li>
<li><tt>options.precision: <tt>Number</tt></tt>— the amount of fractional digits in numbers used in JSON data — default: <tt>5</tt></li>
</ul>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>options:</tt>
<tt>Object</tt>
— the serialization options
— optional
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>String</tt></tt> — the exported JSON data
<p>Imports (deserializes) the stored JSON data into the project. Note that the project is not cleared first. You can call <ahref="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
<p>Exports the project with all its layers and child items as an SVG DOM, all contained in one top level SVG group node.</p>
<ulclass="member-list">
<h4>Options:</h4>
<li><tt>options.asString: <tt>Boolean</tt></tt>— whether a SVG node or a <code>String</code> is to be returned — default: <tt>false</tt></li>
<li><tt>options.precision: <tt>Number</tt></tt>— the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
<li><tt>options.matchShapes: <tt>Boolean</tt></tt>— whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match — default: <tt>false</tt></li>
<li><tt>options.embedImages: <tt>Boolean</tt></tt>— whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. — default: <tt>true</tt></li>
</ul>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>options:</tt>
<tt>Object</tt>
— the export options
— optional
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>SVGElement</tt></tt> — the project converted to an SVG node
<p>Converts the provided SVG content into Paper.js items and adds them to the active layer of this project. Note that the project is not cleared first. You can call <ahref="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
<li><tt>options.expandShapes: <tt>Boolean</tt></tt>— whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
<li><tt>options.onLoad: undefined</tt>— (item, svg) {Function} the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external files.</li>
<li><tt>options.applyMatrix: <tt>Boolean</tt></tt>— whether imported items should have their transformation matrices applied to their contents or not — default: <tt><ahref="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.applyMatrix</tt></li>
— the SVG content to import, either as a SVG DOM node, a string containing SVG content, or a string describing the URL of the SVG file to fetch.
<p>Imports the provided external SVG file, converts it into Paper.js items and adds them to the active layer of this project. Note that the project is not cleared first. You can call <ahref="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
— the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external files.
Copyright © 2011—2016 <ahref="http://www.lehni.org"target="_blank">Jürg Lehni</a>&<ahref="http://www.jonathanpuckey.com"target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
