Ext.draw.Matrix

Hierarchy

Ext.Base
Ext.draw.Matrix

Files

Utility class to calculate affine transformation matrix.

This class is compatible with SVGMatrix except:

  1. Ext.draw.Matrix is not read only.
  2. Using Number as its components rather than floats.

Using this class to reduce the severe numeric problem with HTML Canvas and SVG transformation.

Properties

Defined By

Instance properties

Ext.draw.Matrix
view source
: Number
Get x-to-x component of the matrix. ...

Get x-to-x component of the matrix. Avoid using it for performance consideration. Use getXX instead.

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'
Defined By

Static properties

...

Defaults to: []

Methods

Defined By

Instance methods

Ext.draw.Matrix
view source
new( xx, xy, yx, yy, dx, dy ) : Ext.draw.Matrix
Create an affine transform matrix. ...

Create an affine transform matrix.

Parameters

  • xx : Number

    Coefficient from x to x

  • xy : Number

    Coefficient from x to y

  • yx : Number

    Coefficient from y to x

  • yy : Number

    Coefficient from y to y

  • dx : Number

    Offset of x

  • dy : Number

    Offset of y

Returns

Ext.draw.Matrix
view source
( xx, xy, yx, yy, dx, dy ) : Ext.draw.Matrixchainable
Postpend a matrix onto the current. ...

Postpend a matrix onto the current.

Note: The given transform will come before the current one.

Parameters

  • xx : Number

    Coefficient from x to x.

  • xy : Number

    Coefficient from x to y.

  • yx : Number

    Coefficient from y to x.

  • yy : Number

    Coefficient from y to y.

  • dx : Number

    Offset of x.

  • dy : Number

    Offset of y.

Returns

Ext.draw.Matrix
view source
( matrix ) : Ext.draw.Matrixchainable
Postpend a matrix onto the current. ...

Postpend a matrix onto the current.

Note: The given transform will come before the current one.

Parameters

Returns

Call the original method that was previously overridden with override, This method is deprecated as callParent does ...

Call the original method that was previously overridden with override,

This method is deprecated as callParent does the same thing.

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

Returns

  • Object

    Returns the result of calling the overridden method

Call the "parent" method of the current method. ...

Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

This can be used with an override as follows:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // calls original My.Derived constructor
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // now alerts 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // calls My.Base.method
         }
     }
 });

 alert(My.Base.method(10));     // alerts 10
 alert(My.Derived2.method(10)); // alerts 20

Lastly, it also works with overridden static methods.

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // calls My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10)); // now alerts 40

To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

Returns

  • Object

    Returns the result of calling the parent method

This method is used by an override to call the superclass method but bypass any overridden method. ...

This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

Consider:

 Ext.define('Ext.some.Class', {
     method: function () {
         console.log('Good');
     }
 });

 Ext.define('Ext.some.DerivedClass', {
     method: function () {
         console.log('Bad');

         // ... logic but with a bug ...

         this.callParent();
     }
 });

To patch the bug in DerivedClass.method, the typical solution is to create an override:

 Ext.define('App.paches.DerivedClass', {
     override: 'Ext.some.DerivedClass',

     method: function () {
         console.log('Fixed');

         // ... logic but with bug fixed ...

         this.callSuper();
     }
 });

The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

Returns

  • Object

    Returns the result of calling the superclass method

Ext.draw.Matrix
view source
( ) : Ext.draw.Matrix
Clone this matrix. ...

Clone this matrix.

Returns

Ext.draw.Matrix
view source
( matrix ) : Boolean
Determines if this matrix has the same values as another matrix. ...

Determines if this matrix has the same values as another matrix.

Parameters

Returns

Ext.draw.Matrix
view source
( ) : Ext.draw.Matrixchainable
Horizontally flip the matrix ...

Horizontally flip the matrix

Returns

Fires

    Ext.draw.Matrix
    view source
    ( ) : Ext.draw.Matrixchainable
    Vertically flip the matrix ...

    Vertically flip the matrix

    Returns

    Fires

      Ext.draw.Matrix
      view source
      ( i, j ) : Stringprivate
      ...

      Parameters

      Returns

      ...

      Parameters

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get offset x component of the matrix. ...

      Get offset x component of the matrix.

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get offset y component of the matrix. ...

      Get offset y component of the matrix.

      Returns

      Returns the initial configuration passed to constructor. ...

      Returns the initial configuration passed to constructor.

      Parameters

      • name : String (optional)

        When supplied, value for particular configuration option is returned, otherwise the full config object is returned.

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get the x scale of the matrix. ...

      Get the x scale of the matrix.

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get the y scale of the matrix. ...

      Get the y scale of the matrix.

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get x-to-x component of the matrix ...

      Get x-to-x component of the matrix

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get x-to-y component of the matrix. ...

      Get x-to-y component of the matrix.

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get y-to-x component of the matrix. ...

      Get y-to-x component of the matrix.

      Returns

      Ext.draw.Matrix
      view source
      ( ) : Number
      Get y-to-y component of the matrix. ...

      Get y-to-y component of the matrix.

      Returns

      ...

      Parameters

      ( instanceConfig ) : Objectchainableprotected
      Initialize configuration for this class. ...

      Initialize configuration for this class. a typical example:

      Ext.define('My.awesome.Class', {
          // The default config
          config: {
              name: 'Awesome',
              isAwesome: true
          },
      
          constructor: function(config) {
              this.initConfig(config);
          }
      });
      
      var awesome = new My.awesome.Class({
          name: 'Super Awesome'
      });
      
      alert(awesome.getName()); // 'Super Awesome'
      

      Parameters

      Returns

      • Object

        mixins The mixin prototypes as key - value pairs

      Fires

        Ext.draw.Matrix
        view source
        ( [target] ) : Ext.draw.Matrix
        Return a new matrix represents the opposite transformation of the current one. ...

        Return a new matrix represents the opposite transformation of the current one.

        Parameters

        • target : Ext.draw.Matrix (optional)

          A target matrix. If present, it will receive the result of inversion to avoid creating a new object.

        Returns

        Ext.draw.Matrix
        view source
        ( ) : Boolean
        Determines whether this matrix is an identity matrix (no transform). ...

        Determines whether this matrix is an identity matrix (no transform).

        Returns

        Ext.draw.Matrix
        view source
        ( matrix ) : Ext.draw.Matrixchainable
        Postpend a matrix onto the current. ...

        Postpend a matrix onto the current.

        Note: The given transform will come before the current one.

        Parameters

        Returns

        ( names, callback, scope )private
        ...

        Parameters

        Ext.draw.Matrix
        view source
        ( devicePixelRatio, comp ) : Objectprivate
        Split Matrix to {{devicePixelRatio,c,0},{b,devicePixelRatio,0},{0,0,1}}.{{xx,0,dx},{0,yy,dy},{0,0,1}} ...

        Split Matrix to {{devicePixelRatio,c,0},{b,devicePixelRatio,0},{0,0,1}}.{{xx,0,dx},{0,yy,dy},{0,0,1}}

        Parameters

        Returns

        • Object

          Object with b,c,d=devicePixelRatio,xx,yy,dx,dy

        Ext.draw.Matrix
        view source
        ( devicePixelRatio, comp ) : Objectprivate
        Split Matrix to {{1,c,0},{b,d,0},{0,0,1}}.{{xx,0,dx},{0,xx,dy},{0,0,1}} ...

        Split Matrix to {{1,c,0},{b,d,0},{0,0,1}}.{{xx,0,dx},{0,xx,dy},{0,0,1}}

        Parameters

        Returns

        • Object

          Object with b,c,d,xx,yy=xx,dx,dy

        Ext.draw.Matrix
        view source
        ( xx, xy, yx, yy, dx, dy ) : Ext.draw.Matrixchainable
        Prepend a matrix onto the current. ...

        Prepend a matrix onto the current.

        Note: The given transform will come after the current one.

        Parameters

        • xx : Number

          Coefficient from x to x.

        • xy : Number

          Coefficient from x to y.

        • yx : Number

          Coefficient from y to x.

        • yy : Number

          Coefficient from y to y.

        • dx : Number

          Offset of x.

        • dy : Number

          Offset of y.

        Returns

        Ext.draw.Matrix
        view source
        ( matrix ) : Ext.draw.Matrixchainable
        Prepend a matrix onto the current. ...

        Prepend a matrix onto the current.

        Note: The given transform will come after the current one.

        Parameters

        Returns

        Ext.draw.Matrix
        view source
        ( ) : Ext.draw.Matrixchainable
        Reset the matrix to identical. ...

        Reset the matrix to identical.

        Returns

        Fires

          Ext.draw.Matrix
          view source
          ( angle, rcx, rcy, [prepend] ) : Ext.draw.Matrixchainable
          Rotate the matrix. ...

          Rotate the matrix.

          Parameters

          • angle : Number

            Radians to rotate

          • rcx : Number|null

            Center of rotation.

          • rcy : Number|null

            Center of rotation.

          • prepend : Boolean (optional)

            If true, this will transformation be prepended to the matrix.

          Returns

          Fires

            Ext.draw.Matrix
            view source
            ( x, y, [prepend] ) : Ext.draw.Matrixchainable
            Rotate the matrix by the angle of a vector. ...

            Rotate the matrix by the angle of a vector.

            Parameters

            • x : Number
            • y : Number
            • prepend : Boolean (optional)

              If true, this will transformation be prepended to the matrix.

            Returns

            Fires

              Ext.draw.Matrix
              view source
              ( sx, sy, scx, scy, [prepend] ) : Ext.draw.Matrixchainable
              Scale the matrix. ...

              Scale the matrix.

              Parameters

              Returns

              Fires

                Ext.draw.Matrix
                view source
                ( xx, xy, yx, yy, dx, dy ) : Ext.draw.Matrixchainable
                Set the elements of a Matrix ...

                Set the elements of a Matrix

                Parameters

                Returns

                ( config, applyIfNotSet ) : Ext.Basechainableprivate
                ...

                Parameters

                Returns

                Ext.draw.Matrix
                view source
                ( angle ) : Ext.draw.Matrixchainable
                Skew the matrix ...

                Skew the matrix

                Parameters

                Returns

                Fires

                  Ext.draw.Matrix
                  view source
                  ( angle ) : Ext.draw.Matrixchainable
                  Skew the matrix ...

                  Skew the matrix

                  Parameters

                  Returns

                  Fires

                    Ext.draw.Matrix
                    view source
                    ( ) : Object
                    Split matrix into Translate, Scale, Shear, and Rotate. ...

                    Split matrix into Translate, Scale, Shear, and Rotate.

                    Returns

                    Get the reference to the class from which this object was instantiated. ...

                    Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

                    Ext.define('My.Cat', {
                        statics: {
                            totalCreated: 0,
                            speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                        },
                    
                        constructor: function() {
                            var statics = this.statics();
                    
                            alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                            // equivalent to: My.Cat.speciesName
                    
                            alert(this.self.speciesName);   // dependent on 'this'
                    
                            statics.totalCreated++;
                        },
                    
                        clone: function() {
                            var cloned = new this.self();                    // dependent on 'this'
                    
                            cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                    
                            return cloned;
                        }
                    });
                    
                    
                    Ext.define('My.SnowLeopard', {
                        extend: 'My.Cat',
                    
                        statics: {
                            speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                        },
                    
                        constructor: function() {
                            this.callParent();
                        }
                    });
                    
                    var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                    
                    var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                    
                    var clone = snowLeopard.clone();
                    alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                    alert(clone.groupName);                 // alerts 'Cat'
                    
                    alert(My.Cat.totalCreated);             // alerts 3
                    

                    Returns

                    Ext.draw.Matrix
                    view source
                    ( ) : Array
                    Create an array of elements by horizontal order (xx,yx,dx,yx,yy,dy). ...

                    Create an array of elements by horizontal order (xx,yx,dx,yx,yy,dy).

                    Returns

                    Ext.draw.Matrix
                    view source
                    ( ctx ) : Ext.draw.Matrixchainable
                    Apply the matrix to a drawing context. ...

                    Apply the matrix to a drawing context.

                    Parameters

                    Returns

                    Ext.draw.Matrix
                    view source
                    ( ) : Array
                    Get an array of elements. ...

                    Get an array of elements. The numbers are rounded to keep only 4 decimals.

                    Returns

                    Fires

                      Ext.draw.Matrix
                      view source
                      ( ) : String
                      Return a string that can be used as transform attribute in SVG. ...

                      Return a string that can be used as transform attribute in SVG.

                      Returns

                      Create an array of elements by vertical order (xx,xy,yx,yy,dx,dy). ...

                      Create an array of elements by vertical order (xx,xy,yx,yy,dx,dy).

                      Returns

                      Ext.draw.Matrix
                      view source
                      ( bbox, [radius], [target] ) : Object
                      ...

                      Parameters

                      • bbox : Object

                        Given as {x: Number, y: Number, width: Number, height: Number}.

                      • radius : Number (optional)
                      • target : Object (optional)

                        Optional target object to recieve the result. Recommended to use it for better gc.

                      Returns

                      • Object

                        Object with x, y, width and height.

                      Ext.draw.Matrix
                      view source
                      ( list ) : Array
                      Transform a list for points. ...

                      Transform a list for points.

                      Note: will change the original list but not points inside it.

                      Parameters

                      Returns

                      Ext.draw.Matrix
                      view source
                      ( point ) : Array
                      Transform a point to a new array. ...

                      Transform a point to a new array.

                      Parameters

                      Returns

                      Ext.draw.Matrix
                      view source
                      ( x, y, [prepend] ) : Ext.draw.Matrixchainable
                      Translate the matrix. ...

                      Translate the matrix.

                      Parameters

                      • x : Number
                      • y : Number
                      • prepend : Boolean (optional)

                        If true, this will transformation be prepended to the matrix.

                      Returns

                      Fires

                        Ext.draw.Matrix
                        view source
                        ( x, y ) : Number
                        Transform point returning the x component of the result. ...

                        Transform point returning the x component of the result.

                        Parameters

                        Returns

                        • Number

                          x component of the result.

                        Ext.draw.Matrix
                        view source
                        ( x, y ) : Number
                        Transform point returning the y component of the result. ...

                        Transform point returning the y component of the result.

                        Parameters

                        Returns

                        • Number

                          y component of the result.

                        Defined By

                        Static methods

                        ( config, fullMerge )privatestatic
                        ...

                        Parameters

                        ( members )chainableprivatestatic
                        ...

                        Parameters

                        ( name, member )chainableprivatestatic
                        ...

                        Parameters

                        ( members )chainablestatic
                        Add methods / properties to the prototype of this class. ...

                        Add methods / properties to the prototype of this class.

                        Ext.define('My.awesome.Cat', {
                            constructor: function() {
                                // ...
                            }
                        });
                        
                         My.awesome.Cat.addMembers({
                             meow: function() {
                                alert('Meowww...');
                             }
                         });
                        
                         var kitty = new My.awesome.Cat();
                         kitty.meow();
                        

                        Parameters

                        ( members ) : Ext.Basechainablestatic
                        Add / override static properties of this class. ...

                        Add / override static properties of this class.

                        Ext.define('My.cool.Class', {
                            // this.se
                        });
                        
                        My.cool.Class.addStatics({
                            someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                            method1: function() {  },    // My.cool.Class.method1 = function() { ... };
                            method2: function() {  }     // My.cool.Class.method2 = function() { ... };
                        });
                        

                        Parameters

                        Returns

                        ( xtype )chainableprivatestatic
                        ...

                        Parameters

                        ( fromClass, members ) : Ext.Basechainableprivatestatic
                        Borrow another class' members to the prototype of this class. ...

                        Borrow another class' members to the prototype of this class.

                        Ext.define('Bank', {
                            money: '$$$',
                            printMoney: function() {
                                alert('$$$$$$$');
                            }
                        });
                        
                        Ext.define('Thief', {
                            // ...
                        });
                        
                        Thief.borrow(Bank, ['money', 'printMoney']);
                        
                        var steve = new Thief();
                        
                        alert(steve.money); // alerts '$$$'
                        steve.printMoney(); // alerts '$$$$$$$'
                        

                        Parameters

                        • fromClass : Ext.Base

                          The class to borrow members from

                        • members : Array/String

                          The names of the members to borrow

                        Returns

                        ( args )protectedstatic
                        ...

                        Parameters

                        Ext.draw.Matrix
                        view source
                        ( mat ) : Ext.draw.Matrixstatic
                        Create a matrix from mat. ...

                        Create a matrix from mat. If mat is already a matrix, returns it.

                        Parameters

                        • mat : Mixed

                        Returns

                        Overrides: Ext.Base.create

                        Ext.draw.Matrix
                        view source
                        ( x0, y0, x1, y1, x0p, y0p, x1p, y1p )static
                        Return the affine matrix that transform two points (x0, y0) and (x1, y1) to (x0p, y0p) and (x1p, y1p) ...

                        Return the affine matrix that transform two points (x0, y0) and (x1, y1) to (x0p, y0p) and (x1p, y1p)

                        Parameters

                        ( alias, origin )static
                        Create aliases for existing prototype methods. ...

                        Create aliases for existing prototype methods. Example:

                        Ext.define('My.cool.Class', {
                            method1: function() {  },
                            method2: function() {  }
                        });
                        
                        var test = new My.cool.Class();
                        
                        My.cool.Class.createAlias({
                            method3: 'method1',
                            method4: 'method2'
                        });
                        
                        test.method3(); // test.method1()
                        
                        My.cool.Class.createAlias('method5', 'method3');
                        
                        test.method5(); // test.method3() -> test.method1()
                        

                        Parameters

                        Ext.draw.Matrix
                        view source
                        ( x0, y0, x1, y1, x0p, y0p, x1p, y1p )static
                        Return the affine matrix that transform two points (x0, y0) and (x1, y1) to (x0p, y0p) and (x1p, y1p) ...

                        Return the affine matrix that transform two points (x0, y0) and (x1, y1) to (x0p, y0p) and (x1p, y1p)

                        Parameters

                        ( parent )privatestatic
                        ...

                        Parameters

                        Ext.draw.Matrix
                        view source
                        ( elements ) : Ext.draw.Matrixstatic
                        Create a flyweight to wrap the given array. ...

                        Create a flyweight to wrap the given array. The flyweight will directly refer the object and the elements can be changed by other methods.

                        Do not hold the instance of flyweight matrix.

                        Parameters

                        Returns

                        Get the current class' name in string format. ...

                        Get the current class' name in string format.

                        Ext.define('My.cool.Class', {
                            constructor: function() {
                                alert(this.self.getName()); // alerts 'My.cool.Class'
                            }
                        });
                        
                        My.cool.Class.getName(); // 'My.cool.Class'
                        

                        Returns

                        ...
                        ( name, mixinClass )privatestatic
                        Used internally by the mixins pre-processor ...

                        Used internally by the mixins pre-processor

                        Parameters

                        ( fn, scope )chainableprivatestatic
                        ...

                        Parameters

                        ( members ) : Ext.Basechainabledeprecatedstatic
                        Override members of this class. ...

                        Override members of this class. Overridden methods can be invoked via callParent.

                        Ext.define('My.Cat', {
                            constructor: function() {
                                alert("I'm a cat!");
                            }
                        });
                        
                        My.Cat.override({
                            constructor: function() {
                                alert("I'm going to be a cat!");
                        
                                var instance = this.callParent(arguments);
                        
                                alert("Meeeeoooowwww");
                        
                                return instance;
                            }
                        });
                        
                        var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                                  // alerts "I'm a cat!"
                                                  // alerts "Meeeeoooowwww"
                        

                        As of 2.1, direct use of this method is deprecated. Use Ext.define instead:

                        Ext.define('My.CatOverride', {
                            override: 'My.Cat',
                        
                            constructor: function() {
                                alert("I'm going to be a cat!");
                        
                                var instance = this.callParent(arguments);
                        
                                alert("Meeeeoooowwww");
                        
                                return instance;
                            }
                        });
                        

                        The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

                        This method has been deprecated since 2.1.0

                        Please use Ext.define instead

                        Parameters

                        • members : Object

                          The properties to add to this class. This should be specified as an object literal containing one or more properties.

                        Returns