da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<style scoped>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin#custom-doc { width: 95%; min-width: 950px; }

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin#pagetitle {background-image: url(../../assets/bg_hd.gif);}

3e14f97f673e8a630f076077de35afdd43dc1587Roger A. Faulkner#mygraphiccontainer {

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin position: relative;

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin width: 400px;

7c2fbfb345896881c631598ee3852ce9ce33fb07April Chin height: 300px;

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin}

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin</style>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<div class="intro">

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<p>

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

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin</p>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<ul>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin <li>rect</li>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin <li>circle</li>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin <li>ellipse</li>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin <li>path</li>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin</ul>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<p>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chinYou 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

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

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin</p>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin</div>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<div class="example">

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin{{>graphics-customshape-source}}

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin</div>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<h2>HTML</h2>

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin```

da2e3ebdc1edfbc5028edf1354e7dd2fa69a7968chin<div id="mygraphiccontainer"></div>

```

<h2>CSS</h2>

```

#mygraphiccontainer {

position: relative;

width: 400px;

height: 300px;

}

```

<h2>Javascript</h2>

<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>

```

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}}

```