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: 400px;

2N/A height: 300px;

2N/A}

2N/A</style>

2N/A<div class="intro">

2N/A<p>

2N/AThis example shows how to use the `Graphics` to create a custom shape. Currently, the `Graphics` module has four shapes:

2N/A</p>

2N/A<ul>

2N/A <li>rect</li>

2N/A <li>circle</li>

2N/A <li>ellipse</li>

2N/A <li>path</li>

2N/A</ul>

2N/A<p>

2N/AYou can also create your own custom shapes. If you need to have reusable shapes, you can do this by extending the `Shape` class. Once you have created a custom class, you can instantiate it by passing

2N/Aa reference of your class in the `type` attribute of your config to the `addShape` method. In this example, we will create shape called `RoundedRect`.

2N/A</p>

2N/A</div>

2N/A<div class="example">

2N/A{{>graphics-customshape-source}}

2N/A</div>

2N/A

2N/A<h2>HTML</h2>

2N/A```

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

2N/A```

2N/A

2N/A<h2>CSS</h2>

2N/A```

2N/A#mygraphiccontainer {

2N/A position: relative;

2N/A width: 400px;

2N/A height: 300px;

2N/A}

2N/A```

2N/A<h2>JavaScript</h2>

2N/A

2N/A<p>Create a custom class. When creating shapes, add a method called `_draw`. This is where you will put your drawing logic for the custom shape. You will also need to mix in any attributes that you need.</p>

2N/A

```

var RoundedRect = function()

{

RoundedRect.superclass.constructor.apply(this, arguments);

}

RoundedRect.NAME = "roundedRect";

Y.extend(RoundedRect, Y.Shape, {

_draw: function()

{

var w = this.get("width"),

h = this.get("height"),

ew = this.get("ellipseWidth"),

eh = this.get("ellipseHeight");

this.clear();

this.moveTo(0, eh);

this.lineTo(0, h - eh);

this.quadraticCurveTo(0, h, ew, h);

this.lineTo(w - ew, h);

this.quadraticCurveTo(w, h, w, h - eh);

this.lineTo(w, eh);

this.quadraticCurveTo(w, 0, w - ew, 0);

this.lineTo(ew, 0);

this.quadraticCurveTo(0, 0, 0, eh);

this.end();

}

}, {

ATTRS: Y.mix({

ellipseWidth: {

value: 4

},

ellipseHeight: {

value: 4

}

}, Y.Shape.ATTRS)

});

Y.RoundedRect = RoundedRect;

```

<p>Create a `Graphic` instance and render it to an `HTMLElement`</p>

```

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

```

<p>Using the `addShape` method, add an instance of the custom class to the `Graphic` instance.</p>

```

myroundrect = mygraphic.addShape({

type: Y.RoundedRect,

width: 300,

height: 200,

x: 50,

y: 50,

ellipseWidth: 12,

ellipseHeight: 12,

fill: {

type: "linear",

stops: [

{color: "#9aa9bb", offset: 0},

{color: "#eeefff", offset: 0.4},

{color: "#00000f", offset: 0.8},

{color: "#9aa9bb", offset: 1}

],

rotation: 45

},

stroke: {

weight: 2,

color: "#000"

}

});

```

<h2>Complete Example Source</h2>

```

{{>graphics-customshape-source}}

```