1 | <!DOCTYPE html>
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>Style</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>Style</h1>
|
---|
16 |
|
---|
17 | <p>Style is used for changing the visual styles of items
|
---|
18 | contained within a Paper.js project and is returned by
|
---|
19 | <a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
|
---|
20 | <p>All properties of Style are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>,
|
---|
21 | i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
|
---|
22 | <p>To set multiple style properties in one go, you can pass an object to
|
---|
23 | <a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and
|
---|
24 | apply it to a series of items:</p>
|
---|
25 | <p>
|
---|
26 | <b>Example</b> — Styling paths
|
---|
27 | </p>
|
---|
28 |
|
---|
29 | <div class="paperscript split">
|
---|
30 |
|
---|
31 | <div class="buttons">
|
---|
32 | <div class="button run">Run</div>
|
---|
33 | </div>
|
---|
34 |
|
---|
35 | <script type="text/paperscript" canvas="canvas-0">
|
---|
36 | var path = new Path.Circle(new Point(80, 50), 30);
|
---|
37 | path.style = {
|
---|
38 | fillColor: new Color(1, 0, 0),
|
---|
39 | strokeColor: 'black',
|
---|
40 | strokeWidth: 5
|
---|
41 | };
|
---|
42 | </script>
|
---|
43 | <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
---|
44 | </div>
|
---|
45 |
|
---|
46 |
|
---|
47 | <p>
|
---|
48 | <b>Example</b> — Styling text items
|
---|
49 | </p>
|
---|
50 |
|
---|
51 | <div class="paperscript split">
|
---|
52 |
|
---|
53 | <div class="buttons">
|
---|
54 | <div class="button run">Run</div>
|
---|
55 | </div>
|
---|
56 |
|
---|
57 | <script type="text/paperscript" canvas="canvas-1">
|
---|
58 | var text = new PointText(view.center);
|
---|
59 | text.content = 'Hello world.';
|
---|
60 | text.style = {
|
---|
61 | fontSize: 20,
|
---|
62 | fillColor: 'red',
|
---|
63 | justification: 'center'
|
---|
64 | };
|
---|
65 | </script>
|
---|
66 | <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
---|
67 | </div>
|
---|
68 |
|
---|
69 |
|
---|
70 | <p>
|
---|
71 | <b>Example</b> — Styling groups
|
---|
72 | </p>
|
---|
73 |
|
---|
74 | <div class="paperscript split">
|
---|
75 |
|
---|
76 | <div class="buttons">
|
---|
77 | <div class="button run">Run</div>
|
---|
78 | </div>
|
---|
79 |
|
---|
80 | <script type="text/paperscript" canvas="canvas-2">
|
---|
81 | var path1 = new Path.Circle({
|
---|
82 | center: [100, 50],
|
---|
83 | radius: 30
|
---|
84 | });
|
---|
85 |
|
---|
86 | var path2 = new Path.Rectangle({
|
---|
87 | from: [170, 20],
|
---|
88 | to: [230, 80]
|
---|
89 | });
|
---|
90 |
|
---|
91 | var group = new Group(path1, path2);
|
---|
92 |
|
---|
93 | // All styles set on a group are automatically
|
---|
94 | // set on the children of the group:
|
---|
95 | group.style = {
|
---|
96 | strokeColor: 'black',
|
---|
97 | dashArray: [4, 10],
|
---|
98 | strokeWidth: 4,
|
---|
99 | strokeCap: 'round'
|
---|
100 | };
|
---|
101 | </script>
|
---|
102 | <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
---|
103 | </div>
|
---|
104 |
|
---|
105 |
|
---|
106 | </div>
|
---|
107 |
|
---|
108 |
|
---|
109 |
|
---|
110 |
|
---|
111 |
|
---|
112 | <div class="reference-members"><h2>Properties</h2>
|
---|
113 |
|
---|
114 |
|
---|
115 | <h3>Stroke Style</h3>
|
---|
116 |
|
---|
117 | <div id="strokecolor" class="member">
|
---|
118 | <div class="member-link">
|
---|
119 | <a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
|
---|
120 | </div>
|
---|
121 | <div class="member-description hidden">
|
---|
122 |
|
---|
123 | <div class="member-text">
|
---|
124 | <p>The color of the stroke.</p>
|
---|
125 |
|
---|
126 |
|
---|
127 | <ul><b>Type:</b>
|
---|
128 | <li>
|
---|
129 | <a href="../classes/Color.html"><tt>Color</tt></a>
|
---|
130 | </li>
|
---|
131 | </ul>
|
---|
132 |
|
---|
133 | <p>
|
---|
134 | <b>Example</b> — Setting the stroke color of a path:
|
---|
135 | </p>
|
---|
136 |
|
---|
137 | <div class="paperscript split">
|
---|
138 |
|
---|
139 | <div class="buttons">
|
---|
140 | <div class="button run">Run</div>
|
---|
141 | </div>
|
---|
142 |
|
---|
143 | <script type="text/paperscript" canvas="canvas-3">
|
---|
144 | // Create a circle shaped path at { x: 80, y: 50 }
|
---|
145 | // with a radius of 35:
|
---|
146 | var circle = new Path.Circle(new Point(80, 50), 35);
|
---|
147 |
|
---|
148 | // Set its stroke color to RGB red:
|
---|
149 | circle.strokeColor = new Color(1, 0, 0);
|
---|
150 | </script>
|
---|
151 | <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
---|
152 | </div>
|
---|
153 |
|
---|
154 |
|
---|
155 | </div>
|
---|
156 |
|
---|
157 | </div>
|
---|
158 | </div>
|
---|
159 |
|
---|
160 |
|
---|
161 | <div id="strokewidth" class="member">
|
---|
162 | <div class="member-link">
|
---|
163 | <a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
|
---|
164 | </div>
|
---|
165 | <div class="member-description hidden">
|
---|
166 |
|
---|
167 | <div class="member-text">
|
---|
168 | <p>The width of the stroke.</p>
|
---|
169 |
|
---|
170 |
|
---|
171 | <ul><b>Default:</b>
|
---|
172 | <li>
|
---|
173 | <tt>1</tt>
|
---|
174 | </li>
|
---|
175 | </ul>
|
---|
176 |
|
---|
177 | <ul><b>Type:</b>
|
---|
178 | <li>
|
---|
179 | <tt>Number</tt>
|
---|
180 | </li>
|
---|
181 | </ul>
|
---|
182 |
|
---|
183 | <p>
|
---|
184 | <b>Example</b> — Setting an item's stroke width:
|
---|
185 | </p>
|
---|
186 |
|
---|
187 | <div class="paperscript split">
|
---|
188 |
|
---|
189 | <div class="buttons">
|
---|
190 | <div class="button run">Run</div>
|
---|
191 | </div>
|
---|
192 |
|
---|
193 | <script type="text/paperscript" canvas="canvas-4">
|
---|
194 | // Create a circle shaped path at { x: 80, y: 50 }
|
---|
195 | // with a radius of 35:
|
---|
196 | var circle = new Path.Circle(new Point(80, 50), 35);
|
---|
197 |
|
---|
198 | // Set its stroke color to black:
|
---|
199 | circle.strokeColor = 'black';
|
---|
200 |
|
---|
201 | // Set its stroke width to 10:
|
---|
202 | circle.strokeWidth = 10;
|
---|
203 | </script>
|
---|
204 | <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
---|
205 | </div>
|
---|
206 |
|
---|
207 |
|
---|
208 | </div>
|
---|
209 |
|
---|
210 | </div>
|
---|
211 | </div>
|
---|
212 |
|
---|
213 |
|
---|
214 | <div id="strokecap" class="member">
|
---|
215 | <div class="member-link">
|
---|
216 | <a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
|
---|
217 | </div>
|
---|
218 | <div class="member-description hidden">
|
---|
219 |
|
---|
220 | <div class="member-text">
|
---|
221 | <p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
---|
222 | have a stroke.</p>
|
---|
223 |
|
---|
224 |
|
---|
225 | <ul><b>Default:</b>
|
---|
226 | <li>
|
---|
227 | <tt>'butt'</tt>
|
---|
228 | </li>
|
---|
229 | </ul>
|
---|
230 |
|
---|
231 | <ul><b>Type:</b>
|
---|
232 | <li>
|
---|
233 | <tt>String('round', 'square', 'butt')</tt>
|
---|
234 | </li>
|
---|
235 | </ul>
|
---|
236 |
|
---|
237 | <p>
|
---|
238 | <b>Example</b> — A look at the different stroke caps:
|
---|
239 | </p>
|
---|
240 |
|
---|
241 | <div class="paperscript split">
|
---|
242 |
|
---|
243 | <div class="buttons">
|
---|
244 | <div class="button run">Run</div>
|
---|
245 | </div>
|
---|
246 |
|
---|
247 | <script type="text/paperscript" canvas="canvas-5">
|
---|
248 | var line = new Path(new Point(80, 50), new Point(420, 50));
|
---|
249 | line.strokeColor = 'black';
|
---|
250 | line.strokeWidth = 20;
|
---|
251 |
|
---|
252 | // Select the path, so we can see where the stroke is formed:
|
---|
253 | line.selected = true;
|
---|
254 |
|
---|
255 | // Set the stroke cap of the line to be round:
|
---|
256 | line.strokeCap = 'round';
|
---|
257 |
|
---|
258 | // Copy the path and set its stroke cap to be square:
|
---|
259 | var line2 = line.clone();
|
---|
260 | line2.position.y += 50;
|
---|
261 | line2.strokeCap = 'square';
|
---|
262 |
|
---|
263 | // Make another copy and set its stroke cap to be butt:
|
---|
264 | var line2 = line.clone();
|
---|
265 | line2.position.y += 100;
|
---|
266 | line2.strokeCap = 'butt';
|
---|
267 | </script>
|
---|
268 | <div class="canvas"><canvas width="516" height="200" id="canvas-5"></canvas></div>
|
---|
269 | </div>
|
---|
270 |
|
---|
271 |
|
---|
272 | </div>
|
---|
273 |
|
---|
274 | </div>
|
---|
275 | </div>
|
---|
276 |
|
---|
277 |
|
---|
278 | <div id="strokejoin" class="member">
|
---|
279 | <div class="member-link">
|
---|
280 | <a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
|
---|
281 | </div>
|
---|
282 | <div class="member-description hidden">
|
---|
283 |
|
---|
284 | <div class="member-text">
|
---|
285 | <p>The shape to be used at the corners of paths when they have a stroke.</p>
|
---|
286 |
|
---|
287 |
|
---|
288 | <ul><b>Default:</b>
|
---|
289 | <li>
|
---|
290 | <tt>'miter'</tt>
|
---|
291 | </li>
|
---|
292 | </ul>
|
---|
293 |
|
---|
294 | <ul><b>Type:</b>
|
---|
295 | <li>
|
---|
296 | <tt>String('miter', 'round', 'bevel')</tt>
|
---|
297 | </li>
|
---|
298 | </ul>
|
---|
299 |
|
---|
300 | <p>
|
---|
301 | <b>Example</b> — A look at the different stroke joins:
|
---|
302 | </p>
|
---|
303 |
|
---|
304 | <div class="paperscript split">
|
---|
305 |
|
---|
306 | <div class="buttons">
|
---|
307 | <div class="button run">Run</div>
|
---|
308 | </div>
|
---|
309 |
|
---|
310 | <script type="text/paperscript" canvas="canvas-6">
|
---|
311 | var path = new Path();
|
---|
312 | path.add(new Point(80, 100));
|
---|
313 | path.add(new Point(120, 40));
|
---|
314 | path.add(new Point(160, 100));
|
---|
315 | path.strokeColor = 'black';
|
---|
316 | path.strokeWidth = 20;
|
---|
317 |
|
---|
318 | // Select the path, so we can see where the stroke is formed:
|
---|
319 | path.selected = true;
|
---|
320 |
|
---|
321 | var path2 = path.clone();
|
---|
322 | path2.position.x += path2.bounds.width * 1.5;
|
---|
323 | path2.strokeJoin = 'round';
|
---|
324 |
|
---|
325 | var path3 = path2.clone();
|
---|
326 | path3.position.x += path3.bounds.width * 1.5;
|
---|
327 | path3.strokeJoin = 'bevel';
|
---|
328 | </script>
|
---|
329 | <div class="canvas"><canvas width="516" height="120" id="canvas-6"></canvas></div>
|
---|
330 | </div>
|
---|
331 |
|
---|
332 |
|
---|
333 | </div>
|
---|
334 |
|
---|
335 | </div>
|
---|
336 | </div>
|
---|
337 |
|
---|
338 |
|
---|
339 | <div id="dashoffset" class="member">
|
---|
340 | <div class="member-link">
|
---|
341 | <a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
|
---|
342 | </div>
|
---|
343 | <div class="member-description hidden">
|
---|
344 |
|
---|
345 | <div class="member-text">
|
---|
346 | <p>The dash offset of the stroke.</p>
|
---|
347 |
|
---|
348 |
|
---|
349 | <ul><b>Default:</b>
|
---|
350 | <li>
|
---|
351 | <tt>0</tt>
|
---|
352 | </li>
|
---|
353 | </ul>
|
---|
354 |
|
---|
355 | <ul><b>Type:</b>
|
---|
356 | <li>
|
---|
357 | <tt>Number</tt>
|
---|
358 | </li>
|
---|
359 | </ul>
|
---|
360 |
|
---|
361 |
|
---|
362 | </div>
|
---|
363 |
|
---|
364 | </div>
|
---|
365 | </div>
|
---|
366 |
|
---|
367 |
|
---|
368 | <div id="dasharray" class="member">
|
---|
369 | <div class="member-link">
|
---|
370 | <a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
|
---|
371 | </div>
|
---|
372 | <div class="member-description hidden">
|
---|
373 |
|
---|
374 | <div class="member-text">
|
---|
375 | <p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
---|
376 |
|
---|
377 |
|
---|
378 | <ul><b>Default:</b>
|
---|
379 | <li>
|
---|
380 | <tt>[]</tt>
|
---|
381 | </li>
|
---|
382 | </ul>
|
---|
383 |
|
---|
384 | <ul><b>Type:</b>
|
---|
385 | <li>
|
---|
386 | <tt>Array</tt>
|
---|
387 | </li>
|
---|
388 | </ul>
|
---|
389 |
|
---|
390 | <p>
|
---|
391 | <b>Example</b>
|
---|
392 | </p>
|
---|
393 |
|
---|
394 | <div class="paperscript split">
|
---|
395 |
|
---|
396 | <div class="buttons">
|
---|
397 | <div class="button run">Run</div>
|
---|
398 | </div>
|
---|
399 |
|
---|
400 | <script type="text/paperscript" canvas="canvas-7">
|
---|
401 | var path = new Path.Circle(new Point(80, 50), 40);
|
---|
402 | path.strokeWidth = 2;
|
---|
403 | path.strokeColor = 'black';
|
---|
404 |
|
---|
405 | // Set the dashed stroke to [10pt dash, 4pt gap]:
|
---|
406 | path.dashArray = [10, 4];
|
---|
407 | </script>
|
---|
408 | <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
|
---|
409 | </div>
|
---|
410 |
|
---|
411 |
|
---|
412 | </div>
|
---|
413 |
|
---|
414 | </div>
|
---|
415 | </div>
|
---|
416 |
|
---|
417 |
|
---|
418 | <div id="miterlimit" class="member">
|
---|
419 | <div class="member-link">
|
---|
420 | <a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
|
---|
421 | </div>
|
---|
422 | <div class="member-description hidden">
|
---|
423 |
|
---|
424 | <div class="member-text">
|
---|
425 | <p>The miter limit of the stroke. When two line segments meet at a sharp
|
---|
426 | angle and miter joins have been specified for <a href="../classes/Style.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is
|
---|
427 | possible for the miter to extend far beyond the <a href="../classes/Style.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of
|
---|
428 | the path. The miterLimit imposes a limit on the ratio of the miter length
|
---|
429 | to the <a href="../classes/Style.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
|
---|
430 |
|
---|
431 |
|
---|
432 | <ul><b>Default:</b>
|
---|
433 | <li>
|
---|
434 | <tt>10</tt>
|
---|
435 | </li>
|
---|
436 | </ul>
|
---|
437 |
|
---|
438 | <ul><b>Type:</b>
|
---|
439 | <li>
|
---|
440 | <tt>Number</tt>
|
---|
441 | </li>
|
---|
442 | </ul>
|
---|
443 |
|
---|
444 |
|
---|
445 | </div>
|
---|
446 |
|
---|
447 | </div>
|
---|
448 | </div>
|
---|
449 |
|
---|
450 |
|
---|
451 | <h3>Fill Style</h3>
|
---|
452 |
|
---|
453 | <div id="fillcolor" class="member">
|
---|
454 | <div class="member-link">
|
---|
455 | <a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
|
---|
456 | </div>
|
---|
457 | <div class="member-description hidden">
|
---|
458 |
|
---|
459 | <div class="member-text">
|
---|
460 | <p>The fill color.</p>
|
---|
461 |
|
---|
462 |
|
---|
463 | <ul><b>Type:</b>
|
---|
464 | <li>
|
---|
465 | <a href="../classes/Color.html"><tt>Color</tt></a>
|
---|
466 | </li>
|
---|
467 | </ul>
|
---|
468 |
|
---|
469 | <p>
|
---|
470 | <b>Example</b> — Setting the fill color of a path to red:
|
---|
471 | </p>
|
---|
472 |
|
---|
473 | <div class="paperscript split">
|
---|
474 |
|
---|
475 | <div class="buttons">
|
---|
476 | <div class="button run">Run</div>
|
---|
477 | </div>
|
---|
478 |
|
---|
479 | <script type="text/paperscript" canvas="canvas-8">
|
---|
480 | // Create a circle shaped path at { x: 80, y: 50 }
|
---|
481 | // with a radius of 35:
|
---|
482 | var circle = new Path.Circle(new Point(80, 50), 35);
|
---|
483 |
|
---|
484 | // Set the fill color of the circle to RGB red:
|
---|
485 | circle.fillColor = new Color(1, 0, 0);
|
---|
486 | </script>
|
---|
487 | <div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
|
---|
488 | </div>
|
---|
489 |
|
---|
490 |
|
---|
491 | </div>
|
---|
492 |
|
---|
493 | </div>
|
---|
494 | </div>
|
---|
495 |
|
---|
496 |
|
---|
497 | <h3>Shadow Style</h3>
|
---|
498 |
|
---|
499 | <div id="shadowcolor" class="member">
|
---|
500 | <div class="member-link">
|
---|
501 | <a name="shadowcolor" href="#shadowcolor"><tt><b>shadowColor</b></tt></a>
|
---|
502 | </div>
|
---|
503 | <div class="member-description hidden">
|
---|
504 |
|
---|
505 | <div class="member-text">
|
---|
506 | <p>The shadow color.</p>
|
---|
507 |
|
---|
508 |
|
---|
509 | <ul><b>Type:</b>
|
---|
510 | <li>
|
---|
511 | <a href="../classes/Color.html"><tt>Color</tt></a>
|
---|
512 | </li>
|
---|
513 | </ul>
|
---|
514 |
|
---|
515 | <p>
|
---|
516 | <b>Example</b> — Creating a circle with a black shadow:
|
---|
517 | </p>
|
---|
518 |
|
---|
519 | <div class="paperscript split">
|
---|
520 |
|
---|
521 | <div class="buttons">
|
---|
522 | <div class="button run">Run</div>
|
---|
523 | </div>
|
---|
524 |
|
---|
525 | <script type="text/paperscript" canvas="canvas-9">
|
---|
526 | var circle = new Path.Circle({
|
---|
527 | center: [80, 50],
|
---|
528 | radius: 35,
|
---|
529 | fillColor: 'white',
|
---|
530 | // Set the shadow color of the circle to RGB black:
|
---|
531 | shadowColor: new Color(0, 0, 0),
|
---|
532 | // Set the shadow blur radius to 12:
|
---|
533 | shadowBlur: 12,
|
---|
534 | // Offset the shadow by { x: 5, y: 5 }
|
---|
535 | shadowOffset: new Point(5, 5)
|
---|
536 | });
|
---|
537 | </script>
|
---|
538 | <div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
|
---|
539 | </div>
|
---|
540 |
|
---|
541 |
|
---|
542 | </div>
|
---|
543 |
|
---|
544 | </div>
|
---|
545 | </div>
|
---|
546 |
|
---|
547 |
|
---|
548 | <div id="shadowblur" class="member">
|
---|
549 | <div class="member-link">
|
---|
550 | <a name="shadowblur" href="#shadowblur"><tt><b>shadowBlur</b></tt></a>
|
---|
551 | </div>
|
---|
552 | <div class="member-description hidden">
|
---|
553 |
|
---|
554 | <div class="member-text">
|
---|
555 | <p>The shadow's blur radius.</p>
|
---|
556 |
|
---|
557 |
|
---|
558 | <ul><b>Default:</b>
|
---|
559 | <li>
|
---|
560 | <tt>0</tt>
|
---|
561 | </li>
|
---|
562 | </ul>
|
---|
563 |
|
---|
564 | <ul><b>Type:</b>
|
---|
565 | <li>
|
---|
566 | <tt>Number</tt>
|
---|
567 | </li>
|
---|
568 | </ul>
|
---|
569 |
|
---|
570 |
|
---|
571 | </div>
|
---|
572 |
|
---|
573 | </div>
|
---|
574 | </div>
|
---|
575 |
|
---|
576 |
|
---|
577 | <div id="shadowoffset" class="member">
|
---|
578 | <div class="member-link">
|
---|
579 | <a name="shadowoffset" href="#shadowoffset"><tt><b>shadowOffset</b></tt></a>
|
---|
580 | </div>
|
---|
581 | <div class="member-description hidden">
|
---|
582 |
|
---|
583 | <div class="member-text">
|
---|
584 | <p>The shadow's offset.</p>
|
---|
585 |
|
---|
586 |
|
---|
587 | <ul><b>Default:</b>
|
---|
588 | <li>
|
---|
589 | <tt>0</tt>
|
---|
590 | </li>
|
---|
591 | </ul>
|
---|
592 |
|
---|
593 | <ul><b>Type:</b>
|
---|
594 | <li>
|
---|
595 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
596 | </li>
|
---|
597 | </ul>
|
---|
598 |
|
---|
599 |
|
---|
600 | </div>
|
---|
601 |
|
---|
602 | </div>
|
---|
603 | </div>
|
---|
604 |
|
---|
605 |
|
---|
606 | <h3>Selection Style</h3>
|
---|
607 |
|
---|
608 | <div id="selectedcolor" class="member">
|
---|
609 | <div class="member-link">
|
---|
610 | <a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
|
---|
611 | </div>
|
---|
612 | <div class="member-description hidden">
|
---|
613 |
|
---|
614 | <div class="member-text">
|
---|
615 | <p>The color the item is highlighted with when selected. If the item does
|
---|
616 | not specify its own color, the color defined by its layer is used instead.</p>
|
---|
617 |
|
---|
618 |
|
---|
619 | <ul><b>Type:</b>
|
---|
620 | <li>
|
---|
621 | <a href="../classes/Color.html"><tt>Color</tt></a>
|
---|
622 | </li>
|
---|
623 | </ul>
|
---|
624 |
|
---|
625 |
|
---|
626 | </div>
|
---|
627 |
|
---|
628 | </div>
|
---|
629 | </div>
|
---|
630 |
|
---|
631 |
|
---|
632 | <h3>Character Style</h3>
|
---|
633 |
|
---|
634 | <div id="font" class="member">
|
---|
635 | <div class="member-link">
|
---|
636 | <a name="font" href="#font"><tt><b>font</b></tt></a>
|
---|
637 | </div>
|
---|
638 | <div class="member-description hidden">
|
---|
639 |
|
---|
640 | <div class="member-text">
|
---|
641 | <p>The font to be used in text content.</p>
|
---|
642 |
|
---|
643 |
|
---|
644 | <ul><b>Default:</b>
|
---|
645 | <li>
|
---|
646 | <tt>'sans-serif'</tt>
|
---|
647 | </li>
|
---|
648 | </ul>
|
---|
649 |
|
---|
650 | <ul><b>Type:</b>
|
---|
651 | <li>
|
---|
652 | <tt>String</tt>
|
---|
653 | </li>
|
---|
654 | </ul>
|
---|
655 |
|
---|
656 |
|
---|
657 | </div>
|
---|
658 |
|
---|
659 | </div>
|
---|
660 | </div>
|
---|
661 |
|
---|
662 |
|
---|
663 | <div id="fontsize" class="member">
|
---|
664 | <div class="member-link">
|
---|
665 | <a name="fontsize" href="#fontsize"><tt><b>fontSize</b></tt></a>
|
---|
666 | </div>
|
---|
667 | <div class="member-description hidden">
|
---|
668 |
|
---|
669 | <div class="member-text">
|
---|
670 | <p>The font size of text content, as {@Number} in pixels, or as {@String}
|
---|
671 | with optional units <tt>'px'</tt>, <tt>'pt'</tt> and <tt>'em'</tt>.</p>
|
---|
672 |
|
---|
673 |
|
---|
674 | <ul><b>Default:</b>
|
---|
675 | <li>
|
---|
676 | <tt>10</tt>
|
---|
677 | </li>
|
---|
678 | </ul>
|
---|
679 |
|
---|
680 | <ul><b>Type:</b>
|
---|
681 | <li>
|
---|
682 | <tt>Number</tt> / <tt>String</tt>
|
---|
683 | </li>
|
---|
684 | </ul>
|
---|
685 |
|
---|
686 |
|
---|
687 | </div>
|
---|
688 |
|
---|
689 | </div>
|
---|
690 | </div>
|
---|
691 |
|
---|
692 |
|
---|
693 | <div id="leading" class="member">
|
---|
694 | <div class="member-link">
|
---|
695 | <a name="leading" href="#leading"><tt><b>leading</b></tt></a>
|
---|
696 | </div>
|
---|
697 | <div class="member-description hidden">
|
---|
698 |
|
---|
699 | <div class="member-text">
|
---|
700 | <p>The text leading of text content.</p>
|
---|
701 |
|
---|
702 |
|
---|
703 | <ul><b>Default:</b>
|
---|
704 | <li>
|
---|
705 | <tt>fontSize * 1.2</tt>
|
---|
706 | </li>
|
---|
707 | </ul>
|
---|
708 |
|
---|
709 | <ul><b>Type:</b>
|
---|
710 | <li>
|
---|
711 | <tt>Number</tt> / <tt>String</tt>
|
---|
712 | </li>
|
---|
713 | </ul>
|
---|
714 |
|
---|
715 |
|
---|
716 | </div>
|
---|
717 |
|
---|
718 | </div>
|
---|
719 | </div>
|
---|
720 |
|
---|
721 |
|
---|
722 | <h3>Paragraph Style</h3>
|
---|
723 |
|
---|
724 | <div id="justification" class="member">
|
---|
725 | <div class="member-link">
|
---|
726 | <a name="justification" href="#justification"><tt><b>justification</b></tt></a>
|
---|
727 | </div>
|
---|
728 | <div class="member-description hidden">
|
---|
729 |
|
---|
730 | <div class="member-text">
|
---|
731 | <p>The justification of text paragraphs.</p>
|
---|
732 |
|
---|
733 |
|
---|
734 | <ul><b>Default:</b>
|
---|
735 | <li>
|
---|
736 | <tt>'left'</tt>
|
---|
737 | </li>
|
---|
738 | </ul>
|
---|
739 |
|
---|
740 | <ul><b>Type:</b>
|
---|
741 | <li>
|
---|
742 | <tt>String('left', 'right', 'center')</tt>
|
---|
743 | </li>
|
---|
744 | </ul>
|
---|
745 |
|
---|
746 |
|
---|
747 | </div>
|
---|
748 |
|
---|
749 | </div>
|
---|
750 | </div>
|
---|
751 |
|
---|
752 | </div>
|
---|
753 |
|
---|
754 |
|
---|
755 |
|
---|
756 |
|
---|
757 |
|
---|
758 |
|
---|
759 | <!-- =========================== copyright notice ========================= -->
|
---|
760 | <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>
|
---|
761 | <div class="content-end"></div>
|
---|
762 |
|
---|
763 | </body> |
---|