Transformable.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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. matrix.mul(tmpTransform, parent.invTransform, m);
  128. m = tmpTransform;
  129. }
  130. var ox = this.originX;
  131. var oy = this.originY;
  132. if (ox || oy) {
  133. originTransform[4] = ox;
  134. originTransform[5] = oy;
  135. matrix.mul(tmpTransform, m, originTransform);
  136. tmpTransform[4] -= ox;
  137. tmpTransform[5] -= oy;
  138. m = tmpTransform;
  139. }
  140. this.setLocalTransform(m);
  141. };
  142. Transformable.prototype.getGlobalScale = function (out) {
  143. var m = this.transform;
  144. out = out || [];
  145. if (!m) {
  146. out[0] = 1;
  147. out[1] = 1;
  148. return out;
  149. }
  150. out[0] = Math.sqrt(m[0] * m[0] + m[1] * m[1]);
  151. out[1] = Math.sqrt(m[2] * m[2] + m[3] * m[3]);
  152. if (m[0] < 0) {
  153. out[0] = -out[0];
  154. }
  155. if (m[3] < 0) {
  156. out[1] = -out[1];
  157. }
  158. return out;
  159. };
  160. Transformable.prototype.transformCoordToLocal = function (x, y) {
  161. var v2 = [x, y];
  162. var invTransform = this.invTransform;
  163. if (invTransform) {
  164. vector.applyTransform(v2, v2, invTransform);
  165. }
  166. return v2;
  167. };
  168. Transformable.prototype.transformCoordToGlobal = function (x, y) {
  169. var v2 = [x, y];
  170. var transform = this.transform;
  171. if (transform) {
  172. vector.applyTransform(v2, v2, transform);
  173. }
  174. return v2;
  175. };
  176. Transformable.prototype.getLineScale = function () {
  177. var m = this.transform;
  178. return m && abs(m[0] - 1) > 1e-10 && abs(m[3] - 1) > 1e-10
  179. ? Math.sqrt(abs(m[0] * m[3] - m[2] * m[1]))
  180. : 1;
  181. };
  182. Transformable.prototype.copyTransform = function (source) {
  183. copyTransform(this, source);
  184. };
  185. Transformable.getLocalTransform = function (target, m) {
  186. m = m || [];
  187. var ox = target.originX || 0;
  188. var oy = target.originY || 0;
  189. var sx = target.scaleX;
  190. var sy = target.scaleY;
  191. var ax = target.anchorX;
  192. var ay = target.anchorY;
  193. var rotation = target.rotation || 0;
  194. var x = target.x;
  195. var y = target.y;
  196. var skewX = target.skewX ? Math.tan(target.skewX) : 0;
  197. var skewY = target.skewY ? Math.tan(-target.skewY) : 0;
  198. if (ox || oy || ax || ay) {
  199. var dx = ox + ax;
  200. var dy = oy + ay;
  201. m[4] = -dx * sx - skewX * dy * sy;
  202. m[5] = -dy * sy - skewY * dx * sx;
  203. }
  204. else {
  205. m[4] = m[5] = 0;
  206. }
  207. m[0] = sx;
  208. m[3] = sy;
  209. m[1] = skewY * sx;
  210. m[2] = skewX * sy;
  211. rotation && matrix.rotate(m, m, rotation);
  212. m[4] += ox + x;
  213. m[5] += oy + y;
  214. return m;
  215. };
  216. Transformable.initDefaultProps = (function () {
  217. var proto = Transformable.prototype;
  218. proto.scaleX =
  219. proto.scaleY =
  220. proto.globalScaleRatio = 1;
  221. proto.x =
  222. proto.y =
  223. proto.originX =
  224. proto.originY =
  225. proto.skewX =
  226. proto.skewY =
  227. proto.rotation =
  228. proto.anchorX =
  229. proto.anchorY = 0;
  230. })();
  231. return Transformable;
  232. }());
  233. ;
  234. export var TRANSFORMABLE_PROPS = [
  235. 'x', 'y', 'originX', 'originY', 'anchorX', 'anchorY', 'rotation', 'scaleX', 'scaleY', 'skewX', 'skewY'
  236. ];
  237. export function copyTransform(target, source) {
  238. for (var i = 0; i < TRANSFORMABLE_PROPS.length; i++) {
  239. var propName = TRANSFORMABLE_PROPS[i];
  240. target[propName] = source[propName];
  241. }
  242. }
  243. export default Transformable;