path.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { __spreadArrays } from "tslib";
  2. import { catmullRom2Bezier } from '@antv/path-util';
  3. import { Category, Linear } from '@antv/scale';
  4. import { each, head, isEqual, map } from '@antv/util';
  5. /**
  6. * 点数组转 path
  7. * @param points
  8. */
  9. function pointsToPath(points) {
  10. return map(points, function (p, idx) {
  11. var command = idx === 0 ? 'M' : 'L';
  12. var x = p[0], y = p[1];
  13. return [command, x, y];
  14. });
  15. }
  16. /**
  17. * 将点连接成路径 path
  18. * @param points
  19. */
  20. export function getLinePath(points) {
  21. return pointsToPath(points);
  22. }
  23. /**
  24. * 将点连成平滑的曲线
  25. * @param points
  26. */
  27. export function getSmoothLinePath(points) {
  28. if (points.length <= 2) {
  29. // 两点以内直接绘制成路径
  30. return getLinePath(points);
  31. }
  32. var data = [];
  33. each(points, function (p) {
  34. // 当前点和上一个点一样的时候,忽略掉
  35. if (!isEqual(p, data.slice(data.length - 2))) {
  36. data.push(p[0], p[1]);
  37. }
  38. });
  39. // const constraint = [ // 范围
  40. // [ 0, 0 ],
  41. // [ 1, 1 ],
  42. // ];
  43. var path = catmullRom2Bezier(data, false);
  44. var _a = head(points), x = _a[0], y = _a[1];
  45. path.unshift(['M', x, y]);
  46. return path;
  47. }
  48. /**
  49. * 将数据转成 path,利用 scale 的归一化能力
  50. * @param data
  51. * @param width
  52. * @param height
  53. * @param smooth
  54. */
  55. export function dataToPath(data, width, height, smooth) {
  56. if (smooth === void 0) { smooth = true; }
  57. // 利用 scale 来获取 y 上的映射
  58. var y = new Linear({
  59. values: data,
  60. });
  61. var x = new Category({
  62. values: map(data, function (v, idx) { return idx; }),
  63. });
  64. var points = map(data, function (v, idx) {
  65. return [x.scale(idx) * width, height - y.scale(v) * height];
  66. });
  67. return smooth ? getSmoothLinePath(points) : getLinePath(points);
  68. }
  69. /**
  70. * 获得 area 面积的横向连接线的 px 位置
  71. * @param data
  72. * @param width
  73. * @param height
  74. */
  75. export function getAreaLineY(data, height) {
  76. var y = new Linear({
  77. values: data,
  78. });
  79. // 当曲线全部为负数时,取最大值,当曲线全部为正数时,取最小值,当曲线有正有负,则取零点
  80. var lineY = y.max < 0 ? y.max : Math.max(0, y.min);
  81. return height - y.scale(lineY) * height;
  82. }
  83. /**
  84. * 线 path 转 area path
  85. * @param path
  86. * @param width
  87. * @param height
  88. */
  89. export function linePathToAreaPath(path, width, height, data) {
  90. var areaPath = __spreadArrays(path);
  91. var lineYPx = getAreaLineY(data, height);
  92. areaPath.push(['L', width, lineYPx]);
  93. areaPath.push(['L', 0, lineYPx]);
  94. areaPath.push(['Z']);
  95. return areaPath;
  96. }
  97. //# sourceMappingURL=path.js.map