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:200px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</style>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="intro">

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to apply transforms to shapes.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="example">

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>HTML</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <button type="button" id="rotate">Rotate</button><br/>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <button type="button" id="translate">Translate</button><br/>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>CSS</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:200px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Javascript</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create a `Graphic` instance.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create an ellipse, recangle and circle.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var myrect = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "rect",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#000",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#fde"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width:40,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:50

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var myellipse = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "ellipse",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#ddd",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 2

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#f00",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp opacity: 0.5

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 100,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height: 30,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x:100,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y:50

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var mycircle = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "circle",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#ff0",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#00f"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp radius: 12,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x: -5,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y: -5

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Add a method to apply a rotation to the rectangle and ellipse.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp function rotateShapes(e)

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp myrect.rotate(45);

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp myellipse.rotate(45);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Add a method to apply a translate to the circle.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp function translateShapes(e)

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp mycircle.translate(50, 60);

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Add click listeners to the buttons.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp Y.on("click", rotateShapes, "#rotate");

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp Y.on("click", translateShapes, "#translate");

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```