Source: core/display/Transform.js

core/display/Transform.js

  1. import { Point, ObservablePoint } from '../math';
  2. import TransformBase from './TransformBase';
  3. /**
  4. * Generic class to deal with traditional 2D matrix transforms
  5. * local transformation is calculated from position,scale,skew and rotation
  6. *
  7. * @class
  8. * @extends PIXI.TransformBase
  9. * @memberof PIXI
  10. */
  11. export default class Transform extends TransformBase
  12. {
  13. /**
  14. *
  15. */
  16. constructor()
  17. {
  18. super();
  19. /**
  20. * The coordinate of the object relative to the local coordinates of the parent.
  21. *
  22. * @member {PIXI.Point}
  23. */
  24. this.position = new Point(0, 0);
  25. /**
  26. * The scale factor of the object.
  27. *
  28. * @member {PIXI.Point}
  29. */
  30. this.scale = new Point(1, 1);
  31. /**
  32. * The skew amount, on the x and y axis.
  33. *
  34. * @member {PIXI.ObservablePoint}
  35. */
  36. this.skew = new ObservablePoint(this.updateSkew, this, 0, 0);
  37. /**
  38. * The pivot point of the displayObject that it rotates around.
  39. *
  40. * @member {PIXI.Point}
  41. */
  42. this.pivot = new Point(0, 0);
  43. /**
  44. * The rotation value of the object, in radians
  45. *
  46. * @member {Number}
  47. * @private
  48. */
  49. this._rotation = 0;
  50. this._cx = 1; // cos rotation + skewY;
  51. this._sx = 0; // sin rotation + skewY;
  52. this._cy = 0; // cos rotation + Math.PI/2 - skewX;
  53. this._sy = 1; // sin rotation + Math.PI/2 - skewX;
  54. }
  55. /**
  56. * Updates the skew values when the skew or rotation changes.
  57. *
  58. * @private
  59. */
  60. updateSkew()
  61. {
  62. this._cx = Math.cos(this._rotation + this.skew._y);
  63. this._sx = Math.sin(this._rotation + this.skew._y);
  64. this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2
  65. this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2
  66. }
  67. /**
  68. * Updates only local matrix
  69. */
  70. updateLocalTransform()
  71. {
  72. const lt = this.localTransform;
  73. lt.a = this._cx * this.scale.x;
  74. lt.b = this._sx * this.scale.x;
  75. lt.c = this._cy * this.scale.y;
  76. lt.d = this._sy * this.scale.y;
  77. lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c));
  78. lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d));
  79. }
  80. /**
  81. * Updates the values of the object and applies the parent's transform.
  82. *
  83. * @param {PIXI.Transform} parentTransform - The transform of the parent of this object
  84. */
  85. updateTransform(parentTransform)
  86. {
  87. const lt = this.localTransform;
  88. lt.a = this._cx * this.scale.x;
  89. lt.b = this._sx * this.scale.x;
  90. lt.c = this._cy * this.scale.y;
  91. lt.d = this._sy * this.scale.y;
  92. lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c));
  93. lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d));
  94. // concat the parent matrix with the objects transform.
  95. const pt = parentTransform.worldTransform;
  96. const wt = this.worldTransform;
  97. wt.a = (lt.a * pt.a) + (lt.b * pt.c);
  98. wt.b = (lt.a * pt.b) + (lt.b * pt.d);
  99. wt.c = (lt.c * pt.a) + (lt.d * pt.c);
  100. wt.d = (lt.c * pt.b) + (lt.d * pt.d);
  101. wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx;
  102. wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty;
  103. this._worldID ++;
  104. }
  105. /**
  106. * Decomposes a matrix and sets the transforms properties based on it.
  107. *
  108. * @param {PIXI.Matrix} matrix - The matrix to decompose
  109. */
  110. setFromMatrix(matrix)
  111. {
  112. matrix.decompose(this);
  113. }
  114. /**
  115. * The rotation of the object in radians.
  116. *
  117. * @member {number}
  118. */
  119. get rotation()
  120. {
  121. return this._rotation;
  122. }
  123. set rotation(value) // eslint-disable-line require-jsdoc
  124. {
  125. this._rotation = value;
  126. this.updateSkew();
  127. }
  128. }