235N/A<div id="mygraphiccontainer"></div>

235N/A<div>

822N/A <button type="button" id="rotate">Rotate</button><br/>

822N/A <button type="button" id="translate">Translate</button><br/>

822N/A</div>

235N/A<script>

935N/A YUI().use('graphics', function (Y)

235N/A {

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

919N/A var myrect = mygraphic.addShape({

919N/A type: "rect",

919N/A stroke: {

919N/A color:"#000",

919N/A weight: 1

919N/A },

919N/A fill: {

919N/A color: "#fde"

919N/A },

919N/A width:40,

919N/A height:50

919N/A });

919N/A

919N/A var myellipse = mygraphic.addShape({

919N/A type: "ellipse",

919N/A stroke: {

919N/A color: "#ddd",

235N/A weight: 2

235N/A },

235N/A fill: {

235N/A color:"#f00",

822N/A opacity: 0.5

235N/A },

235N/A width: 100,

822N/A height: 30,

235N/A x:100,

911N/A y:50

911N/A });

911N/A

911N/A var mycircle = mygraphic.addShape({

235N/A type: "circle",

493N/A stroke: {

493N/A color:"#ff0",

235N/A weight: 1

235N/A },

235N/A fill: {

235N/A color:"#00f"

822N/A },

235N/A radius: 12,

235N/A x: -5,

822N/A y: -5

235N/A });

235N/A function rotateShapes(e)

235N/A {

235N/A myrect.rotate(45);

235N/A myellipse.rotate(45);

851N/A }

851N/A

851N/A function translateShapes(e)

851N/A {

822N/A mycircle.translate(50, 60);

851N/A }

851N/A Y.on("click", rotateShapes, "#rotate");

822N/A Y.on("click", translateShapes, "#translate");

822N/A });

822N/A</script>

865N/A