source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/Project.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 15.3 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Project</title>
6<base target="class-frame">
7<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
8<script src="../assets/js/paper.js"></script>
9<script src="../assets/js/jquery.js"></script>
10<script src="../assets/js/codemirror.js"></script>
11<script src="../assets/js/docs.js"></script>
12</head>
13<body class="reference">
14<div class="reference-class">
15<h1>Project</h1>
16
17<p>A Project object in Paper.js is what usually is referred to as the
18document: The top level object that holds all the items contained in the
19scene graph. As the term document is already taken in the browser context,
20it is called Project.</p>
21<p>Projects allow the manipluation of the styles that are applied to all newly
22created items, give access to the selected items, and will in future versions
23offer ways to query for items in the scene graph defining specific
24requirements, and means to persist and load from different formats, such as
25SVG and PDF.</p>
26<p>The currently active project can be accessed through the
27<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
28<p>An array of all open projects is accessible through the
29<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
30
31</div>
32
33<!-- ============================== constructors ========================= -->
34<div class="reference-members"><h2>Constructors</h2>
35
36
37<div id="project-view" class="member">
38<div class="member-link">
39<a name="project-view" href="#project-view"><tt><b>Project</b>(view)</tt></a>
40</div>
41<div class="member-description hidden">
42<div class="member-text">
43<p>Creates a Paper.js project containing one empty <a href="../classes/Layer.html"><tt>Layer</tt></a>, referenced
44by <a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a>.</p>
45<p>Note that when working with PaperScript, a project is automatically
46created for us and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
47
48<ul><b>Parameters:</b>
49
50<li>
51<tt>view:</tt>
52<a href="../classes/View.html"><tt>View</tt></a> / <tt>HTMLCanvasElement</tt>
53&mdash;&nbsp;Either a view object or an HTML
54Canvas element that should be wrapped in a newly created view.
55
56</li>
57
58</ul>
59
60
61
62
63</div>
64</div>
65</div>
66
67</div>
68
69
70
71
72
73 <div class="reference-members"><h2>Properties</h2>
74
75
76<div id="view" class="member">
77<div class="member-link">
78<a name="view" href="#view"><tt><b>view</b></tt></a>
79</div>
80<div class="member-description hidden">
81
82<div class="member-text">
83 <p>The reference to the project's view.</p>
84
85
86 <ul><b>Type:</b>
87 <li>
88 <a href="../classes/View.html"><tt>View</tt></a>
89 </li>
90 </ul>
91
92
93</div>
94
95</div>
96</div>
97
98
99<div id="currentstyle" class="member">
100<div class="member-link">
101<a name="currentstyle" href="#currentstyle"><tt><b>currentStyle</b></tt></a>
102</div>
103<div class="member-description hidden">
104
105<div class="member-text">
106 <p>The currently active path style. All selected items and newly
107created items will be styled with this style.</p>
108
109
110 <ul><b>Type:</b>
111 <li>
112 <a href="../classes/Style.html"><tt>Style</tt></a>
113 </li>
114 </ul>
115
116 <p>
117<b>Example</b>
118</p>
119
120<div class="paperscript split">
121
122<div class="buttons">
123<div class="button run">Run</div>
124</div>
125
126<script type="text/paperscript" canvas="canvas-0">
127project.currentStyle = {
128 fillColor: 'red',
129 strokeColor: 'black',
130 strokeWidth: 5
131}
132
133// The following paths will take over all style properties of
134// the current style:
135var path = new Path.Circle(new Point(75, 50), 30);
136var path2 = new Path.Circle(new Point(175, 50), 20);
137</script>
138<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
139</div>
140
141
142<p>
143<b>Example</b>
144</p>
145
146<div class="paperscript split">
147
148<div class="buttons">
149<div class="button run">Run</div>
150</div>
151
152<script type="text/paperscript" canvas="canvas-1">
153project.currentStyle.fillColor = 'red';
154
155// The following path will take over the fill color we just set:
156var path = new Path.Circle(new Point(75, 50), 30);
157var path2 = new Path.Circle(new Point(175, 50), 20);
158</script>
159<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
160</div>
161
162
163</div>
164
165</div>
166</div>
167
168
169<div id="index" class="member">
170<div class="member-link">
171<a name="index" href="#index"><tt><b>index</b></tt></a>
172</div>
173<div class="member-description hidden">
174
175<div class="member-text">
176 <p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
177
178 <p>Read only.</p>
179
180
181 <ul><b>Type:</b>
182 <li>
183 <tt>Number</tt>
184 </li>
185 </ul>
186
187
188</div>
189
190</div>
191</div>
192
193
194<div id="selecteditems" class="member">
195<div class="member-link">
196<a name="selecteditems" href="#selecteditems"><tt><b>selectedItems</b></tt></a>
197</div>
198<div class="member-description hidden">
199
200<div class="member-text">
201 <p>The selected items contained within the project.</p>
202
203 <p>Read only.</p>
204
205
206 <ul><b>Type:</b>
207 <li>
208 Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
209 </li>
210 </ul>
211
212
213</div>
214
215</div>
216</div>
217
218
219<div id="options" class="member">
220<div class="member-link">
221<a name="options" href="#options"><tt><b>options</b></tt></a>
222</div>
223<div class="member-description hidden">
224
225<div class="member-text">
226 <p><b>options.handleSize:</b> </p>
227<p><b>options.hitTolerance:</b></p>
228
229
230 <ul><b>Type:</b>
231 <li>
232 <tt>Object</tt>
233 </li>
234 </ul>
235
236
237</div>
238
239</div>
240</div>
241
242
243 <h3>Project Hierarchy</h3>
244
245<div id="layers" class="member">
246<div class="member-link">
247<a name="layers" href="#layers"><tt><b>layers</b></tt></a>
248</div>
249<div class="member-description hidden">
250
251<div class="member-text">
252 <p>The layers contained within the project.</p>
253
254
255 <ul><b>Type:</b>
256 <li>
257 Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
258 </li>
259 </ul>
260
261
262</div>
263
264</div>
265</div>
266
267
268<div id="activelayer" class="member">
269<div class="member-link">
270<a name="activelayer" href="#activelayer"><tt><b>activeLayer</b></tt></a>
271</div>
272<div class="member-description hidden">
273
274<div class="member-text">
275 <p>The layer which is currently active. New items will be created on this
276layer by default.</p>
277
278
279 <ul><b>Type:</b>
280 <li>
281 <a href="../classes/Layer.html"><tt>Layer</tt></a>
282 </li>
283 </ul>
284
285
286</div>
287
288</div>
289</div>
290
291
292<div id="symbols" class="member">
293<div class="member-link">
294<a name="symbols" href="#symbols"><tt><b>symbols</b></tt></a>
295</div>
296<div class="member-description hidden">
297
298<div class="member-text">
299 <p>The symbols contained within the project.</p>
300
301
302 <ul><b>Type:</b>
303 <li>
304 Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
305 </li>
306 </ul>
307
308
309</div>
310
311</div>
312</div>
313
314 </div>
315
316
317
318<!-- ============================== methods ================================ -->
319 <div class="reference-members"><h2>Methods</h2>
320
321
322<div id="activate" class="member">
323<div class="member-link">
324<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
325</div>
326<div class="member-description hidden">
327<div class="member-text">
328 <p>Activates this project, so all newly created items will be placed
329in it.</p>
330
331
332
333
334</div>
335</div>
336</div>
337
338
339<div id="isempty" class="member">
340<div class="member-link">
341<a name="isempty" href="#isempty"><tt><b>isEmpty</b>()</tt></a>
342</div>
343<div class="member-description hidden">
344<div class="member-text">
345 <p>Specifies whether the project has any content or not. Note that since
346projects by default are created with one empty layer, this returns alos
347<tt>true</tt> if that layer exists but is itself empty.</p>
348
349
350 <ul><b>Returns:</b>
351
352 <li>
353<tt></tt>&nbsp;&mdash;&nbsp;Boolean
354</li>
355
356 </ul>
357
358
359
360</div>
361</div>
362</div>
363
364
365<div id="remove" class="member">
366<div class="member-link">
367<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
368</div>
369<div class="member-description hidden">
370<div class="member-text">
371 <p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list, and also
372removes its view, if one was defined.</p>
373
374
375
376
377</div>
378</div>
379</div>
380
381
382<div id="selectall" class="member">
383<div class="member-link">
384<a name="selectall" href="#selectall"><tt><b>selectAll</b>()</tt></a>
385</div>
386<div class="member-description hidden">
387<div class="member-text">
388 <p>Selects all items in the project.</p>
389
390
391
392
393</div>
394</div>
395</div>
396
397
398<div id="deselectall" class="member">
399<div class="member-link">
400<a name="deselectall" href="#deselectall"><tt><b>deselectAll</b>()</tt></a>
401</div>
402<div class="member-description hidden">
403<div class="member-text">
404 <p>Deselects all selected items in the project.</p>
405
406
407
408
409</div>
410</div>
411</div>
412
413
414<div id="hittest-point" class="member">
415<div class="member-link">
416<a name="hittest-point" href="#hittest-point"><tt><b>hitTest</b>(point[, options])</tt></a>
417</div>
418<div class="member-description hidden">
419<div class="member-text">
420 <p>Perform a hit test on the items contained within the project at the
421location of the specified point.</p>
422<p>The options object allows you to control the specifics of the hit test
423and may contain a combination of the following values:</p>
424<p><b>options.tolerance:</b> <tt>Number</tt> – the tolerance of the hit test
425in points, can also be controlled through
426<a href="../classes/Project.html#options"><tt>project.options</tt></a><tt>.hitTolerance</tt>.</p>
427<p><b>options.type:</b> Only hit test again a certain item
428type: <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>
429<p><b>options.fill:</b> <tt>Boolean</tt> – hit test the fill of items.</p>
430<p><b>options.stroke:</b> <tt>Boolean</tt> – hit test the curves of path
431items, taking into account stroke width.</p>
432<p><b>options.segments:</b> <tt>Boolean</tt> – hit test for
433<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
434<p><b>options.handles:</b> <tt>Boolean</tt> – hit test for the handles
435(<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>
436<p><b>options.ends:</b> <tt>Boolean</tt> – only hit test for the first or
437last segment points of open path items.</p>
438<p><b>options.bounds:</b> <tt>Boolean</tt> – hit test the corners and
439side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
440<p><b>options.center:</b> <tt>Boolean</tt> – hit test the
441<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
442(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
443<p><b>options.guides:</b> <tt>Boolean</tt> – hit test items that have
444<tt>Item#guide</tt> set to <tt>true</tt>.</p>
445<p><b>options.selected:</b> <tt>Boolean</tt> – only hit selected items.</p>
446
447<ul><b>Parameters:</b>
448
449<li>
450<tt>point:</tt>
451<a href="../classes/Point.html"><tt>Point</tt></a>
452&mdash;&nbsp;The point where the hit test should be performed
453
454</li>
455
456<li>
457<tt>options:</tt>
458<tt>Object</tt>
459
460&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
461tolerance: true }</tt>
462</li>
463
464</ul>
465
466
467 <ul><b>Returns:</b>
468
469 <li>
470<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;a hit result object that contains more
471information about what exactly was hit or <tt>null</tt> if nothing was
472hit
473</li>
474
475 </ul>
476
477
478
479</div>
480</div>
481</div>
482
483
484<h3>Importing / Exporting JSON and SVG</h3>
485
486<div id="exportjson" class="member">
487<div class="member-link">
488<a name="exportjson" href="#exportjson"><tt><b>exportJSON</b>([options])</tt></a>
489</div>
490<div class="member-description hidden">
491<div class="member-text">
492 <p>Exports (serializes) the project with all its layers and child items to
493a JSON data string.</p>
494<p>The options object offers control over some aspects of the SVG export:</p>
495<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
496digits in numbers used in JSON data.</p>
497
498<ul><b>Parameters:</b>
499
500<li>
501<tt>options:</tt>
502<tt>Object</tt>
503&mdash;&nbsp;the serialization options
504&mdash;&nbsp;optional, default: <tt>{ precision: 5 }</tt>
505</li>
506
507</ul>
508
509
510 <ul><b>Returns:</b>
511
512 <li>
513<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;the exported JSON data
514</li>
515
516 </ul>
517
518
519
520</div>
521</div>
522</div>
523
524
525<div id="importjson-json" class="member">
526<div class="member-link">
527<a name="importjson-json" href="#importjson-json"><tt><b>importJSON</b>(json)</tt></a>
528</div>
529<div class="member-description hidden">
530<div class="member-text">
531 <p>Imports (deserializes) the stored JSON data into the project.</p>
532<p>Note that the project is not cleared first. You can call
533<tt>Project#clear</tt>() to do so.</p>
534
535<ul><b>Parameters:</b>
536
537<li>
538<tt>json:</tt>
539<tt>String</tt>
540&mdash;&nbsp;the JSON data to import from.
541
542</li>
543
544</ul>
545
546
547
548
549</div>
550</div>
551</div>
552
553
554<div id="exportsvg" class="member">
555<div class="member-link">
556<a name="exportsvg" href="#exportsvg"><tt><b>exportSVG</b>([options])</tt></a>
557</div>
558<div class="member-description hidden">
559<div class="member-text">
560 <p>Exports the project with all its layers and child items as an SVG DOM,
561all contained in one top level SVG group node.</p>
562<p>The options object offers control over some aspects of the SVG export:</p>
563<p><b>options.asString:</b> <tt>Boolean</tt> – wether a SVG node or a String
564is to be returned.</p>
565<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
566digits in numbers used in SVG data.</p>
567<p><b>options.matchShapes:</b> <tt>Boolean</tt> – wether imported path
568items should tried to be converted to shape items, if their geometries
569match.</p>
570
571<ul><b>Parameters:</b>
572
573<li>
574<tt>options:</tt>
575<tt>Object</tt>
576&mdash;&nbsp;the export options.
577&mdash;&nbsp;optional, default: <tt>{ asString: false, precision: 5,
578matchShapes: false }</tt>
579</li>
580
581</ul>
582
583
584 <ul><b>Returns:</b>
585
586 <li>
587<tt><tt>SVGSVGElement</tt></tt>&nbsp;&mdash;&nbsp;the project converted to an SVG node
588</li>
589
590 </ul>
591
592
593
594</div>
595</div>
596</div>
597
598
599<div id="importsvg-svg" class="member">
600<div class="member-link">
601<a name="importsvg-svg" href="#importsvg-svg"><tt><b>importSVG</b>(svg[, options])</tt></a>
602</div>
603<div class="member-description hidden">
604<div class="member-text">
605 <p>Converts the provided SVG content into Paper.js items and adds them to
606the active layer of this project.</p>
607<p>Note that the project is not cleared first. You can call
608<tt>Project#clear</tt>() to do so.</p>
609<p>The options object offers control over some aspects of the SVG import:</p>
610<p><b>options.expandShapes:</b> <tt>Boolean</tt> – wether imported shape
611items should be expanded to path items.</p>
612
613<ul><b>Parameters:</b>
614
615<li>
616<tt>svg:</tt>
617<tt>SVGSVGElement</tt> / <tt>String</tt>
618&mdash;&nbsp;the SVG content to import
619
620</li>
621
622<li>
623<tt>options:</tt>
624<tt>Object</tt>
625&mdash;&nbsp;the import options
626&mdash;&nbsp;optional, default: <tt>{ expandShapes: false }</tt>
627</li>
628
629</ul>
630
631
632 <ul><b>Returns:</b>
633
634 <li>
635<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the imported Paper.js parent item
636</li>
637
638 </ul>
639
640
641
642</div>
643</div>
644</div>
645
646 </div>
647
648
649
650
651<!-- =========================== copyright notice ========================= -->
652<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
653<div class="content-end"></div>
654
655</body>
Note: See TracBrowser for help on using the repository browser.