@antv/path-util

What is @antv/path-util?

@antv/path-util is a utility library for manipulating and analyzing SVG paths. It provides functions for parsing, transforming, and generating SVG path data, which is useful for various graphical and data visualization tasks.

What are @antv/path-util's main functionalities?

Parsing SVG Path Data

This feature allows you to parse an SVG path string into an array of path commands, making it easier to manipulate and analyze the path data.

const { parsePathString } = require('@antv/path-util');
const pathString = 'M10 10 H 90 V 90 H 10 Z';
const parsedPath = parsePathString(pathString);
console.log(parsedPath);

Transforming Path Data

This feature allows you to apply transformations like scaling, rotating, and translating to an SVG path string.

const { transformPath } = require('@antv/path-util');
const pathString = 'M10 10 H 90 V 90 H 10 Z';
const transform = 'scale(2)';
const transformedPath = transformPath(pathString, transform);
console.log(transformedPath);

Generating SVG Path Data

This feature allows you to convert an array of path commands back into an SVG path string, which can be used in SVG elements.

const { pathToString } = require('@antv/path-util');
const pathArray = [['M', 10, 10], ['H', 90], ['V', 90], ['H', 10], ['Z']];
const pathString = pathToString(pathArray);
console.log(pathString);

Other packages similar to @antv/path-util

svg-path-parser

svg-path-parser is a library for parsing and transforming SVG path data. It provides similar functionality to @antv/path-util, including parsing path strings into command arrays and applying transformations. However, it may not have as extensive a set of utilities as @antv/path-util.

svg-pathdata

svg-pathdata is another library for working with SVG path data. It offers parsing, transforming, and generating path data, similar to @antv/path-util. It also includes additional features like path normalization and simplification, which can be useful for more advanced path manipulations.

path-data-polyfill

path-data-polyfill is a polyfill for the SVGPathElement API, providing methods for parsing, transforming, and generating SVG path data. It aims to bring modern SVG path manipulation capabilities to older browsers, making it a good choice for projects that need to support a wide range of environments.

README

path-util

为 antv 开发的轻量级 path 处理的工具库。

安装下载

tnpm i --save @antv/util

// 所有的 api 是都这么引入，名字不同而已
import { parsePathString, path2Curve } from '@antv/path-util';

API 文档

• catmullRom2Bezier(arr, closed): 将点的数组转成曲线
• fillPath(source, target): 动画前填充path
• fillPathByDiff(source, target): 左右平移动画前的填充 path
• pathIntersection(path1, path2): 两条线的交点
• parsePathArray(arr) String ： 将数组转成字符串
• parsePathString(str)String[]: 将字符串转换成数组
• path2Curve(arr|str) String[]: 转曲
• path2Absolute(arr|str) String[]: 都转换成大写绝对路径的写法
• reactPath(x, y, w, h, r) String[]: 支持圆角的矩形

实例

TODO 完善上述各个方法的使用实例。