docs/source/Sprite2.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-draw-Sprite'>/**
  19 </span> * @class Ext.draw.Sprite
  20  * @extends Object
  21  *
  22  * A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
  23  * The configuration of a Sprite is an object with the following properties:
  24  *
  25  * - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'.
  26  * - **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}.
  27  * - **width** - (Number) Used in rectangle sprites, the width of the rectangle.
  28  * - **height** - (Number) Used in rectangle sprites, the height of the rectangle.
  29  * - **size** - (Number) Used in square sprites, the dimension of the square.
  30  * - **radius** - (Number) Used in circle sprites, the radius of the circle.
  31  * - **x** - (Number) The position along the x-axis.
  32  * - **y** - (Number) The position along the y-axis.
  33  * - **path** - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
  34  * - **opacity** - (Number) The opacity of the sprite.
  35  * - **fill** - (String) The fill color.
  36  * - **stroke** - (String) The stroke color.
  37  * - **stroke-width** - (Number) The width of the stroke.
  38  * - **font** - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS `font` parameter.
  39  * - **text** - (String) Used with text type sprites. The text itself.
  40  * - **translate** - (Object) Defines a translation for the Sprite. There's more information on this property below.
  41  * - **rotate** - (Object) Defines a rotation for the Sprite. There's more information on this property below.
  42  * - **scale** - (Object) Defines a scaling for the Sprite. There's more information on this property below.
  43  *
  44  *
  45  * ## Translation
  46  *
  47  * For translate, the configuration object contains x and y attributes that indicate where to
  48  * translate the object. For example:
  49  *
  50  *     sprite.setAttributes({
  51  *       translate: {
  52  *        x: 10,
  53  *        y: 10
  54  *       }
  55  *     }, true);
  56  *
  57  *
  58  * ## Rotation
  59  *
  60  * For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
  61  * and a `degrees` attribute that specifies the rotation in degrees. For example:
  62  *
  63  *     sprite.setAttributes({
  64  *       rotate: {
  65  *        degrees: 90
  66  *       }
  67  *     }, true);
  68  *
  69  * That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas:
  70  *
  71  *     sprite.setAttributes({
  72  *       rotate: {
  73  *        x: 0,
  74  *        y: 0,
  75  *        degrees: 90
  76  *       }
  77  *     }, true);
  78  *
  79  * will create a rotation around the `(0, 0)` axis.
  80  *
  81  *
  82  * ## Scaling
  83  *
  84  * For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:
  85  *
  86  *     sprite.setAttributes({
  87  *       scale: {
  88  *        x: 10,
  89  *        y: 3
  90  *       }
  91  *     }, true);
  92  *
  93  * You can also specify the center of scaling by adding `cx` and `cy` as properties:
  94  *
  95  *     sprite.setAttributes({
  96  *       scale: {
  97  *        cx: 0,
  98  *        cy: 0,
  99  *        x: 10,
 100  *        y: 3
 101  *       }
 102  *     }, true);
 103  *
 104  * That last example will scale a sprite taking as centers of scaling the `(0, 0)` coordinate.
 105  *
 106  *
 107  * ## Creating and adding a Sprite to a Surface
 108  *
 109  * Sprites can be created with a reference to a {@link Ext.draw.Surface}
 110  *
 111  *      var drawComponent = Ext.create('Ext.draw.Component', options here...);
 112  *
 113  *      var sprite = Ext.create('Ext.draw.Sprite', {
 114  *          type: 'circle',
 115  *          fill: '#ff0',
 116  *          surface: drawComponent.surface,
 117  *          radius: 5
 118  *      });
 119  *
 120  * Sprites can also be added to the surface as a configuration object:
 121  *
 122  *      var sprite = drawComponent.surface.add({
 123  *          type: 'circle',
 124  *          fill: '#ff0',
 125  *          radius: 5
 126  *      });
 127  *
 128  * In order to properly apply properties and render the sprite we have to
 129  * `show` the sprite setting the option `redraw` to `true`:
 130  *
 131  *      sprite.show(true);
 132  *
 133  * The constructor configuration object of the Sprite can also be used and passed into the {@link Ext.draw.Surface}
 134  * add method to append a new sprite to the canvas. For example:
 135  *
 136  *     drawComponent.surface.add({
 137  *         type: 'circle',
 138  *         fill: '#ffc',
 139  *         radius: 100,
 140  *         x: 100,
 141  *         y: 100
 142  *     });
 143  */
 144 Ext.define('Ext.draw.Sprite', {
 145
 146 <span id='Ext-draw-Sprite-cfg-type'>    /**
 147 </span>     * @cfg {String} type The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'
 148      */
 149
 150 <span id='Ext-draw-Sprite-cfg-width'>    /**
 151 </span>     * @cfg {Number} width Used in rectangle sprites, the width of the rectangle
 152      */
 153
 154 <span id='Ext-draw-Sprite-cfg-height'>    /**
 155 </span>     * @cfg {Number} height Used in rectangle sprites, the height of the rectangle
 156      */
 157
 158 <span id='Ext-draw-Sprite-cfg-size'>    /**
 159 </span>     * @cfg {Number} size Used in square sprites, the dimension of the square
 160      */
 161
 162 <span id='Ext-draw-Sprite-cfg-radius'>    /**
 163 </span>     * @cfg {Number} radius Used in circle sprites, the radius of the circle
 164      */
 165
 166 <span id='Ext-draw-Sprite-cfg-x'>    /**
 167 </span>     * @cfg {Number} x The position along the x-axis
 168      */
 169
 170 <span id='Ext-draw-Sprite-cfg-y'>    /**
 171 </span>     * @cfg {Number} y The position along the y-axis
 172      */
 173
 174 <span id='Ext-draw-Sprite-cfg-path'>    /**
 175 </span>     * @cfg {Array} path Used in path sprites, the path of the sprite written in SVG-like path syntax
 176      */
 177
 178 <span id='Ext-draw-Sprite-cfg-opacity'>    /**
 179 </span>     * @cfg {Number} opacity The opacity of the sprite
 180      */
 181
 182 <span id='Ext-draw-Sprite-cfg-fill'>    /**
 183 </span>     * @cfg {String} fill The fill color
 184      */
 185
 186 <span id='Ext-draw-Sprite-cfg-stroke'>    /**
 187 </span>     * @cfg {String} stroke The stroke color
 188      */
 189
 190 <span id='Ext-draw-Sprite-cfg-stroke'>    /**
 191 </span>     * @cfg {Number} stroke-width The width of the stroke
 192      */
 193
 194 <span id='Ext-draw-Sprite-cfg-font'>    /**
 195 </span>     * @cfg {String} font Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter
 196      */
 197
 198 <span id='Ext-draw-Sprite-cfg-text'>    /**
 199 </span>     * @cfg {String} text Used with text type sprites. The text itself
 200      */
 201
 202 <span id='Ext-draw-Sprite-cfg-group'>    /**
 203 </span>     * @cfg {String/Array} group The group that this sprite belongs to, or an array of groups. Only relevant when added to a
 204      * {@link Ext.draw.Surface}
 205      */
 206
 207     /* Begin Definitions */
 208
 209     mixins: {
 210         observable: 'Ext.util.Observable',
 211         animate: 'Ext.util.Animate'
 212     },
 213
 214     requires: ['Ext.draw.SpriteDD'],
 215
 216     /* End Definitions */
 217
 218     dirty: false,
 219     dirtyHidden: false,
 220     dirtyTransform: false,
 221     dirtyPath: true,
 222     dirtyFont: true,
 223     zIndexDirty: true,
 224     isSprite: true,
 225     zIndex: 0,
 226     fontProperties: [
 227         'font',
 228         'font-size',
 229         'font-weight',
 230         'font-style',
 231         'font-family',
 232         'text-anchor',
 233         'text'
 234     ],
 235     pathProperties: [
 236         'x',
 237         'y',
 238         'd',
 239         'path',
 240         'height',
 241         'width',
 242         'radius',
 243         'r',
 244         'rx',
 245         'ry',
 246         'cx',
 247         'cy'
 248     ],
 249     constructor: function(config) {
 250         var me = this;
 251         config = config || {};
 252         me.id = Ext.id(null, 'ext-sprite-');
 253         me.transformations = [];
 254         Ext.copyTo(this, config, 'surface,group,type,draggable');
 255         //attribute bucket
 256         me.bbox = {};
 257         me.attr = {
 258             zIndex: 0,
 259             translation: {
 260                 x: null,
 261                 y: null
 262             },
 263             rotation: {
 264                 degrees: null,
 265                 x: null,
 266                 y: null
 267             },
 268             scaling: {
 269                 x: null,
 270                 y: null,
 271                 cx: null,
 272                 cy: null
 273             }
 274         };
 275         //delete not bucket attributes
 276         delete config.surface;
 277         delete config.group;
 278         delete config.type;
 279         delete config.draggable;
 280         me.setAttributes(config);
 281         me.addEvents(
 282             'beforedestroy',
 283             'destroy',
 284             'render',
 285             'mousedown',
 286             'mouseup',
 287             'mouseover',
 288             'mouseout',
 289             'mousemove',
 290             'click'
 291         );
 292         me.mixins.observable.constructor.apply(this, arguments);
 293     },
 294
 295 <span id='Ext-draw-Sprite-property-dd'>    /**
 296 </span>     * &lt;p&gt;If this Sprite is configured {@link #draggable}, this property will contain
 297      * an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.&lt;/p&gt;
 298      * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
 299      * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
 300      * @type Ext.dd.DragSource.
 301      * @property dd
 302      */
 303     initDraggable: function() {
 304         var me = this;
 305         me.draggable = true;
 306         //create element if it doesn't exist.
 307         if (!me.el) {
 308             me.surface.createSpriteElement(me);
 309         }
 310         me.dd = Ext.create('Ext.draw.SpriteDD', me, Ext.isBoolean(me.draggable) ? null : me.draggable);
 311         me.on('beforedestroy', me.dd.destroy, me.dd);
 312     },
 313
 314 <span id='Ext-draw-Sprite-method-setAttributes'>    /**
 315 </span>     * Change the attributes of the sprite.
 316      * @param {Object} attrs attributes to be changed on the sprite.
 317      * @param {Boolean} redraw Flag to immediatly draw the change.
 318      * @return {Ext.draw.Sprite} this
 319      */
 320     setAttributes: function(attrs, redraw) {
 321         var me = this,
 322             fontProps = me.fontProperties,
 323             fontPropsLength = fontProps.length,
 324             pathProps = me.pathProperties,
 325             pathPropsLength = pathProps.length,
 326             hasSurface = !!me.surface,
 327             custom = hasSurface &amp;&amp; me.surface.customAttributes || {},
 328             spriteAttrs = me.attr,
 329             attr, i, translate, translation, rotate, rotation, scale, scaling;
 330
 331         attrs = Ext.apply({}, attrs);
 332         for (attr in custom) {
 333             if (attrs.hasOwnProperty(attr) &amp;&amp; typeof custom[attr] == &quot;function&quot;) {
 334                 Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr])));
 335             }
 336         }
 337
 338         // Flag a change in hidden
 339         if (!!attrs.hidden !== !!spriteAttrs.hidden) {
 340             me.dirtyHidden = true;
 341         }
 342
 343         // Flag path change
 344         for (i = 0; i &lt; pathPropsLength; i++) {
 345             attr = pathProps[i];
 346             if (attr in attrs &amp;&amp; attrs[attr] !== spriteAttrs[attr]) {
 347                 me.dirtyPath = true;
 348                 break;
 349             }
 350         }
 351
 352         // Flag zIndex change
 353         if ('zIndex' in attrs) {
 354             me.zIndexDirty = true;
 355         }
 356
 357         // Flag font/text change
 358         for (i = 0; i &lt; fontPropsLength; i++) {
 359             attr = fontProps[i];
 360             if (attr in attrs &amp;&amp; attrs[attr] !== spriteAttrs[attr]) {
 361                 me.dirtyFont = true;
 362                 break;
 363             }
 364         }
 365
 366         translate = attrs.translate;
 367         translation = spriteAttrs.translation;
 368         if (translate) {
 369             if ((translate.x &amp;&amp; translate.x !== translation.x) ||
 370                 (translate.y &amp;&amp; translate.y !== translation.y)) {
 371                 Ext.apply(translation, translate);
 372                 me.dirtyTransform = true;
 373             }
 374             delete attrs.translate;
 375         }
 376
 377         rotate = attrs.rotate;
 378         rotation = spriteAttrs.rotation;
 379         if (rotate) {
 380             if ((rotate.x &amp;&amp; rotate.x !== rotation.x) ||
 381                 (rotate.y &amp;&amp; rotate.y !== rotation.y) ||
 382                 (rotate.degrees &amp;&amp; rotate.degrees !== rotation.degrees)) {
 383                 Ext.apply(rotation, rotate);
 384                 me.dirtyTransform = true;
 385             }
 386             delete attrs.rotate;
 387         }
 388
 389         scale = attrs.scale;
 390         scaling = spriteAttrs.scaling;
 391         if (scale) {
 392             if ((scale.x &amp;&amp; scale.x !== scaling.x) ||
 393                 (scale.y &amp;&amp; scale.y !== scaling.y) ||
 394                 (scale.cx &amp;&amp; scale.cx !== scaling.cx) ||
 395                 (scale.cy &amp;&amp; scale.cy !== scaling.cy)) {
 396                 Ext.apply(scaling, scale);
 397                 me.dirtyTransform = true;
 398             }
 399             delete attrs.scale;
 400         }
 401
 402         Ext.apply(spriteAttrs, attrs);
 403         me.dirty = true;
 404
 405         if (redraw === true &amp;&amp; hasSurface) {
 406             me.redraw();
 407         }
 408         return this;
 409     },
 410
 411 <span id='Ext-draw-Sprite-method-getBBox'>    /**
 412 </span>     * Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.
 413      * @return {Object} bbox
 414      */
 415     getBBox: function() {
 416         return this.surface.getBBox(this);
 417     },
 418
 419     setText: function(text) {
 420         return this.surface.setText(this, text);
 421     },
 422
 423 <span id='Ext-draw-Sprite-method-hide'>    /**
 424 </span>     * Hide the sprite.
 425      * @param {Boolean} redraw Flag to immediatly draw the change.
 426      * @return {Ext.draw.Sprite} this
 427      */
 428     hide: function(redraw) {
 429         this.setAttributes({
 430             hidden: true
 431         }, redraw);
 432         return this;
 433     },
 434
 435 <span id='Ext-draw-Sprite-method-show'>    /**
 436 </span>     * Show the sprite.
 437      * @param {Boolean} redraw Flag to immediatly draw the change.
 438      * @return {Ext.draw.Sprite} this
 439      */
 440     show: function(redraw) {
 441         this.setAttributes({
 442             hidden: false
 443         }, redraw);
 444         return this;
 445     },
 446
 447 <span id='Ext-draw-Sprite-method-remove'>    /**
 448 </span>     * Remove the sprite.
 449      */
 450     remove: function() {
 451         if (this.surface) {
 452             this.surface.remove(this);
 453             return true;
 454         }
 455         return false;
 456     },
 457
 458     onRemove: function() {
 459         this.surface.onRemove(this);
 460     },
 461
 462 <span id='Ext-draw-Sprite-method-destroy'>    /**
 463 </span>     * Removes the sprite and clears all listeners.
 464      */
 465     destroy: function() {
 466         var me = this;
 467         if (me.fireEvent('beforedestroy', me) !== false) {
 468             me.remove();
 469             me.surface.onDestroy(me);
 470             me.clearListeners();
 471             me.fireEvent('destroy');
 472         }
 473     },
 474
 475 <span id='Ext-draw-Sprite-method-redraw'>    /**
 476 </span>     * Redraw the sprite.
 477      * @return {Ext.draw.Sprite} this
 478      */
 479     redraw: function() {
 480         this.surface.renderItem(this);
 481         return this;
 482     },
 483
 484 <span id='Ext-draw-Sprite-method-setStyle'>    /**
 485 </span>     * Wrapper for setting style properties, also takes single object parameter of multiple styles.
 486      * @param {String/Object} property The style property to be set, or an object of multiple styles.
 487      * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
 488      * @return {Ext.draw.Sprite} this
 489      */
 490     setStyle: function() {
 491         this.el.setStyle.apply(this.el, arguments);
 492         return this;
 493     },
 494
 495 <span id='Ext-draw-Sprite-method-addCls'>    /**
 496 </span>     * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.  Note this method
 497      * is severly limited in VML.
 498      * @param {String/Array} className The CSS class to add, or an array of classes
 499      * @return {Ext.draw.Sprite} this
 500      */
 501     addCls: function(obj) {
 502         this.surface.addCls(this, obj);
 503         return this;
 504     },
 505
 506 <span id='Ext-draw-Sprite-method-removeCls'>    /**
 507 </span>     * Removes one or more CSS classes from the element.
 508      * @param {String/Array} className The CSS class to remove, or an array of classes.  Note this method
 509      * is severly limited in VML.
 510      * @return {Ext.draw.Sprite} this
 511      */
 512     removeCls: function(obj) {
 513         this.surface.removeCls(this, obj);
 514         return this;
 515     }
 516 });
 517 </pre>
 518 </body>
 519 </html>