math.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. /**
  2. * Package: svedit.math
  3. *
  4. * Licensed under the Apache License, Version 2
  5. *
  6. * Copyright(c) 2010 Alexis Deveria
  7. * Copyright(c) 2010 Jeff Schiller
  8. */
  9. // Dependencies:
  10. // None.
  11. var svgedit = svgedit || {};
  12. (function() {
  13. if (!svgedit.math) {
  14. svgedit.math = {};
  15. }
  16. // Constants
  17. var NEAR_ZERO = 1e-14;
  18. // Throw away SVGSVGElement used for creating matrices/transforms.
  19. var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  20. // Function: svgedit.math.transformPoint
  21. // A (hopefully) quicker function to transform a point by a matrix
  22. // (this function avoids any DOM calls and just does the math)
  23. //
  24. // Parameters:
  25. // x - Float representing the x coordinate
  26. // y - Float representing the y coordinate
  27. // m - Matrix object to transform the point with
  28. // Returns a x,y object representing the transformed point
  29. svgedit.math.transformPoint = function(x, y, m) {
  30. return { x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f};
  31. };
  32. // Function: svgedit.math.isIdentity
  33. // Helper function to check if the matrix performs no actual transform
  34. // (i.e. exists for identity purposes)
  35. //
  36. // Parameters:
  37. // m - The matrix object to check
  38. //
  39. // Returns:
  40. // Boolean indicating whether or not the matrix is 1,0,0,1,0,0
  41. svgedit.math.isIdentity = function(m) {
  42. return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);
  43. };
  44. // Function: svgedit.math.matrixMultiply
  45. // This function tries to return a SVGMatrix that is the multiplication m1*m2.
  46. // We also round to zero when it's near zero
  47. //
  48. // Parameters:
  49. // >= 2 Matrix objects to multiply
  50. //
  51. // Returns:
  52. // The matrix object resulting from the calculation
  53. svgedit.math.matrixMultiply = function() {
  54. var args = arguments, i = args.length, m = args[i-1];
  55. while(i-- > 1) {
  56. var m1 = args[i-1];
  57. m = m1.multiply(m);
  58. }
  59. if (Math.abs(m.a) < NEAR_ZERO) m.a = 0;
  60. if (Math.abs(m.b) < NEAR_ZERO) m.b = 0;
  61. if (Math.abs(m.c) < NEAR_ZERO) m.c = 0;
  62. if (Math.abs(m.d) < NEAR_ZERO) m.d = 0;
  63. if (Math.abs(m.e) < NEAR_ZERO) m.e = 0;
  64. if (Math.abs(m.f) < NEAR_ZERO) m.f = 0;
  65. return m;
  66. };
  67. // Function: svgedit.math.hasMatrixTransform
  68. // See if the given transformlist includes a non-indentity matrix transform
  69. //
  70. // Parameters:
  71. // tlist - The transformlist to check
  72. //
  73. // Returns:
  74. // Boolean on whether or not a matrix transform was found
  75. svgedit.math.hasMatrixTransform = function(tlist) {
  76. if(!tlist) return false;
  77. var num = tlist.numberOfItems;
  78. while (num--) {
  79. var xform = tlist.getItem(num);
  80. if (xform.type == 1 && !svgedit.math.isIdentity(xform.matrix)) return true;
  81. }
  82. return false;
  83. };
  84. // Function: svgedit.math.transformBox
  85. // Transforms a rectangle based on the given matrix
  86. //
  87. // Parameters:
  88. // l - Float with the box's left coordinate
  89. // t - Float with the box's top coordinate
  90. // w - Float with the box width
  91. // h - Float with the box height
  92. // m - Matrix object to transform the box by
  93. //
  94. // Returns:
  95. // An object with the following values:
  96. // * tl - The top left coordinate (x,y object)
  97. // * tr - The top right coordinate (x,y object)
  98. // * bl - The bottom left coordinate (x,y object)
  99. // * br - The bottom right coordinate (x,y object)
  100. // * aabox - Object with the following values:
  101. // * Float with the axis-aligned x coordinate
  102. // * Float with the axis-aligned y coordinate
  103. // * Float with the axis-aligned width coordinate
  104. // * Float with the axis-aligned height coordinate
  105. svgedit.math.transformBox = function(l, t, w, h, m) {
  106. var topleft = {x:l,y:t},
  107. topright = {x:(l+w),y:t},
  108. botright = {x:(l+w),y:(t+h)},
  109. botleft = {x:l,y:(t+h)};
  110. var transformPoint = svgedit.math.transformPoint;
  111. topleft = transformPoint( topleft.x, topleft.y, m );
  112. var minx = topleft.x,
  113. maxx = topleft.x,
  114. miny = topleft.y,
  115. maxy = topleft.y;
  116. topright = transformPoint( topright.x, topright.y, m );
  117. minx = Math.min(minx, topright.x);
  118. maxx = Math.max(maxx, topright.x);
  119. miny = Math.min(miny, topright.y);
  120. maxy = Math.max(maxy, topright.y);
  121. botleft = transformPoint( botleft.x, botleft.y, m);
  122. minx = Math.min(minx, botleft.x);
  123. maxx = Math.max(maxx, botleft.x);
  124. miny = Math.min(miny, botleft.y);
  125. maxy = Math.max(maxy, botleft.y);
  126. botright = transformPoint( botright.x, botright.y, m );
  127. minx = Math.min(minx, botright.x);
  128. maxx = Math.max(maxx, botright.x);
  129. miny = Math.min(miny, botright.y);
  130. maxy = Math.max(maxy, botright.y);
  131. return {tl:topleft, tr:topright, bl:botleft, br:botright,
  132. aabox: {x:minx, y:miny, width:(maxx-minx), height:(maxy-miny)} };
  133. };
  134. // Function: svgedit.math.transformListToTransform
  135. // This returns a single matrix Transform for a given Transform List
  136. // (this is the equivalent of SVGTransformList.consolidate() but unlike
  137. // that method, this one does not modify the actual SVGTransformList)
  138. // This function is very liberal with its min,max arguments
  139. //
  140. // Parameters:
  141. // tlist - The transformlist object
  142. // min - Optional integer indicating start transform position
  143. // max - Optional integer indicating end transform position
  144. //
  145. // Returns:
  146. // A single matrix transform object
  147. svgedit.math.transformListToTransform = function(tlist, min, max) {
  148. if(tlist == null) {
  149. // Or should tlist = null have been prevented before this?
  150. return svg.createSVGTransformFromMatrix(svg.createSVGMatrix());
  151. }
  152. var min = min == undefined ? 0 : min;
  153. var max = max == undefined ? (tlist.numberOfItems-1) : max;
  154. min = parseInt(min);
  155. max = parseInt(max);
  156. if (min > max) { var temp = max; max = min; min = temp; }
  157. var m = svg.createSVGMatrix();
  158. for (var i = min; i <= max; ++i) {
  159. // if our indices are out of range, just use a harmless identity matrix
  160. var mtom = (i >= 0 && i < tlist.numberOfItems ?
  161. tlist.getItem(i).matrix :
  162. svg.createSVGMatrix());
  163. m = svgedit.math.matrixMultiply(m, mtom);
  164. }
  165. return svg.createSVGTransformFromMatrix(m);
  166. };
  167. // Function: svgedit.math.getMatrix
  168. // Get the matrix object for a given element
  169. //
  170. // Parameters:
  171. // elem - The DOM element to check
  172. //
  173. // Returns:
  174. // The matrix object associated with the element's transformlist
  175. svgedit.math.getMatrix = function(elem) {
  176. var tlist = svgedit.transformlist.getTransformList(elem);
  177. return svgedit.math.transformListToTransform(tlist).matrix;
  178. };
  179. // Function: svgedit.math.snapToAngle
  180. // Returns a 45 degree angle coordinate associated with the two given
  181. // coordinates
  182. //
  183. // Parameters:
  184. // x1 - First coordinate's x value
  185. // x2 - Second coordinate's x value
  186. // y1 - First coordinate's y value
  187. // y2 - Second coordinate's y value
  188. //
  189. // Returns:
  190. // Object with the following values:
  191. // x - The angle-snapped x value
  192. // y - The angle-snapped y value
  193. // snapangle - The angle at which to snap
  194. svgedit.math.snapToAngle = function(x1,y1,x2,y2) {
  195. var snap = Math.PI/4; // 45 degrees
  196. var dx = x2 - x1;
  197. var dy = y2 - y1;
  198. var angle = Math.atan2(dy,dx);
  199. var dist = Math.sqrt(dx * dx + dy * dy);
  200. var snapangle= Math.round(angle/snap)*snap;
  201. var x = x1 + dist*Math.cos(snapangle);
  202. var y = y1 + dist*Math.sin(snapangle);
  203. //console.log(x1,y1,x2,y2,x,y,angle)
  204. return {x:x, y:y, a:snapangle};
  205. };
  206. // Function: rectsIntersect
  207. // Check if two rectangles (BBoxes objects) intersect each other
  208. //
  209. // Paramaters:
  210. // r1 - The first BBox-like object
  211. // r2 - The second BBox-like object
  212. //
  213. // Returns:
  214. // Boolean that's true if rectangles intersect
  215. svgedit.math.rectsIntersect = function(r1, r2) {
  216. return r2.x < (r1.x+r1.width) &&
  217. (r2.x+r2.width) > r1.x &&
  218. r2.y < (r1.y+r1.height) &&
  219. (r2.y+r2.height) > r1.y;
  220. };
  221. })();