Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Shape.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-chart-Shape'>/**
19 </span> * @class Ext.chart.Shape
20  * @ignore
21  */
22 Ext.define('Ext.chart.Shape', {
23
24     /* Begin Definitions */
25
26     singleton: true,
27
28     /* End Definitions */
29
30     circle: function (surface, opts) {
31         return surface.add(Ext.apply({
32             type: 'circle',
33             x: opts.x,
34             y: opts.y,
35             stroke: null,
36             radius: opts.radius
37         }, opts));
38     },
39     line: function (surface, opts) {
40         return surface.add(Ext.apply({
41             type: 'rect',
42             x: opts.x - opts.radius,
43             y: opts.y - opts.radius,
44             height: 2 * opts.radius,
45             width: 2 * opts.radius / 5
46         }, opts));
47     },
48     square: function (surface, opts) {
49         return surface.add(Ext.applyIf({
50             type: 'rect',
51             x: opts.x - opts.radius,
52             y: opts.y - opts.radius,
53             height: 2 * opts.radius,
54             width: 2 * opts.radius,
55             radius: null
56         }, opts));
57     },
58     triangle: function (surface, opts) {
59         opts.radius *= 1.75;
60         return surface.add(Ext.apply({
61             type: 'path',
62             stroke: null,
63             path: &quot;M&quot;.concat(opts.x, &quot;,&quot;, opts.y, &quot;m0-&quot;, opts.radius * 0.58, &quot;l&quot;, opts.radius * 0.5, &quot;,&quot;, opts.radius * 0.87, &quot;-&quot;, opts.radius, &quot;,0z&quot;)
64         }, opts));
65     },
66     diamond: function (surface, opts) {
67         var r = opts.radius;
68         r *= 1.5;
69         return surface.add(Ext.apply({
70             type: 'path',
71             stroke: null,
72             path: [&quot;M&quot;, opts.x, opts.y - r, &quot;l&quot;, r, r, -r, r, -r, -r, r, -r, &quot;z&quot;]
73         }, opts));
74     },
75     cross: function (surface, opts) {
76         var r = opts.radius;
77         r = r / 1.7;
78         return surface.add(Ext.apply({
79             type: 'path',
80             stroke: null,
81             path: &quot;M&quot;.concat(opts.x - r, &quot;,&quot;, opts.y, &quot;l&quot;, [-r, -r, r, -r, r, r, r, -r, r, r, -r, r, r, r, -r, r, -r, -r, -r, r, -r, -r, &quot;z&quot;])
82         }, opts));
83     },
84     plus: function (surface, opts) {
85         var r = opts.radius / 1.3;
86         return surface.add(Ext.apply({
87             type: 'path',
88             stroke: null,
89             path: &quot;M&quot;.concat(opts.x - r / 2, &quot;,&quot;, opts.y - r / 2, &quot;l&quot;, [0, -r, r, 0, 0, r, r, 0, 0, r, -r, 0, 0, r, -r, 0, 0, -r, -r, 0, 0, -r, &quot;z&quot;])
90         }, opts));
91     },
92     arrow: function (surface, opts) {
93         var r = opts.radius;
94         return surface.add(Ext.apply({
95             type: 'path',
96             path: &quot;M&quot;.concat(opts.x - r * 0.7, &quot;,&quot;, opts.y - r * 0.4, &quot;l&quot;, [r * 0.6, 0, 0, -r * 0.4, r, r * 0.8, -r, r * 0.8, 0, -r * 0.4, -r * 0.6, 0], &quot;z&quot;)
97         }, opts));
98     },
99     drop: function (surface, x, y, text, size, angle) {
100         size = size || 30;
101         angle = angle || 0;
102         surface.add({
103             type: 'path',
104             path: ['M', x, y, 'l', size, 0, 'A', size * 0.4, size * 0.4, 0, 1, 0, x + size * 0.7, y - size * 0.7, 'z'],
105             fill: '#000',
106             stroke: 'none',
107             rotate: {
108                 degrees: 22.5 - angle,
109                 x: x,
110                 y: y
111             }
112         });
113         angle = (angle + 90) * Math.PI / 180;
114         surface.add({
115             type: 'text',
116             x: x + size * Math.sin(angle) - 10, // Shift here, Not sure why.
117             y: y + size * Math.cos(angle) + 5,
118             text:  text,
119             'font-size': size * 12 / 40,
120             stroke: 'none',
121             fill: '#fff'
122         });
123     }
124 });</pre>
125 </body>
126 </html>