Transformable.js 7.3 KB

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