5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<style scoped>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#custom-doc { width: 95%; min-width: 950px; }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:300px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</style>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="intro">

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to draw shapes and line segments with the `Path` shape.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="example">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-path-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>HTML</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>CSS</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:300px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Javascript</h2>

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>Create a `Graphic` instance.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create two path elements for end shapes. Give each a red fill and a black stroke.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTrippvar diamond1 = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "path",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#000"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#f00"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

d1a404610f53bdff63cde29a00ea9cf48739d91eTrippvar diamond2 = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "path",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#000"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#f00"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create a path for the connecting segment. Give it a black dashed stroke and no fill. The `dashstyle` property of the stroke attribute allows for the creation of a dashed stroke. The first value is

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippthe length of the dash and the second value is the gap space between dashes.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTrippvar connector = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "path",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#000",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp opacity: 1,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp dashstyle: [3, 4]

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Draw the first diamond.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond1.moveTo(60, 60);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond1.lineTo(80, 40);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond1.lineTo(100, 60);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond1.lineTo(80, 80);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond1.lineTo(60, 60);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond1.end();

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Draw the connector segment.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippconnector.moveTo(100, 60);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippconnector.lineTo(450, 220);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippconnector.end();

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Draw the second diamond.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond2.moveTo(450, 220);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond2.lineTo(470, 200);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond2.lineTo(490, 220);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond2.lineTo(470, 240);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond2.lineTo(450, 220);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippdiamond2.end();

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Complete Example Source</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-path-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```