5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<style scoped>

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

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 400px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height: 300px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</style>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="intro">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<ul>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <li>rect</li>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <li>circle</li>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <li>ellipse</li>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <li>path</li>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</ul>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>

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

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="example">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-customshape-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>HTML</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div id="mygraphiccontainer"></div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>CSS</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 400px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height: 300px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<h2>JavaScript</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp var RoundedRect = function()

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp RoundedRect.NAME = "roundedRect";

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp Y.extend(RoundedRect, Y.Shape, {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp _draw: function()

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp h = this.get("height"),

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ew = this.get("ellipseWidth"),

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp eh = this.get("ellipseHeight");

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp this.clear();

909133170c0bdbed7a7a4a885f39dd32fe961a7cTripp this.moveTo(0, eh);

909133170c0bdbed7a7a4a885f39dd32fe961a7cTripp this.lineTo(0, h - eh);

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

909133170c0bdbed7a7a4a885f39dd32fe961a7cTripp this.lineTo(w - ew, h);

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

909133170c0bdbed7a7a4a885f39dd32fe961a7cTripp this.lineTo(w, eh);

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

909133170c0bdbed7a7a4a885f39dd32fe961a7cTripp this.lineTo(ew, 0);

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp this.end();

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }, {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ATTRS: Y.mix({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ellipseWidth: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp value: 4

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ellipseHeight: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp value: 4

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }, Y.Shape.ATTRS)

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp Y.RoundedRect = RoundedRect;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp myroundrect = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: Y.RoundedRect,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 300,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height: 200,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp x: 50,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp y: 50,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ellipseWidth: 12,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ellipseHeight: 12,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "linear",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stops: [

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

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

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

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

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp ],

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp rotation: 45

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 2,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#000"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Complete Example Source</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-customshape-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```