9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste<div id="mygraphiccontainer"></div>

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste<script>

9a9e9f9aa372dc00549820097d30655761b72893Jaco JoosteYUI({filter:"raw"}).use('graphics', function (Y)

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste{

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste var RoundedRect = function()

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste {

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste RoundedRect.superclass.constructor.apply(this, arguments);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste }

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste RoundedRect.NAME = "roundedRect";

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste Y.extend(RoundedRect, Y.Shape, {

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste _draw: function()

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste {

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste var w = this.get("width"),

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste h = this.get("height"),

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste ew = this.get("ellipseWidth"),

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste eh = this.get("ellipseHeight");

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.clear();

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.moveTo(0, eh);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.lineTo(0, h - eh);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.quadraticCurveTo(0, h, ew, h);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.lineTo(w - ew, h);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.quadraticCurveTo(w, h, w, h - eh);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.lineTo(w, eh);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.quadraticCurveTo(w, 0, w - ew, 0);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.lineTo(ew, 0);

4701cb94cccc5ef52c5333593fe9dd5a2376a9d9Jaco Jooste this.quadraticCurveTo(0, 0, 0, eh);

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste this.end();

9a9e9f9aa372dc00549820097d30655761b72893Jaco Jooste }

}, {

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>