This example shows how to apply transforms to shapes.
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>