graphics/docs/graphics-transforms.mustache

	graphics-transforms.mustache revision d1a404610f53bdff63cde29a00ea9cf48739d91e
2N/A<style scoped>
2N/A#custom-doc { width: 95%; min-width: 950px; }
2N/A#pagetitle {background-image: url(../../assets/bg_hd.gif);}
2N/A#mygraphiccontainer {
2N/A    position: relative;
2N/A    width: 700px;
2N/A    height:200px;
2N/A}
2N/A</style>
2N/A<div class="intro">
2N/AThis example shows how to apply transforms to shapes.
2N/A</div>
2N/A<div class="example">
2N/A{{>graphics-transforms-source}}
2N/A</div>
2N/A
2N/A<h2>HTML</h2>
2N/A```
2N/A<div id="mygraphiccontainer"></div>
2N/A<div>
2N/A    <button type="button" id="rotate">Rotate</button><br/>
2N/A    <button type="button" id="translate">Translate</button><br/>
2N/A</div>
2N/A```
2N/A
2N/A<h2>CSS</h2>
2N/A```
2N/A#mygraphiccontainer {
2N/A    position: relative;
2N/A    width: 700px;
2N/A    height:200px;
2N/A}
2N/A```
2N/A
<h2>Javascript</h2>

<p>Create a `Graphic` instance.</p>
```
    var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
```
<p>Create an ellipse, recangle and circle.</p>
```
    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
    });
```

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

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

<p>Add a method to apply a translate to the circle.</p>
```
    function translateShapes(e)
    {
        mycircle.translate(50, 60);
    }
```

<p>Add click listeners to the buttons.</p>
```
    Y.on("click", rotateShapes, "#rotate");
    Y.on("click", translateShapes, "#translate");
```

<h2>Complete Example Source</h2>
```
{{>graphics-transforms-source}}
```