src/src/draw/sprite/Arc.js

   1 /**
   2  * @class Ext.draw.sprite.Arc
   3  * @extend Ext.draw.sprite.Circle
   4  *
   5  *  A sprite that represents a circular arc.
   6  *
   7  *     @example preview miniphone
   8  *     var component = new Ext.draw.Component({
   9  *       items: [{
  10  *         type: 'arc',
  11  *         cx: 100,
  12  *         cy: 100,
  13  *         r: 25,
  14  *         fillStyle: 'blue',
  15  *         startAngle: 0,
  16  *         endAngle: Math.PI,
  17  *         anticlockwise: true
  18  *       }]
  19  *     });
  20  *     Ext.Viewport.setLayout('fit');
  21  *     Ext.Viewport.add(component);
  22  */
  23 Ext.define("Ext.draw.sprite.Arc", {
  24     extend: "Ext.draw.sprite.Circle",
  25     alias: 'sprite.arc',
  26     type: 'arc',
  27     inheritableStatics: {
  28         def: {
  29             processors: {
  30                 /**
  31                  * @cfg {Number} [startAngle=0] The beginning angle of the arc.
  32                  */
  33                 startAngle: "number",
  34
  35                 /**
  36                  * @cfg {Number} [endAngle=Math.PI*2] The ending angle of the arc.
  37                  */
  38                 endAngle: "number",
  39
  40                 /**
  41                  * @cfg {Boolean} [anticlockwise=false] Determines whether or not the arc is drawn clockwise.
  42                  */
  43                 anticlockwise: "bool"
  44             },
  45             aliases: {
  46                 from: "startAngle",
  47                 to: "endAngle",
  48                 start: "startAngle",
  49                 end: "endAngle"
  50             },
  51             defaults: {
  52                 startAngle: 0,
  53                 endAngle: Math.PI * 2,
  54                 anticlockwise: false
  55             },
  56             dirtyTriggers: {
  57                 startAngle: 'path',
  58                 endAngle: 'path',
  59                 anticlockwise: 'path'
  60             }
  61         }
  62     },
  63
  64     updatePath: function (path, attr) {
  65         path.arc(attr.cx, attr.cy, attr.r, attr.startAngle, attr.endAngle, attr.anticlockwise);
  66     }
  67 });