<div class="intro">

<p>This simple utility helps you by generating code while you interactively

draw graphic paths.</p>

</div>

<div class="example newwindow">

<a href="graphics-pathutility-example.html" target="_blank" class="button">

View Example in New Window

</a>

</div>

<h2>The Path Utility</h2>

<p>As you drag the pencil icon, corresponding graphics code is auto-generated.

This code can be copied and pasted into a graphics instance to reproduce

the paths you created with the pencil.

</p>

<h2>Initial State</h2>

<p>When the utility window is loaded, its generated code is placed

in the text area control. The initial code assumes you already have a page

containing code for a graphics container such as this,</p>

```

<div id="mygraphiccontainer"></div>

```

<p>CSS such as this,</p>

```

#mygraphiccontainer {

position: relative;

width: 700px;

height:400px;

}

```

and a YUI instance containing a `Graphics` object such as this

```

YUI().use('graphics', function (Y) {

var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

// generated code from the path utility goes here

});

```

<p>The utility generates pastable code for an `addShape` method that will

create and render a path. It generates some fill and stroke placeholder code

you can change after it's pasted into your code.</p>

<p><Strong>Note:</strong>

As you draw paths with the pencil, they won't have these attributes, you'll

only see thin, red lines for precision. The attibutes below will only show after

you paste the code in your page.</p>

```

{

type: "path",

stroke: {

weight: 2,

color: "#00dd00"

},

fill: {

type: "linear",

stops: [

{color: "#cc0000", opacity: 1, offset: 0},

{color: "#00cc00", opacity: 0.3, offset: 0.8} // Opacity of stops not available in IE

]

}

}

```

<h2>LineTo (Drag Pencil)</h2>

<p>Drag the pencil icon. The `drag:end` event sets the lineTo XY value.</p>

<h2>MoveTo (Shift + Drag)</h2>

<p>Drag the pencil icon with the shift key down to move without drawing a line.</p>

<h2>CurveTo (Alt + Drag)</h2>

<p>Drag the pencil icon with the alt key down. This draws a curve and displays

two draggable control points. The curve adjusts while you drag the control points.

Clicking the pencil icon, or starting another line, finalizes the `curveTo`.</p>

<h2>New Path Object</h2>

<p>Crate a new path object with a new name by changing the name in the

'Graphic Object Name' text input, then clicking the 'New' button.</p>