2011-06-12 14:04:25 -04:00
<!DOCTYPE html>
< html >
< head >
< 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 >
2011-06-27 09:28:11 -04:00
< p > A Project object in Paper.js is what usually is refered 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 global
{@see _global_#project} variable.< / p >
< p > An array of all open projects is accessible through the global
{@see _global_#projects} variable.< / p >
2011-06-17 06:41:47 -04:00
2011-06-12 14:04:25 -04:00
< / 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" >
2011-06-27 09:28:11 -04:00
< p > Creates a Paper.js project.< / p >
< p > When working with PaperScript, a project is automatically created for us
and the global {@see _global_#project} variable points to it.< / p >
2011-06-12 14:04:25 -04:00
< / 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 >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-0" >
2011-06-12 14:04:25 -04:00
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 >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-0" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< p >
< b > Example< / b >
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-1" >
2011-06-12 14:04:25 -04:00
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 >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-1" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / 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 global projects array.< / p >
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / 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 ================================ -->
2011-06-17 06:41:47 -04:00
< div class = "reference-members" > < h2 > Methods< / h2 >
2011-06-12 14:04:25 -04:00
< 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 >
2011-06-27 09:28:11 -04:00
< / 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 global {@see _global_#projects} list.< / p >
2011-06-12 14:04:25 -04:00
< / 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 >
<!-- =========================== copyright notice ========================= -->
2011-06-17 06:41:47 -04:00
< 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 >
2011-06-12 14:04:25 -04:00
< / body >
