path.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. var PathProxy = require("../core/PathProxy");
  2. var line = require("./line");
  3. var cubic = require("./cubic");
  4. var quadratic = require("./quadratic");
  5. var arc = require("./arc");
  6. var _util = require("./util");
  7. var normalizeRadian = _util.normalizeRadian;
  8. var curve = require("../core/curve");
  9. var windingLine = require("./windingLine");
  10. var CMD = PathProxy.CMD;
  11. var PI2 = Math.PI * 2;
  12. var EPSILON = 1e-4;
  13. function isAroundEqual(a, b) {
  14. return Math.abs(a - b) < EPSILON;
  15. } // 临时数组
  16. var roots = [-1, -1, -1];
  17. var extrema = [-1, -1];
  18. function swapExtrema() {
  19. var tmp = extrema[0];
  20. extrema[0] = extrema[1];
  21. extrema[1] = tmp;
  22. }
  23. function windingCubic(x0, y0, x1, y1, x2, y2, x3, y3, x, y) {
  24. // Quick reject
  25. if (y > y0 && y > y1 && y > y2 && y > y3 || y < y0 && y < y1 && y < y2 && y < y3) {
  26. return 0;
  27. }
  28. var nRoots = curve.cubicRootAt(y0, y1, y2, y3, y, roots);
  29. if (nRoots === 0) {
  30. return 0;
  31. } else {
  32. var w = 0;
  33. var nExtrema = -1;
  34. var y0_, y1_;
  35. for (var i = 0; i < nRoots; i++) {
  36. var t = roots[i]; // Avoid winding error when intersection point is the connect point of two line of polygon
  37. var unit = t === 0 || t === 1 ? 0.5 : 1;
  38. var x_ = curve.cubicAt(x0, x1, x2, x3, t);
  39. if (x_ < x) {
  40. // Quick reject
  41. continue;
  42. }
  43. if (nExtrema < 0) {
  44. nExtrema = curve.cubicExtrema(y0, y1, y2, y3, extrema);
  45. if (extrema[1] < extrema[0] && nExtrema > 1) {
  46. swapExtrema();
  47. }
  48. y0_ = curve.cubicAt(y0, y1, y2, y3, extrema[0]);
  49. if (nExtrema > 1) {
  50. y1_ = curve.cubicAt(y0, y1, y2, y3, extrema[1]);
  51. }
  52. }
  53. if (nExtrema == 2) {
  54. // 分成三段单调函数
  55. if (t < extrema[0]) {
  56. w += y0_ < y0 ? unit : -unit;
  57. } else if (t < extrema[1]) {
  58. w += y1_ < y0_ ? unit : -unit;
  59. } else {
  60. w += y3 < y1_ ? unit : -unit;
  61. }
  62. } else {
  63. // 分成两段单调函数
  64. if (t < extrema[0]) {
  65. w += y0_ < y0 ? unit : -unit;
  66. } else {
  67. w += y3 < y0_ ? unit : -unit;
  68. }
  69. }
  70. }
  71. return w;
  72. }
  73. }
  74. function windingQuadratic(x0, y0, x1, y1, x2, y2, x, y) {
  75. // Quick reject
  76. if (y > y0 && y > y1 && y > y2 || y < y0 && y < y1 && y < y2) {
  77. return 0;
  78. }
  79. var nRoots = curve.quadraticRootAt(y0, y1, y2, y, roots);
  80. if (nRoots === 0) {
  81. return 0;
  82. } else {
  83. var t = curve.quadraticExtremum(y0, y1, y2);
  84. if (t >= 0 && t <= 1) {
  85. var w = 0;
  86. var y_ = curve.quadraticAt(y0, y1, y2, t);
  87. for (var i = 0; i < nRoots; i++) {
  88. // Remove one endpoint.
  89. var unit = roots[i] === 0 || roots[i] === 1 ? 0.5 : 1;
  90. var x_ = curve.quadraticAt(x0, x1, x2, roots[i]);
  91. if (x_ < x) {
  92. // Quick reject
  93. continue;
  94. }
  95. if (roots[i] < t) {
  96. w += y_ < y0 ? unit : -unit;
  97. } else {
  98. w += y2 < y_ ? unit : -unit;
  99. }
  100. }
  101. return w;
  102. } else {
  103. // Remove one endpoint.
  104. var unit = roots[0] === 0 || roots[0] === 1 ? 0.5 : 1;
  105. var x_ = curve.quadraticAt(x0, x1, x2, roots[0]);
  106. if (x_ < x) {
  107. // Quick reject
  108. return 0;
  109. }
  110. return y2 < y0 ? unit : -unit;
  111. }
  112. }
  113. } // TODO
  114. // Arc 旋转
  115. function windingArc(cx, cy, r, startAngle, endAngle, anticlockwise, x, y) {
  116. y -= cy;
  117. if (y > r || y < -r) {
  118. return 0;
  119. }
  120. var tmp = Math.sqrt(r * r - y * y);
  121. roots[0] = -tmp;
  122. roots[1] = tmp;
  123. var diff = Math.abs(startAngle - endAngle);
  124. if (diff < 1e-4) {
  125. return 0;
  126. }
  127. if (diff % PI2 < 1e-4) {
  128. // Is a circle
  129. startAngle = 0;
  130. endAngle = PI2;
  131. var dir = anticlockwise ? 1 : -1;
  132. if (x >= roots[0] + cx && x <= roots[1] + cx) {
  133. return dir;
  134. } else {
  135. return 0;
  136. }
  137. }
  138. if (anticlockwise) {
  139. var tmp = startAngle;
  140. startAngle = normalizeRadian(endAngle);
  141. endAngle = normalizeRadian(tmp);
  142. } else {
  143. startAngle = normalizeRadian(startAngle);
  144. endAngle = normalizeRadian(endAngle);
  145. }
  146. if (startAngle > endAngle) {
  147. endAngle += PI2;
  148. }
  149. var w = 0;
  150. for (var i = 0; i < 2; i++) {
  151. var x_ = roots[i];
  152. if (x_ + cx > x) {
  153. var angle = Math.atan2(y, x_);
  154. var dir = anticlockwise ? 1 : -1;
  155. if (angle < 0) {
  156. angle = PI2 + angle;
  157. }
  158. if (angle >= startAngle && angle <= endAngle || angle + PI2 >= startAngle && angle + PI2 <= endAngle) {
  159. if (angle > Math.PI / 2 && angle < Math.PI * 1.5) {
  160. dir = -dir;
  161. }
  162. w += dir;
  163. }
  164. }
  165. }
  166. return w;
  167. }
  168. function containPath(data, lineWidth, isStroke, x, y) {
  169. var w = 0;
  170. var xi = 0;
  171. var yi = 0;
  172. var x0 = 0;
  173. var y0 = 0;
  174. for (var i = 0; i < data.length;) {
  175. var cmd = data[i++]; // Begin a new subpath
  176. if (cmd === CMD.M && i > 1) {
  177. // Close previous subpath
  178. if (!isStroke) {
  179. w += windingLine(xi, yi, x0, y0, x, y);
  180. } // 如果被任何一个 subpath 包含
  181. // if (w !== 0) {
  182. // return true;
  183. // }
  184. }
  185. if (i == 1) {
  186. // 如果第一个命令是 L, C, Q
  187. // 则 previous point 同绘制命令的第一个 point
  188. //
  189. // 第一个命令为 Arc 的情况下会在后面特殊处理
  190. xi = data[i];
  191. yi = data[i + 1];
  192. x0 = xi;
  193. y0 = yi;
  194. }
  195. switch (cmd) {
  196. case CMD.M:
  197. // moveTo 命令重新创建一个新的 subpath, 并且更新新的起点
  198. // 在 closePath 的时候使用
  199. x0 = data[i++];
  200. y0 = data[i++];
  201. xi = x0;
  202. yi = y0;
  203. break;
  204. case CMD.L:
  205. if (isStroke) {
  206. if (line.containStroke(xi, yi, data[i], data[i + 1], lineWidth, x, y)) {
  207. return true;
  208. }
  209. } else {
  210. // NOTE 在第一个命令为 L, C, Q 的时候会计算出 NaN
  211. w += windingLine(xi, yi, data[i], data[i + 1], x, y) || 0;
  212. }
  213. xi = data[i++];
  214. yi = data[i++];
  215. break;
  216. case CMD.C:
  217. if (isStroke) {
  218. if (cubic.containStroke(xi, yi, data[i++], data[i++], data[i++], data[i++], data[i], data[i + 1], lineWidth, x, y)) {
  219. return true;
  220. }
  221. } else {
  222. w += windingCubic(xi, yi, data[i++], data[i++], data[i++], data[i++], data[i], data[i + 1], x, y) || 0;
  223. }
  224. xi = data[i++];
  225. yi = data[i++];
  226. break;
  227. case CMD.Q:
  228. if (isStroke) {
  229. if (quadratic.containStroke(xi, yi, data[i++], data[i++], data[i], data[i + 1], lineWidth, x, y)) {
  230. return true;
  231. }
  232. } else {
  233. w += windingQuadratic(xi, yi, data[i++], data[i++], data[i], data[i + 1], x, y) || 0;
  234. }
  235. xi = data[i++];
  236. yi = data[i++];
  237. break;
  238. case CMD.A:
  239. // TODO Arc 判断的开销比较大
  240. var cx = data[i++];
  241. var cy = data[i++];
  242. var rx = data[i++];
  243. var ry = data[i++];
  244. var theta = data[i++];
  245. var dTheta = data[i++]; // TODO Arc 旋转
  246. var psi = data[i++];
  247. var anticlockwise = 1 - data[i++];
  248. var x1 = Math.cos(theta) * rx + cx;
  249. var y1 = Math.sin(theta) * ry + cy; // 不是直接使用 arc 命令
  250. if (i > 1) {
  251. w += windingLine(xi, yi, x1, y1, x, y);
  252. } else {
  253. // 第一个命令起点还未定义
  254. x0 = x1;
  255. y0 = y1;
  256. } // zr 使用scale来模拟椭圆, 这里也对x做一定的缩放
  257. var _x = (x - cx) * ry / rx + cx;
  258. if (isStroke) {
  259. if (arc.containStroke(cx, cy, ry, theta, theta + dTheta, anticlockwise, lineWidth, _x, y)) {
  260. return true;
  261. }
  262. } else {
  263. w += windingArc(cx, cy, ry, theta, theta + dTheta, anticlockwise, _x, y);
  264. }
  265. xi = Math.cos(theta + dTheta) * rx + cx;
  266. yi = Math.sin(theta + dTheta) * ry + cy;
  267. break;
  268. case CMD.R:
  269. x0 = xi = data[i++];
  270. y0 = yi = data[i++];
  271. var width = data[i++];
  272. var height = data[i++];
  273. var x1 = x0 + width;
  274. var y1 = y0 + height;
  275. if (isStroke) {
  276. if (line.containStroke(x0, y0, x1, y0, lineWidth, x, y) || line.containStroke(x1, y0, x1, y1, lineWidth, x, y) || line.containStroke(x1, y1, x0, y1, lineWidth, x, y) || line.containStroke(x0, y1, x0, y0, lineWidth, x, y)) {
  277. return true;
  278. }
  279. } else {
  280. // FIXME Clockwise ?
  281. w += windingLine(x1, y0, x1, y1, x, y);
  282. w += windingLine(x0, y1, x0, y0, x, y);
  283. }
  284. break;
  285. case CMD.Z:
  286. if (isStroke) {
  287. if (line.containStroke(xi, yi, x0, y0, lineWidth, x, y)) {
  288. return true;
  289. }
  290. } else {
  291. // Close a subpath
  292. w += windingLine(xi, yi, x0, y0, x, y); // 如果被任何一个 subpath 包含
  293. // FIXME subpaths may overlap
  294. // if (w !== 0) {
  295. // return true;
  296. // }
  297. }
  298. xi = x0;
  299. yi = y0;
  300. break;
  301. }
  302. }
  303. if (!isStroke && !isAroundEqual(yi, y0)) {
  304. w += windingLine(xi, yi, x0, y0, x, y) || 0;
  305. }
  306. return w !== 0;
  307. }
  308. function contain(pathData, x, y) {
  309. return containPath(pathData, 0, false, x, y);
  310. }
  311. function containStroke(pathData, lineWidth, x, y) {
  312. return containPath(pathData, lineWidth, true, x, y);
  313. }
  314. exports.contain = contain;
  315. exports.containStroke = containStroke;