graphics-customshape.mustache revision 909133170c0bdbed7a7a4a885f39dd32fe961a7c
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<style scoped>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync#custom-doc { width: 95%; min-width: 950px; }
17d67aeb3722c094c6493a3e9a9d0cdfb9453ecdvboxsync#pagetitle {background-image: url(../../assets/bg_hd.gif);}
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync#mygraphiccontainer {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync position: relative;
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync width: 400px;
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync height: 300px;
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync}
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync</style>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<div class="intro">
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<p>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsyncThis example shows how to use the `Graphics` to create a custom shape. Currently, the `Graphics` module has four shapes:
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync</p>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<ul>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync <li>rect</li>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync <li>circle</li>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync <li>ellipse</li>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync <li>path</li>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync</ul>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<p>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsyncYou 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
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsynca reference of your class in the `type` attribute of your config to the `getShape` method. In this example, we will create shape called `RoundedRect`.
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync</p>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync</div>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<div class="example">
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync{{>graphics-customshape-source}}
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync</div>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<h2>HTML</h2>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<div id="mygraphiccontainer"></div>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<h2>CSS</h2>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync#mygraphiccontainer {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync position: relative;
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync width: 400px;
2c691730ab202620fe427110841aa4e0075b7ccavboxsync height: 300px;
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync}
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<h2>Javascript</h2>
3d8242e90019d302159795040e410b3d774a4b0bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<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>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
2c691730ab202620fe427110841aa4e0075b7ccavboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync var RoundedRect = function()
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync RoundedRect.superclass.constructor.apply(this, arguments);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync }
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync RoundedRect.NAME = "roundedRect";
d02610fd604cc8ab4cccf7e3fa510c06cb728ff2vboxsync Y.extend(RoundedRect, Y.Shape, {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync _draw: function()
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync var w = this.get("width"),
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync h = this.get("height"),
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ew = this.get("ellipseWidth"),
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync eh = this.get("ellipseHeight");
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.clear();
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.moveTo(0, eh);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.lineTo(0, h - eh);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.quadraticCurveTo(0, h, ew, h);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.lineTo(w - ew, h);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.quadraticCurveTo(w, h, w, h - eh);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.lineTo(w, eh);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.quadraticCurveTo(w, 0, w - ew, 0);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.lineTo(ew, 0);
032e4e2dc19dfc5f755fca9ec053bf2c38de54d6vboxsync this.quadraticCurveTo(0, 0, 0, eh);
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync this.end();
f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync }
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync }, {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ATTRS: Y.mix({
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ellipseWidth: {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync value: 4
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync },
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ellipseHeight: {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync value: 4
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync }
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync }, Y.Shape.ATTRS)
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync });
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync Y.RoundedRect = RoundedRect;
3baadeafd9922582dad9b32431362e6296417dd8vboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<p>Create a `Graphic` instance and render it to an `HTMLElement`</p>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<p>Using the `getShape` method, add an instance of the custom class to the `Graphic` instance.</p>
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync myroundrect = mygraphic.getShape({
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync type: Y.RoundedRect,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync width: 300,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync height: 200,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync x: 50,
faa254427e497bb7ee255b22581f40112025e92bvboxsync y: 50,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ellipseWidth: 12,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ellipseHeight: 12,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync fill: {
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync type: "linear",
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync stops: [
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync {color: "#9aa9bb", offset: 0},
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync {color: "#eeefff", offset: 0.4},
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync {color: "#00000f", offset: 0.8},
c215a948010614887014a258c1751602d8bf7781vboxsync {color: "#9aa9bb", offset: 1}
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync ],
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync rotation: 45
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync },
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync stroke: {
7c205843b5f25329b7bac4cb41e4c55a21c7aafevboxsync weight: 2,
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync color: "#000"
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync }
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync });
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync<h2>Complete Example Source</h2>
faa254427e497bb7ee255b22581f40112025e92bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync{{>graphics-customshape-source}}
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync```
5f9dfb422a6ed57822f9c0cb94fa7df8d24acc9bvboxsync