|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Graphics</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Graphics</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro" style="min-height: 184px;"> |
|
|
31 |
<p> |
|
|
32 |
<img src="../assets/graphics/img/ship.png" alt="Screencapture of ship drawn with Graphics" style="border: 1px solid #bfbfbf; float:right; height:150px; margin: 0 0 8px 8px; width:275px;"> |
|
|
33 |
The Graphics module provides a JavaScript API for creating shapes in a variety of formats across a <a href="http://developer.yahoo.com/yui/articles/gbs">browser test baseline</a>. Based on device and browser capabilities, Graphics leverages SVG, HTML Canvas and VML to render its graphical elements. |
|
|
34 |
</p> |
|
|
35 |
<p> |
|
|
36 |
The Graphics module features a <code>Graphic</code> class that allows you to easily create and manage shapes. Currently, a <code>Graphic</code> instance can be used to create predifined shapes and free-form polygons with fill and stroke properties. |
|
|
37 |
</p> |
|
|
38 |
</div> |
|
|
39 |
<h2 id="getting-started">Getting Started</h2> |
|
|
40 |
|
|
|
41 |
<p> |
|
|
42 |
To include the source files for Graphics and its dependencies, first load |
|
|
43 |
the YUI seed file if you haven't already loaded it. |
|
|
44 |
</p> |
|
|
45 |
|
|
|
46 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
47 |
|
|
|
48 |
|
|
|
49 |
<p> |
|
|
50 |
Next, create a new YUI instance for your application and populate it with the |
|
|
51 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
52 |
YUI will automatically load any dependencies required by the modules you |
|
|
53 |
specify. |
|
|
54 |
</p> |
|
|
55 |
|
|
|
56 |
<pre class="code prettyprint"><script> |
|
|
57 |
// Create a new YUI instance and populate it with the required modules. |
|
|
58 |
YUI().use('graphics', function (Y) { |
|
|
59 |
// Graphics is available and ready for use. Add implementation |
|
|
60 |
// code here. |
|
|
61 |
}); |
|
|
62 |
</script></pre> |
|
|
63 |
|
|
|
64 |
|
|
|
65 |
<p> |
|
|
66 |
For more information on creating YUI instances and on the |
|
|
67 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
68 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
69 |
</p> |
|
|
70 |
|
|
|
71 |
|
|
|
72 |
<h2 id="using">Using the Graphics module</h2> |
|
|
73 |
|
|
|
74 |
<p>The <code>Graphic</code> class acts a factory and container for shapes. You need at least one <code>Graphic</code> instance to create shapes for your application.</p> |
|
|
75 |
|
|
|
76 |
<h3 id="instantiating">Instantiating A Graphic instance</h3> |
|
|
77 |
|
|
|
78 |
<p>All you need to instantiate a Graphic instance is an HTML element in which to render. Alternatively, you can attach your instance to the body of your page.</p> |
|
|
79 |
|
|
|
80 |
<h4 id="css">CSS</h4> |
|
|
81 |
<pre class="code prettyprint">#mygraphiccontainer { |
|
|
82 |
width: 600px; |
|
|
83 |
height: 400px; |
|
|
84 |
}</pre> |
|
|
85 |
|
|
|
86 |
<h4 id="html">HTML</h4> |
|
|
87 |
<pre class="code prettyprint"><div id="mygraphiccontainer"></div></pre> |
|
|
88 |
|
|
|
89 |
<h4 id="javascript">JavaScript</h4> |
|
|
90 |
<pre class="code prettyprint">// Instantiate a graphic instance |
|
|
91 |
var mygraphic = new Y.Graphic({ |
|
|
92 |
render: "#mygraphiccontainer" |
|
|
93 |
});</pre> |
|
|
94 |
|
|
|
95 |
|
|
|
96 |
<p>By default, <code>Graphic</code> will size to its parent container. The API also provides the option of explicitly setting its <code>width</code> and <code>height</code> attributes. Additionally, the Graphic class provides an <code>autoSize</code> attribute. When set to true, the Graphic instance will expand to fit its contents. |
|
|
97 |
|
|
|
98 |
|
|
|
99 |
<h3 id="creating-shapes">Creating shapes</h3> |
|
|
100 |
<p>Shapes are created using the <code>addShape</code> method. The <code>addShape</code> method takes a config parameter that defines the shape and its properties. When creating a shape, the shape is determined by the <code>type</code> |
|
|
101 |
attribute. The <code>Graphics</code> module includes four pre-defined shapes. They can be created by passing a <code>String</code> reference.</p> |
|
|
102 |
<table> |
|
|
103 |
<tr> |
|
|
104 |
<th>key</th> |
|
|
105 |
<th>shape</th> |
|
|
106 |
</tr> |
|
|
107 |
<tr> |
|
|
108 |
<td>circle</td> |
|
|
109 |
<td>Y.Circle</td> |
|
|
110 |
</tr> |
|
|
111 |
<tr> |
|
|
112 |
<td>ellipse</td> |
|
|
113 |
<td>Y.Ellipse</td> |
|
|
114 |
</tr> |
|
|
115 |
<tr>. |
|
|
116 |
<td>rect</td> |
|
|
117 |
<td>Y.Rect</td> |
|
|
118 |
</tr> |
|
|
119 |
<tr> |
|
|
120 |
<td>path</td> |
|
|
121 |
<td>Y.Path</td> |
|
|
122 |
</tr> |
|
|
123 |
</table> |
|
|
124 |
|
|
|
125 |
<p>Alternatively, you can create your own custom class and pass it directly through the <code>type</code> attribute.</p> |
|
|
126 |
|
|
|
127 |
<p>The below code would create a 300x200 rectangle with a blue fill and a red border.</p> |
|
|
128 |
|
|
|
129 |
<pre class="code prettyprint">var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"}), |
|
|
130 |
myrect = mygraphic.addShape({ |
|
|
131 |
type: "rect", |
|
|
132 |
width: 300, |
|
|
133 |
height: 200, |
|
|
134 |
fill: { |
|
|
135 |
color: "#0000ff" |
|
|
136 |
}, |
|
|
137 |
stroke: { |
|
|
138 |
weight: 2, |
|
|
139 |
color: "#ff0000" |
|
|
140 |
}, |
|
|
141 |
x: 50, |
|
|
142 |
y: 100 |
|
|
143 |
});</pre> |
|
|
144 |
|
|
|
145 |
<p>This code would create an instance of a custom shape that you have created.</p> |
|
|
146 |
<pre class="code prettyprint">var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"}), |
|
|
147 |
myrect = mygraphic.addShape({ |
|
|
148 |
type: Y.MyCustomShape, |
|
|
149 |
width: 300, |
|
|
150 |
height: 200, |
|
|
151 |
fill: { |
|
|
152 |
color: "#0000ff" |
|
|
153 |
}, |
|
|
154 |
stroke: { |
|
|
155 |
weight: 2, |
|
|
156 |
color: "#ff0000" |
|
|
157 |
}, |
|
|
158 |
x: 50, |
|
|
159 |
y: 100 |
|
|
160 |
});</pre> |
|
|
161 |
|
|
|
162 |
<h3 id="path-drawing-tool">Path Drawing Tool</h3> |
|
|
163 |
<!-- doesn't contain the header because it may be h3 or h2 --> |
|
|
164 |
<p> |
|
|
165 |
<div style="float:right; margin: 6px 0 8px 8px;"> |
|
|
166 |
<a href="graphics-path-tool.html"> |
|
|
167 |
<img style="border: 1px solid #bfbfbf; height:149px; width:395px;" alt="Screen capture of Graphics path tool" src="../assets/graphics/img/path-tool-capture.png"> |
|
|
168 |
|
|
|
169 |
</a> |
|
|
170 |
<div> |
|
|
171 |
<a href="graphics-path-tool.html" class="button">Read More</a> |
|
|
172 |
</div> |
|
|
173 |
</div> |
|
|
174 |
Try this simple <a href="graphics-path-tool.html">tool</a> that helps you by generating code while you interactively |
|
|
175 |
draw graphic paths. |
|
|
176 |
</p> |
|
|
177 |
<p> |
|
|
178 |
As you drag the pencil icon, corresponding graphics code is auto-generated. |
|
|
179 |
This code can be copied and pasted into a graphics instance to reproduce |
|
|
180 |
the paths you created with the pencil. |
|
|
181 |
</p> |
|
|
182 |
<p> |
|
|
183 |
The <a href="graphics-violin.html">violin example</a> was created with this tool. |
|
|
184 |
</p> |
|
|
185 |
|
|
|
186 |
|
|
|
187 |
<h3 id="aboutgraphic">Working with the Graphic Class</h3> |
|
|
188 |
<p>The <code>Graphics</code> module uses different technologies based on browser capabilities. The <code>Graphics</code> module normalizes these different technologies with a consistent API. Ideally, you should not |
|
|
189 |
have to interact directly with the underlying technologies or their corresponding HTML elements. Both the <code>Graphic</code> and <code>Shape</code> classes provide APIs for sizing, positioning and customization.</p> |
|
|
190 |
|
|
|
191 |
<h4 id="graphicattributes">Graphic Attributes</h4> |
|
|
192 |
|
|
|
193 |
<p>The <code>Graphic</code> class exposes the following attributes.</p> |
|
|
194 |
<table> |
|
|
195 |
<tr> |
|
|
196 |
<th>Attribute</th> |
|
|
197 |
<th>Type</th> |
|
|
198 |
<th>Description</th> |
|
|
199 |
</tr> |
|
|
200 |
<tr> |
|
|
201 |
<td><code>id</code></td> |
|
|
202 |
<td><code>String</code></td> |
|
|
203 |
<td>Unique identifier for the <code>Graphic</code> instance. If not explicity set, one will be generated.</td></tr> |
|
|
204 |
<tr> |
|
|
205 |
<td><code>shapes</code></td> |
|
|
206 |
<td><code>Object</code></td> |
|
|
207 |
<td>Key value pairs containing all shape instances contained in the <code>Graphic</code> instance.</td> |
|
|
208 |
</tr> |
|
|
209 |
<tr> |
|
|
210 |
<td><code>contentBounds</code></td> |
|
|
211 |
<td><code>Object</code></td> |
|
|
212 |
<td>Object containing size and coordinate data for the content of a Graphic in relation to the coordinate space of the <code>Graphic</code> instance. The following values are included: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code> and <code>height</code>.</td> |
|
|
213 |
</tr> |
|
|
214 |
<tr> |
|
|
215 |
<td><code>node</code></td> |
|
|
216 |
<td><code>HTMLElement</code></td> |
|
|
217 |
<td>Outermost HTMLElement of the <code>Graphic</code> instance. (read-only)</td> |
|
|
218 |
</tr> |
|
|
219 |
<tr> |
|
|
220 |
<td><code>width</code></td> |
|
|
221 |
<td><code>Number</code></td> |
|
|
222 |
<td>The width of the <code>Graphic</code> instance.</td> |
|
|
223 |
</tr> |
|
|
224 |
<tr> |
|
|
225 |
<td><code>height</code></td> |
|
|
226 |
<td><code>Number</code></td> |
|
|
227 |
<td>The height of the <code>Graphic</code> instance.</td> |
|
|
228 |
</tr> |
|
|
229 |
<tr> |
|
|
230 |
<td><code>autoSize</code></td> |
|
|
231 |
<td><code>boolean</code></td> |
|
|
232 |
<td>Determines the sizing of the graphic. See the <a href="http://yuilibrary.com/yui/docs/api/classes/Graphic.html#attr_autoSize">API Docs</a> for possible values and associated behaviors.</td> |
|
|
233 |
</tr> |
|
|
234 |
<tr> |
|
|
235 |
<td><code>preserveAspectRatio</code></td> |
|
|
236 |
<td><code>String</code></td> |
|
|
237 |
<td> Determines how content is sized when <code>autoSize</code> is set to <code>sizeContentToGraphic</code>. See the <a href="http://yuilibrary.com/yui/docs/api/classes/Graphic.html#attr_preserveAspectRatio">API Docs</a> for possible values.</td> |
|
|
238 |
</tr> |
|
|
239 |
<tr> |
|
|
240 |
<td><code>resizeDown</code></td> |
|
|
241 |
<td><code>boolean</code></td> |
|
|
242 |
<td>The <code>contentBounds</code> will resize to greater values but not to smaller values. (for performance) When resizing the <code>contentBounds</code> down is desirable, set the resizeDown value to true. The default value is false.</td> |
|
|
243 |
</tr> |
|
|
244 |
<tr> |
|
|
245 |
<td><code>x</code></td> |
|
|
246 |
<td><code>Number</code></td> |
|
|
247 |
<td>Indicates the x-coordinate for the instance.</td> |
|
|
248 |
</tr> |
|
|
249 |
<tr> |
|
|
250 |
<td><code>y</code></td> |
|
|
251 |
<td><code>Number</code></td> |
|
|
252 |
<td>Indicates the y-coordinate for the instance.</td> |
|
|
253 |
</tr> |
|
|
254 |
<tr> |
|
|
255 |
<td><code>autoDraw</code></td> |
|
|
256 |
<td><code>boolean</code></td> |
|
|
257 |
<td>Indicates whether or not the instance will automatically redraw after a change is made to a shape. When performing multiple operations, such adding many shapes, <code>autoDraw</code> can be set to false. Calling <code>_redraw</code> will force a redraw when <code>autoDraw</code> is <code>false</code>.</td> |
|
|
258 |
</tr> |
|
|
259 |
<tr> |
|
|
260 |
<td><code>visible</code></td> |
|
|
261 |
<td><code>boolean</code></td> |
|
|
262 |
<td>Toggles visibility for a <code>Graphic</code> instance.</td> |
|
|
263 |
</tr> |
|
|
264 |
</table> |
|
|
265 |
|
|
|
266 |
<h4 id="graphicmethods">Graphic Methods</h4> |
|
|
267 |
|
|
|
268 |
<p>The <code>Graphic</code> class also has the following public methods.</p> |
|
|
269 |
<table> |
|
|
270 |
<tr> |
|
|
271 |
<th><code>Method</code></th> |
|
|
272 |
<th>Description</th> |
|
|
273 |
</tr> |
|
|
274 |
<tr> |
|
|
275 |
<td>getXY</td> |
|
|
276 |
<td>Returns an array containing the current position of the graphic instance in page coordinates.</td> |
|
|
277 |
</tr> |
|
|
278 |
<tr> |
|
|
279 |
<td>addShape</td> |
|
|
280 |
<td>Generates and returns a shape instance by type.</td> |
|
|
281 |
</tr> |
|
|
282 |
<tr> |
|
|
283 |
<td>removeShape</td> |
|
|
284 |
<td>Removes a shape instance from from the graphic instance.</td> |
|
|
285 |
</tr> |
|
|
286 |
<tr> |
|
|
287 |
<td>removeAllShapes</td> |
|
|
288 |
<td>Removes all shape instances</td> |
|
|
289 |
</tr> |
|
|
290 |
<tr> |
|
|
291 |
<td>destroy</td> |
|
|
292 |
<td>Destroys the graphic instance and all its children.</td> |
|
|
293 |
</tr> |
|
|
294 |
<tr> |
|
|
295 |
<td>getShapeById</td> |
|
|
296 |
<td>Returns a shape instance based on an id.</td> |
|
|
297 |
</tr> |
|
|
298 |
<tr> |
|
|
299 |
<td>batch</td> |
|
|
300 |
<td>Allows for creating multiple shapes in order to batch appending and redraw operations.</td> |
|
|
301 |
</tr> |
|
|
302 |
</table> |
|
|
303 |
|
|
|
304 |
<h3 id="aboutshapes">Working with Shapes</h3> |
|
|
305 |
|
|
|
306 |
<h4 id="shapeattributes">Shape Attributes</h4> |
|
|
307 |
|
|
|
308 |
<p>Each shape shares a common set of attributes. Attributes shared across all shapes are listed below:</p> |
|
|
309 |
|
|
|
310 |
<table> |
|
|
311 |
<tr> |
|
|
312 |
<th>Attribute</th> |
|
|
313 |
<th>Type</th> |
|
|
314 |
<th>Description</th> |
|
|
315 |
</tr> |
|
|
316 |
<tr> |
|
|
317 |
<td><code>id</code></td> |
|
|
318 |
<td><code>String</code></td> |
|
|
319 |
<td>Unique identifier for the <code>Shape</code> instance. If not explicity set, one will be generated.</td></tr> |
|
|
320 |
</tr> |
|
|
321 |
<tr> |
|
|
322 |
<td><code>node</code></td> |
|
|
323 |
<td><code>HTMLElement</code></td> |
|
|
324 |
<td>HTMLElement of the <code>Shape</code> instance. (read-only)</td> |
|
|
325 |
</tr> |
|
|
326 |
<tr> |
|
|
327 |
<td><code>data</code></td> |
|
|
328 |
<td><code>String</code></td> |
|
|
329 |
<td>Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no malicious code is included in that content. |
|
|
330 |
</tr> |
|
|
331 |
<tr> |
|
|
332 |
<td><code>x</code></td> |
|
|
333 |
<td><code>Number</code></td> |
|
|
334 |
<td>The x-coordinate of the shape.</td> |
|
|
335 |
</tr> |
|
|
336 |
<tr> |
|
|
337 |
<td><code>y</code></td> |
|
|
338 |
<td><code>Number</code></td> |
|
|
339 |
<td>The y-coordinate of the shape.</td> |
|
|
340 |
</tr> |
|
|
341 |
<tr> |
|
|
342 |
<td><code>width</code></td> |
|
|
343 |
<td><code>Number</code></td> |
|
|
344 |
<td>The width of the <code>Shape</code> instance.</td> |
|
|
345 |
</tr> |
|
|
346 |
<tr> |
|
|
347 |
<td><code>height</code></td> |
|
|
348 |
<td><code>Number</code></td> |
|
|
349 |
<td>The height of the <code>Shape</code> instance.</td> |
|
|
350 |
</tr> |
|
|
351 |
<tr> |
|
|
352 |
<td><code>visible</code></td> |
|
|
353 |
<td><code>boolean</code></td> |
|
|
354 |
<td>Toggles visibility for a <code>Shape</code> instance.</td> |
|
|
355 |
</tr> |
|
|
356 |
<tr> |
|
|
357 |
<td><code>fill</code></td> |
|
|
358 |
<td><code>Object</code></td> |
|
|
359 |
<td> |
|
|
360 |
Contains information about the fill of the shape. |
|
|
361 |
</td> |
|
|
362 |
</tr> |
|
|
363 |
<tr> |
|
|
364 |
<td>stroke</td> |
|
|
365 |
<td><code>Object</code></td> |
|
|
366 |
<td> |
|
|
367 |
Contains information about the stroke of the shape. |
|
|
368 |
</td> |
|
|
369 |
</tr> |
|
|
370 |
<tr> |
|
|
371 |
<td><code>transformOrigin</code></td> |
|
|
372 |
<td><code>Array</code></td> |
|
|
373 |
<td>The x and y values for the transformOrigin of a transform.</td> |
|
|
374 |
</tr> |
|
|
375 |
<tr> |
|
|
376 |
<td><code>transform</code></td> |
|
|
377 |
<td><code>String</code></td> |
|
|
378 |
<td>A string containing, in order, transform operations applied to the shape instance. The <code>transform</code> string can contain the following values: |
|
|
379 |
<dl> |
|
|
380 |
<dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd> |
|
|
381 |
<dt>translate</dt><dd>Specifies a 2d translation.</dd> |
|
|
382 |
<dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd> |
|
|
383 |
<dt>scale</dt><dd>Specifies a 2d scaling operation.</dd> |
|
|
384 |
<dt>translateX</dt><dd>Translates the shape along the x-axis.</dd> |
|
|
385 |
<dt>translateY</dt><dd>Translates the shape along the y-axis.</dd> |
|
|
386 |
<dt>skewX</dt><dd>Skews the shape around the x-axis.</dd> |
|
|
387 |
<dt>skewY</dt><dd>Skews the shape around the y-axis.</dd> |
|
|
388 |
</dl> |
|
|
389 |
Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform |
|
|
390 |
that will apply the transform to the current matrix. The below code illustrates how you might use the <code>transform</code> attribute to instantiate a recangle with a rotation of 45 degrees. |
|
|
391 |
<pre class="code prettyprint">var myRect = new Y.Rect({ |
|
|
392 |
type:"rect", |
|
|
393 |
width: 50, |
|
|
394 |
height: 40, |
|
|
395 |
transform: "rotate(45)" |
|
|
396 |
};</pre> |
|
|
397 |
|
|
|
398 |
The code below would apply <code>translate</code> and <code>rotate</code> to an existing shape.</p> |
|
|
399 |
<pre class="code prettyprint">myRect.set("transform", "translate(40, 50) rotate(45)");</pre> |
|
|
400 |
|
|
|
401 |
</td> |
|
|
402 |
</tr> |
|
|
403 |
</table> |
|
|
404 |
|
|
|
405 |
<h4 id="shapemethods">Shape Methods</h4> |
|
|
406 |
|
|
|
407 |
<p>Shapes can also be manipulated by the following methods:</p> |
|
|
408 |
<table> |
|
|
409 |
<tr> |
|
|
410 |
<th>Method</th> |
|
|
411 |
<th>Description</th> |
|
|
412 |
</tr> |
|
|
413 |
<tr> |
|
|
414 |
<td><code>addClass</code></td> |
|
|
415 |
<td>Adds a class to the underlying HTMLElement.</td> |
|
|
416 |
</tr> |
|
|
417 |
<tr> |
|
|
418 |
<td><code>removeClass</code></td> |
|
|
419 |
<td>Removes a class to the underlying HTMLElement.</td> |
|
|
420 |
</tr> |
|
|
421 |
<tr> |
|
|
422 |
<td><code>getXY</code></td> |
|
|
423 |
<td>Gets the current position of the shape in page coordinates. Returns an array, <code>[x, y,]</code>, with the coordinates.</td> |
|
|
424 |
</tr> |
|
|
425 |
<tr> |
|
|
426 |
<td><code>setXY</code></td> |
|
|
427 |
<td>Sets the current position of the shape in page coordinates. Accepts an array, <code>[x, y]</code>, with the coordinates.</td> |
|
|
428 |
</tr> |
|
|
429 |
<tr> |
|
|
430 |
<td><code>get</code></td> |
|
|
431 |
<td>Returns the value of a given attribute.</td> |
|
|
432 |
</tr> |
|
|
433 |
<tr> |
|
|
434 |
<td><code>set</code></td> |
|
|
435 |
<td>Sets the value of an attribute.</td> |
|
|
436 |
</tr> |
|
|
437 |
<tr> |
|
|
438 |
<td><code>rotate</code></td> |
|
|
439 |
<td>Rotates the shape clockwise around it <code>transformOrigin</code>.</td> |
|
|
440 |
</tr> |
|
|
441 |
<tr> |
|
|
442 |
<td><code>translate</code></td> |
|
|
443 |
<td>Specifies a 2d translation.</td> |
|
|
444 |
</tr> |
|
|
445 |
<tr> |
|
|
446 |
<td><code>translateX</code></td> |
|
|
447 |
<td>Translates the shape along the x-axis.</td> |
|
|
448 |
</tr> |
|
|
449 |
<tr> |
|
|
450 |
<td><code>translateY</code></td> |
|
|
451 |
<td>Translates the shape along the y-axis.</td> |
|
|
452 |
</tr> |
|
|
453 |
<tr> |
|
|
454 |
<td><code>skew</code></td> |
|
|
455 |
<td>Skews the shape around the x-axis and y-axis.</td> |
|
|
456 |
</tr> |
|
|
457 |
<tr> |
|
|
458 |
<td><code>skewX</code></td> |
|
|
459 |
<td>Skews the shape around the x-axis.</td> |
|
|
460 |
</tr> |
|
|
461 |
<tr> |
|
|
462 |
<td><code>skewY</code></td> |
|
|
463 |
<td>Skews the shape around the y-axis.</td> |
|
|
464 |
</tr> |
|
|
465 |
<tr> |
|
|
466 |
<td><code>scale</code></td> |
|
|
467 |
<td>Specifies a 2d scaling operation.</td> |
|
|
468 |
</tr> |
|
|
469 |
</table> |
|
|
470 |
|
|
|
471 |
<h4 id="drawingmethods">Drawing Methods</h4> |
|
|
472 |
|
|
|
473 |
<p>Unlike the other included shapes, the <code>Path</code> class is not pre-defined. Setting the size, fill and/or stroke of a pre-defined shape will render the shape. This is not true with the <code>Path</code>. To render |
|
|
474 |
a <code>Path</code> instance, its drawing methods need to be leveraged. These drawing methods can also be leveraged when creating custom shapes. Available drawing methods include: |
|
|
475 |
<dl> |
|
|
476 |
<dt>moveTo</dt><dd>Moves to a coordinate point without drawing a line.</dd> |
|
|
477 |
<dt>lineTo</dt><dd>Draws a line segment from the current point to the specified point.</dd> |
|
|
478 |
<dt>curveTo</dt><dd>Draws a curve based on a start point, end point and two control points.</dd> |
|
|
479 |
<dt>quadraticCurveTo</dt><dd>Draws a quadratic curve based on a start point, end point and two control points.</dd> |
|
|
480 |
<dt>end</dt><dd>Ends a drawing operation. The path or custom shape will draw after end is called.</dd> |
|
|
481 |
<dt>clear</dt><dd>Clears all contents of a path or custom shape.</dd> |
|
|
482 |
</dl> |
|
|
483 |
</p> |
|
|
484 |
|
|
|
485 |
<h4 id="strokesandfills">Strokes and Fills</h4> |
|
|
486 |
|
|
|
487 |
<p>All <code>Shape</code> instances contain <code>stroke</code> and <code>fill</code> attributes. They are used to define the colors for a <code>Shape</code>.</p> |
|
|
488 |
|
|
|
489 |
<h5 id="definingstrokes">Defining a Stroke</h5> |
|
|
490 |
<p>The <code>stroke</code> attribute has six properties.</p> |
|
|
491 |
<dl> |
|
|
492 |
<dt>color</dt><dd>The color of the stroke.</dd> |
|
|
493 |
<dt>weight</dt><dd>Number that indicates the width of the stroke.</dd> |
|
|
494 |
<dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd> |
|
|
495 |
<dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the |
|
|
496 |
length of the dash. The second index indicates the length of gap. |
|
|
497 |
<dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified: |
|
|
498 |
<dl> |
|
|
499 |
<dt>butt (default)</dt><dd>Specifies a butt linecap.</dd> |
|
|
500 |
<dt>square</dt><dd>Specifies a sqare linecap.</dd> |
|
|
501 |
<dt>round</dt><dd>Specifies a round linecap.</dd> |
|
|
502 |
</dl> |
|
|
503 |
</dd> |
|
|
504 |
<dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified: |
|
|
505 |
<dl> |
|
|
506 |
<dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd> |
|
|
507 |
<dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd> |
|
|
508 |
<dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having |
|
|
509 |
separate miter and miter limit values.</dd> |
|
|
510 |
</dl> |
|
|
511 |
</dd> |
|
|
512 |
</dl> |
|
|
513 |
<p>The code below would set a 2 pixel solid red stroke on <code>myshape</code>.</p> |
|
|
514 |
<pre class="code prettyprint">myshape.set("stroke", { |
|
|
515 |
color: "#ff0000", |
|
|
516 |
weight: 2 |
|
|
517 |
});</pre> |
|
|
518 |
|
|
|
519 |
<p>The <code>dashstyle</code> property can be used to create a dashed stroke on a shape.</p> |
|
|
520 |
<pre class="code prettyprint">myshape.set("stroke", { |
|
|
521 |
color: "#ff0000", |
|
|
522 |
weight: 2, |
|
|
523 |
dashstyle: [3, 2] |
|
|
524 |
});</pre> |
|
|
525 |
|
|
|
526 |
|
|
|
527 |
<h5 id="definingfills">Defining a Fill</h5> |
|
|
528 |
<p>The <code>fill</code> attribute has the following properties.</p> |
|
|
529 |
<dl> |
|
|
530 |
<dt>color</dt><dd>The color of the fill.</dd> |
|
|
531 |
<dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd> |
|
|
532 |
<dt>type</dt><dd>Type of fill. |
|
|
533 |
<dl> |
|
|
534 |
<dt>solid</dt><dd>Solid single color fill. (default)</dd> |
|
|
535 |
<dt>linear</dt><dd>Linear gradient fill.</dd> |
|
|
536 |
<dt>radial</dt><dd>Radial gradient fill.</dd> |
|
|
537 |
</dl> |
|
|
538 |
</dd> |
|
|
539 |
</dl> |
|
|
540 |
|
|
|
541 |
<p>If a <code>linear</code> or <code>radial</code> is specified as the fill type. The following additional property is used: |
|
|
542 |
<dl> |
|
|
543 |
<dt>stops</dt><dd>An array of objects containing the following properties: |
|
|
544 |
<dl> |
|
|
545 |
<dt>color</dt><dd>The color of the stop.</dd> |
|
|
546 |
<dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE <= 8</dd> |
|
|
547 |
<dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> |
|
|
548 |
</dl> |
|
|
549 |
</dd> |
|
|
550 |
<p>Linear gradients also have the following property:</p> |
|
|
551 |
<dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd> |
|
|
552 |
|
|
|
553 |
<p>Radial gradients have the following additional properties:</p> |
|
|
554 |
<dt>r</dt><dd>Radius of the gradient circle.</dd> |
|
|
555 |
<dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd> |
|
|
556 |
<dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd> |
|
|
557 |
<dt>cx</dt><dd>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5. |
|
|
558 |
<p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p> |
|
|
559 |
</dd> |
|
|
560 |
<dt>cy</dt><dd>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5. |
|
|
561 |
<p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p> |
|
|
562 |
</dd> |
|
|
563 |
</dl> |
|
|
564 |
<h3 id="radial-gradient-tool">Radial Gradient Tool</h3> |
|
|
565 |
<!-- doesn't contain the header because it may be h3 or h2 --> |
|
|
566 |
<p> |
|
|
567 |
Try this simple <a href="graphics-radial-tool.html">tool</a> that helps |
|
|
568 |
you interactively preview radial gradient fills. |
|
|
569 |
<a href="graphics-radial-tool.html"> |
|
|
570 |
<img style="border: 1px solid #bfbfbf; height:265px; width:645px;" alt="Screen capture of Graphics radial gradient tool" src="../assets/graphics/img/radial_tool_capture.png"> |
|
|
571 |
</a> |
|
|
572 |
<br><a href="graphics-radial-tool.html" class="button">Try It</a> |
|
|
573 |
|
|
|
574 |
</p> |
|
|
575 |
<p> |
|
|
576 |
Avoid the trial and error, quickly get just the look you want. |
|
|
577 |
As you drag and resize different parts of the control, you preview |
|
|
578 |
the radial gradient fill and see its property values update. |
|
|
579 |
Click the "Get Code Snippet" button for code you can paste into a |
|
|
580 |
Graphics instance to reproduce the same gradient. |
|
|
581 |
</p> |
|
|
582 |
|
|
|
583 |
|
|
|
584 |
<h2 id="issues">Known Issues</h2> |
|
|
585 |
<ul class="spaced"> |
|
|
586 |
<li> |
|
|
587 |
<p>Gradients need more need more normalization across technologies. Certain gradient types have limitations on different browsers. |
|
|
588 |
</p> |
|
|
589 |
<ul> |
|
|
590 |
<li>Radial gradients contain the properties <code>cx</code> and <code>cy</code>. These properties currently have no impact on Android or IE 6 - 8.</li> |
|
|
591 |
<li>After being initially set, gradients cannot be updated in IE 6 - 8.</li> |
|
|
592 |
</ul> |
|
|
593 |
</li> |
|
|
594 |
<li> |
|
|
595 |
<p>Path element currently lacks the ability to have interactivity in Android.</p> |
|
|
596 |
</li> |
|
|
597 |
</ul> |
|
|
598 |
</div> |
|
|
599 |
</div> |
|
|
600 |
</div> |
|
|
601 |
|
|
|
602 |
<div class="yui3-u-1-4"> |
|
|
603 |
<div class="sidebar"> |
|
|
604 |
|
|
|
605 |
<div id="toc" class="sidebox"> |
|
|
606 |
<div class="hd"> |
|
|
607 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
608 |
</div> |
|
|
609 |
|
|
|
610 |
<div class="bd"> |
|
|
611 |
<ul class="toc"> |
|
|
612 |
<li> |
|
|
613 |
<a href="#getting-started">Getting Started</a> |
|
|
614 |
</li> |
|
|
615 |
<li> |
|
|
616 |
<a href="#using">Using the Graphics module</a> |
|
|
617 |
<ul class="toc"> |
|
|
618 |
<li> |
|
|
619 |
<a href="#instantiating">Instantiating A Graphic instance</a> |
|
|
620 |
<ul class="toc"> |
|
|
621 |
<li> |
|
|
622 |
<a href="#css">CSS</a> |
|
|
623 |
</li> |
|
|
624 |
<li> |
|
|
625 |
<a href="#html">HTML</a> |
|
|
626 |
</li> |
|
|
627 |
<li> |
|
|
628 |
<a href="#javascript">JavaScript</a> |
|
|
629 |
</li> |
|
|
630 |
</ul> |
|
|
631 |
</li> |
|
|
632 |
<li> |
|
|
633 |
<a href="#creating-shapes">Creating shapes</a> |
|
|
634 |
</li> |
|
|
635 |
<li> |
|
|
636 |
<a href="#path-drawing-tool">Path Drawing Tool</a> |
|
|
637 |
</li> |
|
|
638 |
<li> |
|
|
639 |
<a href="#aboutgraphic">Working with the Graphic Class</a> |
|
|
640 |
<ul class="toc"> |
|
|
641 |
<li> |
|
|
642 |
<a href="#graphicattributes">Graphic Attributes</a> |
|
|
643 |
</li> |
|
|
644 |
<li> |
|
|
645 |
<a href="#graphicmethods">Graphic Methods</a> |
|
|
646 |
</li> |
|
|
647 |
</ul> |
|
|
648 |
</li> |
|
|
649 |
<li> |
|
|
650 |
<a href="#aboutshapes">Working with Shapes</a> |
|
|
651 |
<ul class="toc"> |
|
|
652 |
<li> |
|
|
653 |
<a href="#shapeattributes">Shape Attributes</a> |
|
|
654 |
</li> |
|
|
655 |
<li> |
|
|
656 |
<a href="#shapemethods">Shape Methods</a> |
|
|
657 |
</li> |
|
|
658 |
<li> |
|
|
659 |
<a href="#drawingmethods">Drawing Methods</a> |
|
|
660 |
</li> |
|
|
661 |
<li> |
|
|
662 |
<a href="#strokesandfills">Strokes and Fills</a> |
|
|
663 |
<ul class="toc"> |
|
|
664 |
<li> |
|
|
665 |
<a href="#definingstrokes">Defining a Stroke</a> |
|
|
666 |
</li> |
|
|
667 |
<li> |
|
|
668 |
<a href="#definingfills">Defining a Fill</a> |
|
|
669 |
</li> |
|
|
670 |
</ul> |
|
|
671 |
</li> |
|
|
672 |
</ul> |
|
|
673 |
</li> |
|
|
674 |
<li> |
|
|
675 |
<a href="#radial-gradient-tool">Radial Gradient Tool</a> |
|
|
676 |
</li> |
|
|
677 |
</ul> |
|
|
678 |
</li> |
|
|
679 |
<li> |
|
|
680 |
<a href="#issues">Known Issues</a> |
|
|
681 |
</li> |
|
|
682 |
</ul> |
|
|
683 |
</div> |
|
|
684 |
</div> |
|
|
685 |
|
|
|
686 |
|
|
|
687 |
|
|
|
688 |
<div class="sidebox"> |
|
|
689 |
<div class="hd"> |
|
|
690 |
<h2 class="no-toc">Examples</h2> |
|
|
691 |
</div> |
|
|
692 |
|
|
|
693 |
<div class="bd"> |
|
|
694 |
<ul class="examples"> |
|
|
695 |
|
|
|
696 |
|
|
|
697 |
<li data-description="Shows how to create a Graphic instance and add shapes."> |
|
|
698 |
<a href="graphics-simple.html">Basic Graphics Implementation</a> |
|
|
699 |
</li> |
|
|
700 |
|
|
|
701 |
|
|
|
702 |
|
|
|
703 |
<li data-description="Shows how to draw lines and polygons."> |
|
|
704 |
<a href="graphics-path.html">Basic Path</a> |
|
|
705 |
</li> |
|
|
706 |
|
|
|
707 |
|
|
|
708 |
|
|
|
709 |
<li data-description="Shows how to create linear and radial gradient fills."> |
|
|
710 |
<a href="graphics-gradients.html">Create Gradient Fills</a> |
|
|
711 |
</li> |
|
|
712 |
|
|
|
713 |
|
|
|
714 |
|
|
|
715 |
<li data-description="Shows how to add drag to a shape."> |
|
|
716 |
<a href="graphics-drag.html">Basic drag with graphic object</a> |
|
|
717 |
</li> |
|
|
718 |
|
|
|
719 |
|
|
|
720 |
|
|
|
721 |
<li data-description="Shows how to apply transforms to shape."> |
|
|
722 |
<a href="graphics-transforms.html">Using Transforms</a> |
|
|
723 |
</li> |
|
|
724 |
|
|
|
725 |
|
|
|
726 |
|
|
|
727 |
<li data-description="Shows how to use a custom shape with the Graphics module."> |
|
|
728 |
<a href="graphics-customshape.html">Custom Shape</a> |
|
|
729 |
</li> |
|
|
730 |
|
|
|
731 |
|
|
|
732 |
|
|
|
733 |
<li data-description="Shows to use the graphics api to draw a realistic glass."> |
|
|
734 |
<a href="graphics-muddyglass.html">Transparent Glass with Shadow</a> |
|
|
735 |
</li> |
|
|
736 |
|
|
|
737 |
|
|
|
738 |
|
|
|
739 |
<li data-description="Shows to use the graphics api to draw a violin."> |
|
|
740 |
<a href="graphics-violin.html">Complex Drawing: Violin</a> |
|
|
741 |
</li> |
|
|
742 |
|
|
|
743 |
|
|
|
744 |
|
|
|
745 |
|
|
|
746 |
</ul> |
|
|
747 |
</div> |
|
|
748 |
</div> |
|
|
749 |
|
|
|
750 |
|
|
|
751 |
|
|
|
752 |
<div class="sidebox"> |
|
|
753 |
<div class="hd"> |
|
|
754 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
755 |
</div> |
|
|
756 |
|
|
|
757 |
<div class="bd"> |
|
|
758 |
<ul class="examples"> |
|
|
759 |
|
|
|
760 |
|
|
|
761 |
|
|
|
762 |
|
|
|
763 |
|
|
|
764 |
|
|
|
765 |
|
|
|
766 |
|
|
|
767 |
|
|
|
768 |
|
|
|
769 |
|
|
|
770 |
|
|
|
771 |
|
|
|
772 |
|
|
|
773 |
|
|
|
774 |
|
|
|
775 |
|
|
|
776 |
|
|
|
777 |
<li data-description="This example demonstrates animating an element along a curved path using bezier control points."> |
|
|
778 |
<a href="../anim/curve.html">Animating Along a Curved Path</a> |
|
|
779 |
</li> |
|
|
780 |
|
|
|
781 |
|
|
|
782 |
</ul> |
|
|
783 |
</div> |
|
|
784 |
</div> |
|
|
785 |
|
|
|
786 |
</div> |
|
|
787 |
</div> |
|
|
788 |
</div> |
|
|
789 |
</div> |
|
|
790 |
|
|
|
791 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
792 |
<script>prettyPrint();</script> |
|
|
793 |
|
|
|
794 |
<script> |
|
|
795 |
YUI.Env.Tests = { |
|
|
796 |
examples: [], |
|
|
797 |
project: '../assets', |
|
|
798 |
assets: '../assets/graphics', |
|
|
799 |
name: 'graphics', |
|
|
800 |
title: 'Graphics', |
|
|
801 |
newWindow: '', |
|
|
802 |
auto: false |
|
|
803 |
}; |
|
|
804 |
YUI.Env.Tests.examples.push('graphics-simple'); |
|
|
805 |
YUI.Env.Tests.examples.push('graphics-path'); |
|
|
806 |
YUI.Env.Tests.examples.push('graphics-gradients'); |
|
|
807 |
YUI.Env.Tests.examples.push('graphics-drag'); |
|
|
808 |
YUI.Env.Tests.examples.push('graphics-transforms'); |
|
|
809 |
YUI.Env.Tests.examples.push('graphics-customshape'); |
|
|
810 |
YUI.Env.Tests.examples.push('graphics-muddyglass'); |
|
|
811 |
YUI.Env.Tests.examples.push('graphics-violin'); |
|
|
812 |
YUI.Env.Tests.examples.push('curve'); |
|
|
813 |
|
|
|
814 |
</script> |
|
|
815 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
816 |
|
|
|
817 |
|
|
|
818 |
|
|
|
819 |
</body> |
|
|
820 |
</html> |