docs/partials/graphics-transforms-source.mustache

	graphics-transforms-source.mustache revision 5e878519d1a8afcc3b0c5d9aa68d4751ed294c86
0N/A<div id="mygraphiccontainer"></div>
0N/A<div>
0N/A    <button type="button" id="rotate">Rotate</button><br/>
0N/A    <button type="button" id="translate">Translate</button><br/>
0N/A</div>
0N/A<script>
0N/A    YUI().use('graphics', function (Y)
0N/A    {
0N/A        var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
0N/A        var myrect = mygraphic.getShape({
0N/A            type: "rect",
0N/A            stroke: {
0N/A                color:"#000",
0N/A                weight: 1
0N/A            },
0N/A            fill: {
0N/A                color: "#fde"
0N/A            },
0N/A            width:40,
0N/A            height:50
        });

        var myellipse = mygraphic.getShape({
            type: "ellipse",
            stroke: {
                color: "#ddd",
                weight: 2
            },
            fill: {
                color:"#f00",
                opacity: 0.5
            },
            width: 100,
            height: 30,
            x:100,
            y:50
        });

        var mycircle = mygraphic.getShape({
            type: "circle",
            stroke: {
                color:"#ff0",
                weight: 1
            },
            fill: {
                color:"#00f"
            },
            radius: 12,
            x: -5,
            y: -5
        });
        function rotateShapes(e)
        {
            myrect.set("rotation", 45);
            myellipse.set("rotation", 45);
        }

        function translateShapes(e)
        {
            mycircle.set("translateX", 50);
            mycircle.set("translateY", 60);
        }
        Y.on("click", rotateShapes, "#rotate");
        Y.on("click", translateShapes, "#translate");
    });
</script>