Example: Using Transforms

HTML

<div id="mygraphiccontainer"></div>
<div>
 <button type="button" id="rotate">Rotate</button><br/>
 <button type="button" id="translate">Translate</button><br/>
</div>

CSS

#mygraphiccontainer {
 position: relative;
 width: 700px;
 height:200px;
}

Javascript

Create a Graphic instance.

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

Create an ellipse, recangle and circle.

var myrect = mygraphic.addShape({
 type: "rect",
 stroke: {
 color:"#000",
 weight: 1
 },
 fill: {
 color: "#fde"
 },
 width:40,
 height:50
});
 
var myellipse = mygraphic.addShape({
 type: "ellipse",
 stroke: {
 color: "#ddd",
 weight: 2
 },
 fill: {
 color:"#f00",
 opacity: 0.5
 },
 width: 100,
 height: 30,
 x:100,
 y:50
});
 
var mycircle = mygraphic.addShape({
 type: "circle",
 stroke: {
 color:"#ff0",
 weight: 1
 },
 fill: {
 color:"#00f"
 },
 radius: 12,
 x: -5,
 y: -5
});

Add a method to apply a rotation to the rectangle and ellipse.

function rotateShapes(e)
{
 myrect.rotate(45);
 myellipse.rotate(45);
}

Add a method to apply a translate to the circle.

function translateShapes(e)
{
 mycircle.translate(50, 60);
}

Add click listeners to the buttons.

Y.on("click", rotateShapes, "#rotate");
Y.on("click", translateShapes, "#translate");

Complete Example Source

<div id="mygraphiccontainer"></div>
<div>
 <button type="button" id="rotate">Rotate</button><br/>
 <button type="button" id="translate">Translate</button><br/>
</div>
<script>
 YUI().use('graphics', function (Y) 
 { 
 var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
 var myrect = mygraphic.addShape({
 type: "rect",
 stroke: {
 color:"#000",
 weight: 1
 },
 fill: {
 color: "#fde"
 },
 width:40,
 height:50
 });
 
 var myellipse = mygraphic.addShape({
 type: "ellipse",
 stroke: {
 color: "#ddd",
 weight: 2
 },
 fill: {
 color:"#f00",
 opacity: 0.5
 },
 width: 100,
 height: 30,
 x:100,
 y:50
 });
 
 var mycircle = mygraphic.addShape({
 type: "circle",
 stroke: {
 color:"#ff0",
 weight: 1
 },
 fill: {
 color:"#00f"
 },
 radius: 12,
 x: -5,
 y: -5
 });
 function rotateShapes(e)
 {
 myrect.rotate(45);
 myellipse.rotate(45);
 }
 function translateShapes(e)
 {
 mycircle.translate(50, 60);
 }
 Y.on("click", rotateShapes, "#rotate");
 Y.on("click", translateShapes, "#translate");
 });
</script>