Transformable.js 7.8 KB

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