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>