3.3.10 • Published 10 months ago

@antv/util v3.3.10

Weekly downloads
103,289
License
MIT
Repository
github
Last release
10 months ago

util

AntV 底层依赖的工具库,不建议在自己业务中使用。

Build Status npm Version npm Download npm License

Usage

import { gradient } from '@antv/util';

原则

  • util 只有一个 npm 包,按照目录来组织不同类型的方法,避免 monorepo 互相依赖
  • 内容和 AntV 强相关,避免做和 lodash 等相同的工具库
  • 不使用的方法,及时删除,并保持新增方法可以按需引入
  • 旧版本的不维护,如果 AntV 技术栈的旧版本需要迭代,请升级到 v3

API

提供以下 Path 工具方法,包含转换、几何计算等。

path2String

将 PathArray 转换成字符串形式,不会对原始定义中的命令进行修改:

const str: PathArray = [
  ['M', 10, 10],
  ['L', 100, 100],
  ['l', 10, 10],
  ['h', 20],
  ['v', 20],
];
expect(path2String(str)).toEqual('M10 10L100 100l10 10h20v20');

path2Array

将 PathArray 转换成数组,不会对原始定义中的命令进行修改:

const str = 'M10 10L100 100l10 10h20v20';
expect(path2Array(str)).toEqual([
  ['M', 10, 10],
  ['L', 100, 100],
  ['l', 10, 10],
  ['h', 20],
  ['v', 20],
]);

path2Absolute

将定义中的相对命令转换成绝对命令,例如:

  • l -> L
  • h -> H
  • v -> V

完整方法签名如下:

path2Absolute(pathInput: string | PathArray): AbsoluteArray;
const str: PathArray = [
  ['M', 10, 10],
  ['L', 100, 100],
  ['l', 10, 10],
  ['h', 20],
  ['v', 20],
];
const arr = path2Absolute(str);
expect(arr).toEqual([
  ['M', 10, 10],
  ['L', 100, 100],
  ['L', 110, 110],
  ['H', 130],
  ['V', 130],
]);

path2Curve

将部分命令转曲,例如 L / A 转成 C 命令,借助 cubic bezier 易于分割的特性用于实现形变动画。 该方法内部会调用 path2Absolute,因此最终返回的 PathArray 中仅包含 M 和 C 命令。

完整方法签名如下:

path2Curve(pathInput: string | PathArray): CurveArray;
expect(
  path2Curve([
    ['M', 0, 0],
    ['L', 100, 100],
  ]),
).toEqual([
  ['M', 0, 0],
  ['C', 44.194173824159215, 44.194173824159215, 68.75, 68.75, 100, 100],
]);

clonePath

复制路径:

const cloned = clonePath(pathInput);

reverseCurve

const pathArray: CurveArray = [
  ['M', 170, 90],
  ['C', 150, 90, 155, 10, 130, 10],
  ['C', 105, 10, 110, 90, 90, 90],
  ['C', 70, 90, 75, 10, 50, 10],
  ['C', 25, 10, 30, 90, 10, 90],
];

const reversed = reverseCurve(pathArray);

getPathBBox

获取几何定义下的包围盒,形如:

export interface PathBBox {
  width: number;
  height: number;
  x: number;
  y: number;
  x2: number;
  y2: number;
  cx: number;
  cy: number;
  cz: number;
}
const bbox = getPathBBox([['M', 0, 0], ['L', 100, 0], ['L', 100, 100], ['L', 0, 100], ['Z']]);

expect(bbox).toEqual({ cx: 50, cy: 50, cz: 150, height: 100, width: 100, x: 0, x2: 100, y: 0, y2: 100 });

getTotalLength

获取路径总长度。

const length = getTotalLength([['M', 0, 0], ['L', 100, 0], ['L', 100, 100], ['L', 0, 100], ['Z']]);

expect(length).toEqual(400);

getPointAtLength

获取路径上从起点出发,到指定距离的点。

const point = getPointAtLength([['M', 0, 0], ['L', 100, 0], ['L', 100, 100], ['L', 0, 100], ['Z']], 0);
expect(point).toEqual({ x: 0, y: 0 });

getPathArea

计算路径包围的面积。内部实现中首先通过 path2Curve 转曲,再计算 cubic curve 面积,详见

方法签名如下:

function getPathArea(path: PathArray): number;

isPointInStroke

判断一个点是否在路径上,仅通过几何定义计算,不考虑其他样式属性例如线宽、lineJoin、miter 等。

方法签名如下:

isPointInStroke(pathInput: string | PathArray, point: Point): boolean;
const result = isPointInStroke(segments, { x: 10, y: 10 });

distanceSquareRoot

计算两点之间的距离。

方法签名如下:

distanceSquareRoot(a: [number, number], b: [number, number]): number;

equalizeSegments

将两条路径处理成段数相同,用于形变动画前的分割操作。

const [formattedPath1, formattedPath2] = equalizeSegments(path1, path2);

isPointInPolygon

判断一个点是否在多边形内。多边形形如:

const polygon = [
  [0, 0],
  [0, 100],
  [30, 100],
  [30, 0],
];

// [0, 0] 在多边形的边上
isPointInPolygon(polygon, 0, 0); // true

isPolygonsIntersect

判断两个多边形是否相交:

isPolygonsIntersect(polygon1, polygon2);

Benchmarks

Build first.

yarn run benchmarks

We can get the following output in the console, it can be seen that the same method from 5.0 is ~3 times faster than 4.0.

// logs
// Path2String#4.0 x 14,795 ops/sec ±3.35% (79 runs sampled)
// Path2String#5.0 x 51,710 ops/sec ±2.05% (85 runs sampled)
// Fastest is Path2String#5.0

// Path2Absolute#4.0 x 14,524 ops/sec ±2.55% (80 runs sampled)
// Path2Absolute#5.0 x 35,120 ops/sec ±3.10% (81 runs sampled)
// Fastest is Path2Absolute#5.0

License

MIT@AntV.

keyreply-conversation-flow-vuebiz-editorhzero-wfdchoerodon-prod-repo12ysb-editor@infinitebrahmanuniverse/nolb-_antvg2_sp_versionj-graphin-vue2@everything-registry/sub-chunk-71syl-wfd-vuewdc-chartswfdwfd-gvawfd-sheeepwfd-vuewfd-vue-extensionwfd-vue-nnwfd-vue-nswfd-vue-nwwfd2workflow-vue-alex423xing-wfdxing-wfd-vuexm-g2-4xsuoqiu-f2vite-vue3-g6-process1@ant-design/maps@cylynx/graphinivc-g6jm-graphin-vue2lcg-wfd-vue@shuji-component/cloud-chartsst-data-setst-g2txcloud-wf-activiti-designertm-workflow-designertree_hierarchy@antv-source/g2@antv-source/g2plot@antv/a8@antv/adjust@antv/algorithm@antv/attr@antv/auto-chart@antv/calendar-heatmap@antv/chartshaper@antv/dw-transform@antv/f-engine@antv/f6@antv/f6-core@antv/f6-element@antv/f6-plugin@antv/g-adapter@antv/f2-algorithm@antv/f2-graphic@antv/f2-wordcloud@antv/f2@antv/coord@antv/data-set@antv/color-util@antv/component@antv/g-plugin-zdog-canvas-renderer@antv/g-plugin-zdog-svg-renderer@antv/g-svg@antv/g-web-animations-api@antv/g-webgl@antv/g-plugin-rough-canvas-renderer@antv/g-plugin-rough-svg-renderer@antv/g-plugin-svg-renderer@antv/g-plugin-webgl-device@antv/g-plugin-webgpu-device@antv/g-plugin-canvas-renderer@antv/g-plugin-canvaskit-renderer@antv/g-plugin-device-renderer@antv/g-plugin-dragndrop@antv/g-plugin-canvas-path-generator@antv/g-plugin-canvas-picker@antv/g-lottie-player@antv/g-math@antv/g-mobile-canvas@antv/g-mobile-svg@antv/g-mobile-webgl@antv/g-pattern@antv/g-components@antv/g-device-api@antv/g-lite@antv/g-plugin-html-renderer@antv/g-plugin-image-loader@antv/g-base@antv/g-camera-api@antv/g-canvas@antv/g-canvaskit@antv/gui@antv/interaction@antv/l7-composite-layers@antv/l7-extension-g-layer@antv/l7plot@antv/l7plot-component@antv/g-webgpu@antv/g2
3.3.10-beta.0

10 months ago

3.3.9

10 months ago

3.3.10

10 months ago

3.3.8

11 months ago

3.3.7

1 year ago

3.3.6

1 year ago

3.3.5

2 years ago

3.3.4

2 years ago

3.3.3

2 years ago

3.3.1

3 years ago

3.3.2

3 years ago

3.2.5

3 years ago

3.2.4

3 years ago

3.3.0

3 years ago

3.2.2

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.2.3

3 years ago

3.1.2

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

3.0.0

3 years ago

3.0.0-beta.1

3 years ago

2.0.17

4 years ago

2.0.15

4 years ago

2.0.16

4 years ago

2.0.14

4 years ago

2.0.13

4 years ago

2.0.12

4 years ago

2.0.11

4 years ago

2.0.10

5 years ago

2.0.9

5 years ago

2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.1-beta.1

6 years ago

2.0.0

6 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.6-beta.2

7 years ago

1.0.6-beta.1

7 years ago

1.0.5-beta.1

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.3-beta.1

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago