This example shows how to use the `Graphics` to create a custom shape. Currently, the `Graphics` module has four shapes:
You 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 a reference of your class in the `type` attribute of your config to the `addShape` method. In this example, we will create shape called `RoundedRect`.
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.
``` 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; ```Create a `Graphic` instance and render it to an `HTMLElement`
``` var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}), ```Using the `addShape` method, add an instance of the custom class to the `Graphic` instance.
``` 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" } }); ```