/** * @class Ext.draw.sprite.Sprite * @extend Ext.Base * @alias sprite.sprite * * A sprite is a basic primitive from the charts package which represents a graphical * object that can be drawn. Sprites are used extensively in the charts package to * create the visual elements of each chart. You can also create a desired image by * adding one or more sprites to a {@link Ext.draw.Container draw container}. * * The Sprite class itself is an abstract class and is not meant to be used directly. * There are many different kinds of sprites available in the charts package that extend * Ext.draw.sprite.Sprite. Each sprite type has various attributes that define how that * sprite should look. For example, this is a {@link Ext.draw.sprite.Rect rect} sprite: * * @example * Ext.create({ * xtype: 'draw', * renderTo: document.body, * width: 400, * height: 400, * sprites: [{ * type: 'rect', * x: 50, * y: 50, * width: 100, * height: 100, * fillStyle: '#1F6D91' * }] * }); * * By default, sprites are added to the default 'main' {@link Ext.draw.Surface surface} * of the draw container. However, sprites may also be configured with a reference to a * specific Ext.draw.Surface when set in the draw container's * {@link Ext.draw.Container#cfg-sprites sprites} config. Specifying a surface * other than 'main' will create a surface by that name if it does not already exist. * * @example * Ext.create({ * xtype: 'draw', * renderTo: document.body, * width: 400, * height: 400, * sprites: [{ * type: 'rect', * surface: 'anim', // a surface with id "anim" will be created automatically * x: 50, * y: 50, * width: 100, * height: 100, * fillStyle: '#1F6D91' * }] * }); * * The ability to have multiple surfaces is useful for performance (and battery life) * reasons. Because changes to sprite attributes cause the whole surface (and all * sprites in it) to re-render, it makes sense to group sprites by surface, so changes * to one group of sprites will only trigger the surface they are in to re-render. * * You can add a sprite to an existing drawing by adding the sprite to a draw surface. * * @example * var drawCt = Ext.create({ * xtype: 'draw', * renderTo: document.body, * width: 400, * height: 400 * }); * * // If the surface name is not specified then 'main' will be used * var surface = drawCt.getSurface(); * * surface.add({ * type: 'rect', * x: 50, * y: 50, * width: 100, * height: 100, * fillStyle: '#1F6D91' * }); * * surface.renderFrame(); * * **Note:** Changes to the sprites on a surface will be not be reflected in the DOM * until you call the surface's {@link Ext.draw.Surface#method-renderFrame renderFrame} * method. This must be done after adding, removing, or modifying sprites in order to * see the changes on-screen. * * For information on configuring a sprite with an initial transformation see * {@link #scaling}, {@link rotation}, and {@link translation}. * * For information on applying a transformation to an existing sprite see the * Ext.draw.Matrix class. */ /** * @property {Boolean} [debug=false] * @static * * Debug rendering options: * * debug: { * bbox: true, // renders the bounding box of the sprite * xray: true // renders control points of the path (for Ext.draw.sprite.Path * and descendants only) * } * */ /** * @cfg {String} [strokeStyle="none"] * The color of the stroke (a CSS color value). */ /** * @cfg {String} [fillStyle="none"] * The color of the shape (a CSS color value). */ /** * @cfg {Number} [strokeOpacity=1] * The opacity of the stroke. Limited from 0 to 1. */ /** * @cfg {Number} [fillOpacity=1] * The opacity of the fill. Limited from 0 to 1. */ /** * @cfg {Number} [lineWidth=1] * The width of the line stroke. */ /** * @cfg {String} [lineCap="butt"] The style of the line caps. */ /** * @cfg {String} [lineJoin="miter"] * The style of the line join. */ /** * @cfg {Array} [lineDash=[]] * An even number of non-negative numbers specifying a dash/space sequence. * Note that while this is supported in IE8 (VML engine), the behavior is * different from Canvas and SVG. Please refer to this document for details: * http://msdn.microsoft.com/en-us/library/bb264085(v=vs.85).aspx * Although IE9 and IE10 have Canvas support, the 'lineDash' * attribute is not supported in those browsers. */ /** * @cfg {Number} [lineDashOffset=0] * A number specifying how far into the line dash sequence drawing commences. */ /** * @cfg {Number} [miterLimit=10] * Sets the distance between the inner corner and the outer corner where two lines meet. */ /** * @cfg {String} [shadowColor="none"] * The color of the shadow (a CSS color value). */ /** * @cfg {Number} [shadowOffsetX=0] * The offset of the sprite's shadow on the x-axis. */ /** * @cfg {Number} [shadowOffsetY=0] * The offset of the sprite's shadow on the y-axis. */ /** * @cfg {Number} [shadowBlur=0] * The amount blur used on the shadow. */ /** * @cfg {Number} [globalAlpha=1] * The opacity of the sprite. Limited from 0 to 1. */ /** * @cfg {String} [globalCompositeOperation=source-over] * Indicates how source images are drawn onto a destination image. * globalCompositeOperation attribute is not supported by the SVG and VML (excanvas) engines. */ /** * @cfg {Boolean} [hidden=false] * Determines whether or not the sprite is hidden. * */ /** * @cfg {Boolean} [transformFillStroke=false] * Determines whether the fill and stroke are affected by sprite transformations. * */ /** * @cfg {Number} [zIndex=0] * The stacking order of the sprite. * */ /** * @cfg {Number} [translationX=0] * The translation, position offset, of the sprite on the x-axis. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #translation} and {@link #translationY} * */ /** * @cfg {Number} [translationY=0] * The translation, position offset, of the sprite on the y-axis. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #translation} and {@link #translationX} * */ /** * @cfg {Number} [rotationRads=0] * The angle of rotation of the sprite in radians. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #rotation}, {@link #rotationCenterX}, and * {@link #rotationCenterY} * */ /** * @cfg {Number} [rotationCenterX=null] * The central coordinate of the sprite's scale operation on the x-axis. * Unless explicitly set, will default to the calculated center of the * sprite along the x-axis. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #rotation}, {@link #rotationRads}, and * {@link #rotationCenterY} * */ /** * @cfg {Number} [rotationCenterY=null] * The central coordinate of the sprite's rotate operation on the y-axis. * Unless explicitly set, will default to the calculated center of the * sprite along the y-axis. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #rotation}, {@link #rotationRads}, and * {@link #rotationCenterX} * */ /** * @cfg {Number} [scalingX=1] The scaling of the sprite on the x-axis. * The number value represents a percentage by which to scale the * sprite. **1** is equal to 100%, **2** would be 200%, etc. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #scaling}, {@link #scalingY}, * {@link #scalingCenterX}, and {@link #scalingCenterY} * */ /** * @cfg {Number} [scalingY=1] The scaling of the sprite on the y-axis. * The number value represents a percentage by which to scale the * sprite. **1** is equal to 100%, **2** would be 200%, etc. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #scaling}, {@link #scalingX}, * {@link #scalingCenterX}, and {@link #scalingCenterY} * */ /** * @cfg {Number} [scalingCenterX=null] * The central coordinate of the sprite's scale operation on the x-axis. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #scaling}, {@link #scalingX}, * {@link #scalingY}, and {@link #scalingCenterY} */ /** * @cfg {Number} [scalingCenterY=null] * The central coordinate of the sprite's scale operation on the y-axis. * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * See also: {@link #scaling}, {@link #scalingX}, * {@link #scalingY}, and {@link #scalingCenterX} * */ /** * @cfg {Number/Object} rotation * Applies an initial angle of rotation to the sprite. May be a number * specifying the rotation in degrees. Or may be a config object using * the below config options. * * **Note:** Rotation config options will be overridden by values set on * the {@link #rotationRads}, {@link #rotationCenterX}, and * {@link #rotationCenterY} configs. * * Ext.create({ * xtype: 'draw', * renderTo: Ext.getBody(), * width: 600, * height: 400, * sprites: [{ * type: 'rect', * x: 50, * y: 50, * width: 100, * height: 100, * fillStyle: '#1F6D91', * //rotation: 45 * rotation: { * degrees: 45, * //rads: Math.PI / 4, * //centerX: 50, * //centerY: 50 * } * }] * }); * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * @cfg {Number} rotation.rads * The angle in radians to rotate the sprite * * @cfg {Number} rotation.degrees * The angle in degrees to rotate the sprite (is ignored if rads or * {@link #rotationRads} is set * * @cfg {Number} rotation.centerX * The central coordinate of the sprite's rotation on the x-axis. * Unless explicitly set, will default to the calculated center of the * sprite along the x-axis. * * @cfg {Number} rotation.centerY * The central coordinate of the sprite's rotation on the y-axis. * Unless explicitly set, will default to the calculated center of the * sprite along the y-axis. */ /** * @cfg {Number/Object} scaling * Applies initial scaling to the sprite. May be a number specifying * the amount to scale both the x and y-axis. The number value * represents a percentage by which to scale the sprite. **1** is equal * to 100%, **2** would be 200%, etc. Or may be a config object using * the below config options. * * **Note:** Scaling config options will be overridden by values set on * the {@link #scalingX}, {@link #scalingY}, {@link #scalingCenterX}, * and {@link #scalingCenterY} configs. * * Ext.create({ * xtype: 'draw', * renderTo: Ext.getBody(), * width: 600, * height: 400, * sprites: [{ * type: 'rect', * x: 50, * y: 50, * width: 100, * height: 100, * fillStyle: '#1F6D91', * //scaling: 2, * scaling: { * x: 2, * y: 2 * //centerX: 100, * //centerY: 100 * } * }] * }); * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * @cfg {Number} scaling.x * The amount by which to scale the sprite along the x-axis. The number * value represents a percentage by which to scale the sprite. **1** is * equal to 100%, **2** would be 200%, etc. * * @cfg {Number} scaling.y * The amount by which to scale the sprite along the y-axis. The number * value represents a percentage by which to scale the sprite. **1** is * equal to 100%, **2** would be 200%, etc. * * @cfg scaling.centerX * The central coordinate of the sprite's scaling on the x-axis. Unless * explicitly set, will default to the calculated center of the sprite * along the x-axis. * * @cfg {Number} scaling.centerY * The central coordinate of the sprite's scaling on the y-axis. Unless * explicitly set, will default to the calculated center of the sprite * along the y-axis. */ /** * @cfg {Object} translation * Applies an initial translation, adjustment in x/y positioning, to the * sprite. * * **Note:** Translation config options will be overridden by values set * on the {@link #translationX} and {@link #translationY} configs. * * Ext.create({ * xtype: 'draw', * renderTo: Ext.getBody(), * width: 600, * height: 400, * sprites: [{ * type: 'rect', * x: 50, * y: 50, * width: 100, * height: 100, * fillStyle: '#1F6D91', * translation: { * x: 50, * y: 50 * } * }] * }); * * **Note:** Transform configs are *always* performed in the following * order: * * 1. Scaling * 2. Rotation * 3. Translation * * @cfg {Number} translation.x * The amount to translate the sprite along the x-axis. * * @cfg {Number} translation.y * The amount to translate the sprite along the y-axis. */ /** * @property {Object} attr * The visual attributes of the sprite, e.g. strokeStyle, fillStyle, lineWidth... */ /** * @cfg {Ext.draw.modifier.Animation} animation * @accessor */