path.ts 12 KB

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