graphics-pathutility.mustache revision 38688a22f899a470ad6fb8c7d60c503cff7035ff
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<div class="intro" style="min-height: 184px;">
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra <img src="{{componentAssets}}/img/pathutility-capture.png" alt="Screen capture of Graphics path utility" style="border: 1px solid #bfbfbf; float:right; height:149px; margin: 0 0 8px 8px; width:395px;"/>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra This simple utility helps you by generating code while you interactively
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra draw graphic paths. This was used to draw the <a href="graphics-violin.html">violin example</a>.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<div class="example newwindow">
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra <a href="graphics-pathutility-example.html" target="_blank" class="button">
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra View Example in New Window
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<h2>The Path Utility</h2>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<p>As you drag the pencil icon, corresponding graphics code is auto-generated.
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo MitraThis code can be copied and pasted into a graphics instance to reproduce
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitrathe paths you created with the pencil.
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<h2>Initial State</h2>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<p>When the utility window is loaded, its generated code is placed
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitrain the text area control. The initial code assumes you already have a page
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitracontaining code for a graphics container such as this,</p>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<div id="mygraphiccontainer"></div>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<p>CSS such as this,</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra#mygraphiccontainer {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra position: relative;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra width: 700px;
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra height:400px;
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitraand a YUI instance containing a `Graphics` object such as this
a31d4503481b752a9ea058cce3d9b025d040a87cTilo MitraYUI().use('graphics', function (Y) {
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra // generated code from the path utility goes here
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<p>The utility generates pastable code for an `addShape` method that will
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitracreate and render a path. It generates some fill and stroke placeholder code
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitrayou can change after it's pasted into your code.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<p><Strong>Note:</strong>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo MitraAs you draw paths with the pencil, they won't have these attributes, you'll
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitraonly see thin, red lines for precision. The attibutes below will only show after
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitrayou paste the code in your page.</p>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra type: "path",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra color: "#00dd00"
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra type: "linear",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra {color: "#cc0000", opacity: 1, offset: 0},
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra {color: "#00cc00", opacity: 0.3, offset: 0.8} // Opacity of stops not available in IE
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<h2>LineTo (Drag Pencil)</h2>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<p>Drag the pencil icon. The `drag:end` event sets the lineTo XY value.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<h2>MoveTo (Shift + Drag)</h2>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<p>Drag the pencil icon with the shift key down to move without drawing a line.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<h2>CurveTo (Alt + Drag)</h2>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<p>Drag the pencil icon with the alt key down. This draws a curve and displays
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitratwo draggable control points. The curve adjusts while you drag the control points.
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo MitraClicking the pencil icon, or starting another line, finalizes the `curveTo`.</p>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<h2>New Path Object</h2>
1b94590fd02ca19669dfb4b5deb563a290459d81Tilo Mitra<p>Crate a new path object with a new name by changing the name in the
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra'Graphic Object Name' text input, then clicking the 'New' button.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<h2>Trace an Image</h2>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<p>You can modify the CSS of #mygraphiccontainer to include an image background.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo MitraThis will allow you to trace the contours of an image.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra#mygraphiccontainer {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra background: url(assets/images/my-dog.jpg);
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<img src="{{componentAssets}}/img/my-dog.jpg" alt="Tracing a picture of my dog
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitrawith a Graphics path" width="652" height="268"/>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitrazooming the browser can be helpful in accuracy.