+ <pre class="prettyprint lang-js"><span id='Ext-draw-Sprite'>/**
+</span> * @class Ext.draw.Sprite
+ * @extends Object
+ *
+ * A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
+ * The configuration of a Sprite is an object with the following properties:
+ *
+ * - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'.
+ * - **group** - (String/Array) The group that this sprite belongs to, or an array of groups. Only relevant when added to a {@link Ext.draw.Surface}.
+ * - **width** - (Number) Used in rectangle sprites, the width of the rectangle.
+ * - **height** - (Number) Used in rectangle sprites, the height of the rectangle.
+ * - **size** - (Number) Used in square sprites, the dimension of the square.
+ * - **radius** - (Number) Used in circle sprites, the radius of the circle.
+ * - **x** - (Number) The position along the x-axis.
+ * - **y** - (Number) The position along the y-axis.
+ * - **path** - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
+ * - **opacity** - (Number) The opacity of the sprite.
+ * - **fill** - (String) The fill color.
+ * - **stroke** - (String) The stroke color.
+ * - **stroke-width** - (Number) The width of the stroke.
+ * - **font** - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS `font` parameter.
+ * - **text** - (String) Used with text type sprites. The text itself.
+ * - **translate** - (Object) Defines a translation for the Sprite. There's more information on this property below.
+ * - **rotate** - (Object) Defines a rotation for the Sprite. There's more information on this property below.
+ * - **scale** - (Object) Defines a scaling for the Sprite. There's more information on this property below.
+ *
+ *
+ * ## Translation
+ *
+ * For translate, the configuration object contains x and y attributes that indicate where to
+ * translate the object. For example:
+ *
+ * sprite.setAttributes({
+ * translate: {
+ * x: 10,
+ * y: 10
+ * }
+ * }, true);
+ *
+ *
+ * ## Rotation
+ *
+ * For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
+ * and a `degrees` attribute that specifies the rotation in degrees. For example:
+ *
+ * sprite.setAttributes({
+ * rotate: {
+ * degrees: 90
+ * }
+ * }, true);
+ *
+ * That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas:
+ *
+ * sprite.setAttributes({
+ * rotate: {
+ * x: 0,
+ * y: 0,
+ * degrees: 90
+ * }
+ * }, true);
+ *
+ * will create a rotation around the `(0, 0)` axis.
+ *
+ *
+ * ## Scaling
+ *
+ * For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:
+ *
+ * sprite.setAttributes({
+ * scale: {
+ * x: 10,
+ * y: 3
+ * }
+ * }, true);
+ *
+ * You can also specify the center of scaling by adding `cx` and `cy` as properties:
+ *
+ * sprite.setAttributes({
+ * scale: {
+ * cx: 0,
+ * cy: 0,
+ * x: 10,
+ * y: 3
+ * }
+ * }, true);
+ *
+ * That last example will scale a sprite taking as centers of scaling the `(0, 0)` coordinate.
+ *
+ *
+ * ## Creating and adding a Sprite to a Surface
+ *
+ * Sprites can be created with a reference to a {@link Ext.draw.Surface}
+ *
+ * var drawComponent = Ext.create('Ext.draw.Component', options here...);
+ *
+ * var sprite = Ext.create('Ext.draw.Sprite', {
+ * type: 'circle',
+ * fill: '#ff0',
+ * surface: drawComponent.surface,
+ * radius: 5
+ * });
+ *
+ * Sprites can also be added to the surface as a configuration object:
+ *
+ * var sprite = drawComponent.surface.add({
+ * type: 'circle',
+ * fill: '#ff0',
+ * radius: 5
+ * });
+ *
+ * In order to properly apply properties and render the sprite we have to
+ * `show` the sprite setting the option `redraw` to `true`:
+ *
+ * sprite.show(true);
+ *
+ * The constructor configuration object of the Sprite can also be used and passed into the {@link Ext.draw.Surface}
+ * add method to append a new sprite to the canvas. For example:
+ *
+ * drawComponent.surface.add({
+ * type: 'circle',
+ * fill: '#ffc',
+ * radius: 100,
+ * x: 100,
+ * y: 100
+ * });
+ */
+Ext.define('Ext.draw.Sprite', {
+
+<span id='Ext-draw-Sprite-cfg-type'> /**
+</span> * @cfg {String} type The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'
+ */
+
+<span id='Ext-draw-Sprite-cfg-width'> /**
+</span> * @cfg {Number} width Used in rectangle sprites, the width of the rectangle
+ */
+
+<span id='Ext-draw-Sprite-cfg-height'> /**
+</span> * @cfg {Number} height Used in rectangle sprites, the height of the rectangle
+ */
+
+<span id='Ext-draw-Sprite-cfg-size'> /**
+</span> * @cfg {Number} size Used in square sprites, the dimension of the square
+ */
+
+<span id='Ext-draw-Sprite-cfg-radius'> /**
+</span> * @cfg {Number} radius Used in circle sprites, the radius of the circle
+ */
+
+<span id='Ext-draw-Sprite-cfg-x'> /**
+</span> * @cfg {Number} x The position along the x-axis
+ */
+
+<span id='Ext-draw-Sprite-cfg-y'> /**
+</span> * @cfg {Number} y The position along the y-axis
+ */
+
+<span id='Ext-draw-Sprite-cfg-path'> /**
+</span> * @cfg {Array} path Used in path sprites, the path of the sprite written in SVG-like path syntax
+ */
+
+<span id='Ext-draw-Sprite-cfg-opacity'> /**
+</span> * @cfg {Number} opacity The opacity of the sprite
+ */
+
+<span id='Ext-draw-Sprite-cfg-fill'> /**
+</span> * @cfg {String} fill The fill color
+ */
+
+<span id='Ext-draw-Sprite-cfg-stroke'> /**
+</span> * @cfg {String} stroke The stroke color
+ */
+
+<span id='Ext-draw-Sprite-cfg-stroke'> /**
+</span> * @cfg {Number} stroke-width The width of the stroke
+ */
+
+<span id='Ext-draw-Sprite-cfg-font'> /**
+</span> * @cfg {String} font Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter
+ */
+
+<span id='Ext-draw-Sprite-cfg-text'> /**
+</span> * @cfg {String} text Used with text type sprites. The text itself
+ */
+
+<span id='Ext-draw-Sprite-cfg-group'> /**
+</span> * @cfg {String/Array} group The group that this sprite belongs to, or an array of groups. Only relevant when added to a
+ * {@link Ext.draw.Surface}
+ */
+
+ /* Begin Definitions */