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.
<div id="mygraphiccontainer"></div>
#mygraphiccontainer {
position: relative;
width: 400px;
height: 300px;
}
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"
}
});
<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>