Transformable.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. import * as matrix from './matrix.js';
  2. import * as vector from './vector.js';
  3. var mIdentity = matrix.identity;
  4. var EPSILON = 5e-5;
  5. function isNotAroundZero(val) {
  6. return val > EPSILON || val < -EPSILON;
  7. }
  8. var scaleTmp = [];
  9. var tmpTransform = [];
  10. var originTransform = matrix.create();
  11. var abs = Math.abs;
  12. var Transformable = (function () {
  13. function Transformable() {
  14. }
  15. Transformable.prototype.getLocalTransform = function (m) {
  16. return Transformable.getLocalTransform(this, m);
  17. };
  18. Transformable.prototype.setPosition = function (arr) {
  19. this.x = arr[0];
  20. this.y = arr[1];
  21. };
  22. Transformable.prototype.setScale = function (arr) {
  23. this.scaleX = arr[0];
  24. this.scaleY = arr[1];
  25. };
  26. Transformable.prototype.setSkew = function (arr) {
  27. this.skewX = arr[0];
  28. this.skewY = arr[1];
  29. };
  30. Transformable.prototype.setOrigin = function (arr) {
  31. this.originX = arr[0];
  32. this.originY = arr[1];
  33. };
  34. Transformable.prototype.needLocalTransform = function () {
  35. return isNotAroundZero(this.rotation)
  36. || isNotAroundZero(this.x)
  37. || isNotAroundZero(this.y)
  38. || isNotAroundZero(this.scaleX - 1)
  39. || isNotAroundZero(this.scaleY - 1)
  40. || isNotAroundZero(this.skewX)
  41. || isNotAroundZero(this.skewY);
  42. };
  43. Transformable.prototype.updateTransform = function () {
  44. var parentTransform = this.parent && this.parent.transform;
  45. var needLocalTransform = this.needLocalTransform();
  46. var m = this.transform;
  47. if (!(needLocalTransform || parentTransform)) {
  48. if (m) {
  49. mIdentity(m);
  50. this.invTransform = null;
  51. }
  52. return;
  53. }
  54. m = m || matrix.create();
  55. if (needLocalTransform) {
  56. this.getLocalTransform(m);
  57. }
  58. else {
  59. mIdentity(m);
  60. }
  61. if (parentTransform) {
  62. if (needLocalTransform) {
  63. matrix.mul(m, parentTransform, m);
  64. }
  65. else {
  66. matrix.copy(m, parentTransform);
  67. }
  68. }
  69. this.transform = m;
  70. this._resolveGlobalScaleRatio(m);
  71. };
  72. Transformable.prototype._resolveGlobalScaleRatio = function (m) {
  73. var globalScaleRatio = this.globalScaleRatio;
  74. if (globalScaleRatio != null && globalScaleRatio !== 1) {
  75. this.getGlobalScale(scaleTmp);
  76. var relX = scaleTmp[0] < 0 ? -1 : 1;
  77. var relY = scaleTmp[1] < 0 ? -1 : 1;
  78. var sx = ((scaleTmp[0] - relX) * globalScaleRatio + relX) / scaleTmp[0] || 0;
  79. var sy = ((scaleTmp[1] - relY) * globalScaleRatio + relY) / scaleTmp[1] || 0;
  80. m[0] *= sx;
  81. m[1] *= sx;
  82. m[2] *= sy;
  83. m[3] *= sy;
  84. }
  85. this.invTransform = this.invTransform || matrix.create();
  86. matrix.invert(this.invTransform, m);
  87. };
  88. Transformable.prototype.getComputedTransform = function () {
  89. var transformNode = this;
  90. var ancestors = [];
  91. while (transformNode) {
  92. ancestors.push(transformNode);
  93. transformNode = transformNode.parent;
  94. }
  95. while (transformNode = ancestors.pop()) {
  96. transformNode.updateTransform();
  97. }
  98. return this.transform;
  99. };
  100. Transformable.prototype.setLocalTransform = function (m) {
  101. if (!m) {
  102. return;
  103. }
  104. var sx = m[0] * m[0] + m[1] * m[1];
  105. var sy = m[2] * m[2] + m[3] * m[3];
  106. var rotation = Math.atan2(m[1], m[0]);
  107. var shearX = Math.PI / 2 + rotation - Math.atan2(m[3], m[2]);
  108. sy = Math.sqrt(sy) * Math.cos(shearX);
  109. sx = Math.sqrt(sx);
  110. this.skewX = shearX;
  111. this.skewY = 0;
  112. this.rotation = -rotation;
  113. this.x = +m[4];
  114. this.y = +m[5];
  115. this.scaleX = sx;
  116. this.scaleY = sy;
  117. this.originX = 0;
  118. this.originY = 0;
  119. };
  120. Transformable.prototype.decomposeTransform = function () {
  121. if (!this.transform) {
  122. return;
  123. }
  124. var parent = this.parent;
  125. var m = this.transform;
  126. if (parent && parent.transform) {
  127. parent.invTransform = parent.invTransform || matrix.create();
  128. matrix.mul(tmpTransform, parent.invTransform, m);
  129. m = tmpTransform;
  130. }
  131. var ox = this.originX;
  132. var oy = this.originY;
  133. if (ox || oy) {
  134. originTransform[4] = ox;
  135. originTransform[5] = oy;
  136. matrix.mul(tmpTransform, m, originTransform);
  137. tmpTransform[4] -= ox;
  138. tmpTransform[5] -= oy;
  139. m = tmpTransform;
  140. }
  141. this.setLocalTransform(m);
  142. };
  143. Transformable.prototype.getGlobalScale = function (out) {
  144. var m = this.transform;
  145. out = out || [];
  146. if (!m) {
  147. out[0] = 1;
  148. out[1] = 1;
  149. return out;
  150. }
  151. out[0] = Math.sqrt(m[0] * m[0] + m[1] * m[1]);
  152. out[1] = Math.sqrt(m[2] * m[2] + m[3] * m[3]);
  153. if (m[0] < 0) {
  154. out[0] = -out[0];
  155. }
  156. if (m[3] < 0) {
  157. out[1] = -out[1];
  158. }
  159. return out;
  160. };
  161. Transformable.prototype.transformCoordToLocal = function (x, y) {
  162. var v2 = [x, y];
  163. var invTransform = this.invTransform;
  164. if (invTransform) {
  165. vector.applyTransform(v2, v2, invTransform);
  166. }
  167. return v2;
  168. };
  169. Transformable.prototype.transformCoordToGlobal = function (x, y) {
  170. var v2 = [x, y];
  171. var transform = this.transform;
  172. if (transform) {
  173. vector.applyTransform(v2, v2, transform);
  174. }
  175. return v2;
  176. };
  177. Transformable.prototype.getLineScale = function () {
  178. var m = this.transform;
  179. return m && abs(m[0] - 1) > 1e-10 && abs(m[3] - 1) > 1e-10
  180. ? Math.sqrt(abs(m[0] * m[3] - m[2] * m[1]))
  181. : 1;
  182. };
  183. Transformable.prototype.copyTransform = function (source) {
  184. copyTransform(this, source);
  185. };
  186. Transformable.getLocalTransform = function (target, m) {
  187. m = m || [];
  188. var ox = target.originX || 0;
  189. var oy = target.originY || 0;
  190. var sx = target.scaleX;
  191. var sy = target.scaleY;
  192. var ax = target.anchorX;
  193. var ay = target.anchorY;
  194. var rotation = target.rotation || 0;
  195. var x = target.x;
  196. var y = target.y;
  197. var skewX = target.skewX ? Math.tan(target.skewX) : 0;
  198. var skewY = target.skewY ? Math.tan(-target.skewY) : 0;
  199. if (ox || oy || ax || ay) {
  200. var dx = ox + ax;
  201. var dy = oy + ay;
  202. m[4] = -dx * sx - skewX * dy * sy;
  203. m[5] = -dy * sy - skewY * dx * sx;
  204. }
  205. else {
  206. m[4] = m[5] = 0;
  207. }
  208. m[0] = sx;
  209. m[3] = sy;
  210. m[1] = skewY * sx;
  211. m[2] = skewX * sy;
  212. rotation && matrix.rotate(m, m, rotation);
  213. m[4] += ox + x;
  214. m[5] += oy + y;
  215. return m;
  216. };
  217. Transformable.initDefaultProps = (function () {
  218. var proto = Transformable.prototype;
  219. proto.scaleX =
  220. proto.scaleY =
  221. proto.globalScaleRatio = 1;
  222. proto.x =
  223. proto.y =
  224. proto.originX =
  225. proto.originY =
  226. proto.skewX =
  227. proto.skewY =
  228. proto.rotation =
  229. proto.anchorX =
  230. proto.anchorY = 0;
  231. })();
  232. return Transformable;
  233. }());
  234. ;
  235. export var TRANSFORMABLE_PROPS = [
  236. 'x', 'y', 'originX', 'originY', 'anchorX', 'anchorY', 'rotation', 'scaleX', 'scaleY', 'skewX', 'skewY'
  237. ];
  238. export function copyTransform(target, source) {
  239. for (var i = 0; i < TRANSFORMABLE_PROPS.length; i++) {
  240. var propName = TRANSFORMABLE_PROPS[i];
  241. target[propName] = source[propName];
  242. }
  243. }
  244. export default Transformable;