Version 3.17.2

Example: Custom Shape

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

  • rect
  • circle
  • ellipse
  • path

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.

HTML

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

CSS

#mygraphiccontainer {
    position: relative;
    width: 400px;
    height: 300px;
}

JavaScript

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"
    }
});

Complete Example Source

<div id="mygraphiccontainer"></div>
<script>
YUI({filter:"raw"}).use('graphics', function (Y) 
{ 
    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;
    
    var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
        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"
            }
        });
    });
</script>