</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-draw-Surface'>/**
-</span> * @class Ext.draw.Surface
- * @extends Object
- *
- * A Surface is an interface to render methods inside a draw {@link Ext.draw.Component}.
+</span> * A Surface is an interface to render methods inside a draw {@link Ext.draw.Component}.
* A Surface contains methods to render sprites, get bounding boxes of sprites, add
* sprites to the canvas, initialize other graphic components, etc. One of the most used
* methods for this class is the `add` method, to add Sprites to the surface.
* The configuration object passed in the `add` method is the same as described in the {@link Ext.draw.Sprite}
* class documentation.
*
- * ### Listeners
+ * # Listeners
*
* You can also add event listeners to the surface using the `Observable` listener syntax. Supported events are:
*
* }
* });
*
- * ## Example
+ * # Example
*
- * drawComponent.surface.add([
- * {
- * type: 'circle',
- * radius: 10,
- * fill: '#f00',
- * x: 10,
- * y: 10,
- * group: 'circles'
- * },
- * {
- * type: 'circle',
- * radius: 10,
- * fill: '#0f0',
- * x: 50,
- * y: 50,
- * group: 'circles'
- * },
- * {
- * type: 'circle',
- * radius: 10,
- * fill: '#00f',
- * x: 100,
- * y: 100,
- * group: 'circles'
- * },
- * {
- * type: 'rect',
- * radius: 10,
- * x: 10,
- * y: 10,
- * group: 'rectangles'
- * },
- * {
- * type: 'rect',
- * radius: 10,
- * x: 50,
- * y: 50,
- * group: 'rectangles'
- * },
- * {
- * type: 'rect',
- * radius: 10,
- * x: 100,
- * y: 100,
- * group: 'rectangles'
- * }
- * ]);
- *
+ * var drawComponent = Ext.create('Ext.draw.Component', {
+ * width: 800,
+ * height: 600,
+ * renderTo: document.body
+ * }), surface = drawComponent.surface;
+ *
+ * surface.add([{
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#f00',
+ * x: 10,
+ * y: 10,
+ * group: 'circles'
+ * }, {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#0f0',
+ * x: 50,
+ * y: 50,
+ * group: 'circles'
+ * }, {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#00f',
+ * x: 100,
+ * y: 100,
+ * group: 'circles'
+ * }, {
+ * type: 'rect',
+ * width: 20,
+ * height: 20,
+ * fill: '#f00',
+ * x: 10,
+ * y: 10,
+ * group: 'rectangles'
+ * }, {
+ * type: 'rect',
+ * width: 20,
+ * height: 20,
+ * fill: '#0f0',
+ * x: 50,
+ * y: 50,
+ * group: 'rectangles'
+ * }, {
+ * type: 'rect',
+ * width: 20,
+ * height: 20,
+ * fill: '#00f',
+ * x: 100,
+ * y: 100,
+ * group: 'rectangles'
+ * }]);
+ *
* // Get references to my groups
- * my circles = surface.getGroup('circles');
- * my rectangles = surface.getGroup('rectangles');
- *
+ * circles = surface.getGroup('circles');
+ * rectangles = surface.getGroup('rectangles');
+ *
* // Animate the circles down
* circles.animate({
* duration: 1000,
- * translate: {
- * y: 200
+ * to: {
+ * translate: {
+ * y: 200
+ * }
* }
* });
- *
+ *
* // Animate the rectangles across
* rectangles.animate({
* duration: 1000,
- * translate: {
- * x: 200
+ * to: {
+ * translate: {
+ * x: 200
+ * }
* }
* });
*/
statics: {
<span id='Ext-draw-Surface-method-create'> /**
-</span> * Create and return a new concrete Surface instance appropriate for the current environment.
+</span> * Creates and returns a new concrete Surface instance appropriate for the current environment.
* @param {Object} config Initial configuration for the Surface instance
- * @param {Array} enginePriority Optional order of implementations to use; the first one that is
- * available in the current environment will be used. Defaults to
- * <code>['Svg', 'Vml']</code>.
+ * @param {[String]} enginePriority Optional order of implementations to use; the first one that is
+ * available in the current environment will be used. Defaults to `['Svg', 'Vml']`.
+ * @return {Object} The created Surface or false.
+ * @static
*/
create: function(config, enginePriority) {
enginePriority = enginePriority || ['Svg', 'Vml'];
zIndex: 0
},
-<span id='Ext-draw-Surface-cfg-height'> /**
-</span> * @cfg {Number} height
- * The height of this component in pixels (defaults to auto).
- * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
- */
-<span id='Ext-draw-Surface-cfg-width'> /**
-</span> * @cfg {Number} width
- * The width of this component in pixels (defaults to auto).
- * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
- */
+<span id='Ext-draw-Surface-cfg-height'> /**
+</span> * @cfg {Number} height
+ * The height of this component in pixels (defaults to auto).
+ * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
+ */
+<span id='Ext-draw-Surface-cfg-width'> /**
+</span> * @cfg {Number} width
+ * The width of this component in pixels (defaults to auto).
+ * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
+ */
+
container: undefined,
height: 352,
width: 512,
x: 0,
y: 0,
+<span id='Ext-draw-Surface-method-constructor'> /**
+</span> * Creates new Surface.
+ * @param {Object} config (optional) Config object.
+ */
constructor: function(config) {
var me = this;
config = config || {};
*
* For example:
*
- * drawComponent.surface.addCls(sprite, 'x-visible');
- *
+ * drawComponent.surface.addCls(sprite, 'x-visible');
+ *
* @param {Object} sprite The sprite to add the class to.
- * @param {String/Array} className The CSS class to add, or an array of classes
+ * @param {String/[String]} className The CSS class to add, or an array of classes
* @method
*/
addCls: Ext.emptyFn,
*
* For example:
*
- * drawComponent.surface.removeCls(sprite, 'x-visible');
- *
+ * drawComponent.surface.removeCls(sprite, 'x-visible');
+ *
* @param {Object} sprite The sprite to remove the class from.
- * @param {String/Array} className The CSS class to remove, or an array of classes
+ * @param {String/[String]} className The CSS class to remove, or an array of classes
* @method
*/
removeCls: Ext.emptyFn,
*
* For example:
*
- * drawComponent.surface.setStyle(sprite, {
- * 'cursor': 'pointer'
- * });
- *
+ * drawComponent.surface.setStyle(sprite, {
+ * 'cursor': 'pointer'
+ * });
+ *
* @param {Object} sprite The sprite to add, or an array of classes to
* @param {Object} styles An Object with CSS styles.
* @method
*
* For example:
*
- * drawComponent.surface.setSize(500, 500);
+ * drawComponent.surface.setSize(500, 500);
*
* This method is generally called when also setting the size of the draw Component.
*
onMouseLeave: Ext.emptyFn,
<span id='Ext-draw-Surface-method-addGradient'> /**
-</span> * Add a gradient definition to the Surface. Note that in some surface engines, adding
+</span> * Adds a gradient definition to the Surface. Note that in some surface engines, adding
* a gradient via this method will not take effect if the surface has already been rendered.
* Therefore, it is preferred to pass the gradients as an item to the surface config, rather
* than calling this method, especially if the surface is rendered immediately (e.g. due to
*
* The gradient object to be passed into this method is composed by:
*
- *
- * - **id** - string - The unique name of the gradient.
- * - **angle** - number, optional - The angle of the gradient in degrees.
- * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values.
- *
+ * - **id** - string - The unique name of the gradient.
+ * - **angle** - number, optional - The angle of the gradient in degrees.
+ * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values.
*
- For example:
- drawComponent.surface.addGradient({
- id: 'gradientId',
- angle: 45,
- stops: {
- 0: {
- color: '#555'
- },
- 100: {
- color: '#ddd'
- }
- }
- });
+ * For example:
+ *
+ * drawComponent.surface.addGradient({
+ * id: 'gradientId',
+ * angle: 45,
+ * stops: {
+ * 0: {
+ * color: '#555'
+ * },
+ * 100: {
+ * color: '#ddd'
+ * }
+ * }
+ * });
*
* @method
*/
addGradient: Ext.emptyFn,
<span id='Ext-draw-Surface-method-add'> /**
-</span> * Add a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be passed into this method.
+</span> * Adds a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be
+ * passed into this method.
*
* For example:
*
* y: 100
* });
*
- */
+ */
add: function() {
var args = Array.prototype.slice.call(arguments),
sprite,
<span id='Ext-draw-Surface-method-normalizeSpriteCollection'> /**
</span> * @private
- * Insert or move a given sprite into the correct position in the items
+ * Inserts or moves a given sprite into the correct position in the items
* MixedCollection, according to its zIndex. Will be inserted at the end of
* an existing series of sprites with the same or lower zIndex. If the sprite
* is already positioned within an appropriate zIndex group, it will not be moved.
},
<span id='Ext-draw-Surface-method-remove'> /**
-</span> * Remove a given sprite from the surface, optionally destroying the sprite in the process.
+</span> * Removes a given sprite from the surface, optionally destroying the sprite in the process.
* You can also call the sprite own `remove` method.
*
* For example:
*
- * drawComponent.surface.remove(sprite);
- * //or...
- * sprite.remove();
- *
+ * drawComponent.surface.remove(sprite);
+ * //or...
+ * sprite.remove();
+ *
* @param {Ext.draw.Sprite} sprite
* @param {Boolean} destroySprite
* @return {Number} the sprite's new index in the list
},
<span id='Ext-draw-Surface-method-removeAll'> /**
-</span> * Remove all sprites from the surface, optionally destroying the sprites in the process.
+</span> * Removes all sprites from the surface, optionally destroying the sprites in the process.
*
* For example:
*
- * drawComponent.surface.removeAll();
- *
+ * drawComponent.surface.removeAll();
+ *
* @param {Boolean} destroySprites Whether to destroy all sprites when removing them.
* @return {Number} The sprite's new index in the list.
*/
*
* For example:
*
- * var spriteGroup = drawComponent.surface.getGroup('someGroupId');
- *
+ * var spriteGroup = drawComponent.surface.getGroup('someGroupId');
+ *
* @param {String} id The unique identifier of the group.
* @return {Object} The {@link Ext.draw.CompositeSprite}.
*/
*
* For example:
*
- * var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');
- *
+ * var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');
+ *
* @param {Object} sprite The Sprite to change the text.
* @param {String} text The new text to be set.
* @method
git.ithinksw.org / extjs.git / blobdiff