d3-path

优质

小牛编辑

127浏览

2023-12-01

在 2D canvas 中绘图时可以使用如下代码:

function drawCircle(context, radius) {
  context.moveTo(radius, 0);
  context.arc(0, 0, radius, 0, 2 * Math.PI);
}

d3-path 模块可以将上述代码同时渲染到 SVG 中。通过将 CanvasPathMethods serializing(序列化) 为 SVG path data 实现。例如：

var context = d3.path();
drawCircle(context, 40);
pathElement.setAttribute("d", context.toString());

因此只需要写一次绘图逻辑就可以在 Canvas 和 SVG 中同时使用。可以参考 d3-shape 中的实际例子。

Installing

NPM 安装：npm install d3-path. 也可以下载 latest release. 此外还可以直接从 d3js.org 以 standalone library 或作为 D3 4.0 一部分直接载入. 支持 AMD, CommonJS 和最基本的标签引入，使用标签引入时会创建 d3 全局变量:

<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script>

var path = d3.path();
path.moveTo(1, 2);
path.lineTo(3, 4);
path.closePath();

</script>

在浏览器中测试 d3-path

API Reference

d3.path() <>

创建一个新的实现了 CanvasPathMethods 的路径序列化生成器。

path.moveTo(x, y) <>

移动到指定的点 ⟨x, y⟩。等价于 context.moveTo 和 SVG 的 “moveto” 命令。

path.closePath() <>

结束当前子路径并且自动将当前点和路径的初始点直接连接闭合。等价于 context.closePath 和 SVG 的 “closepath” 命令.

path.lineTo(x, y) <>

从当前点画一条直线连接到指定的点 ⟨x, y⟩。等价于 context.lineTo 和 SVG 的 “lineto” 命令.

path.quadraticCurveTo(cpx, cpy, x, y) <>

从当前点绘制一条二次 Bézier 曲线，终点为 ⟨x, y⟩，控制点为 ⟨cpx, cpy⟩。等价于 context.quadraticCurveTo 和 SVG 的 quadratic Bézier curve 命令.

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) <>

从当前点绘制一条控制点为 ⟨cpx1, cpy1⟩ 和 ⟨cpx2, cpy2⟩、终点为 ⟨x, y⟩ 的三次 Bézier 曲线。等价于 context.bezierCurveTo 和 SVG 的 cubic Bézier curve 命令.

path.arcTo(x1, y1, x2, y2, radius) <>

根据指定的 radius 绘制圆弧，这个圆弧和两条线相切，其中一条为当前点和 ⟨x1, y1⟩ 的连线，另一条为 ⟨x1, y1⟩ 和 ⟨x2, y2⟩ 的连线。如果第一个切点不等于当前点，则会在当前点和第一个切点之间连线。等价于 context.arcTo 和使用 SVG 的 elliptical arc curve 命令.

path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) <>

根据指定的中心 ⟨x, y⟩, radius, startAngle 和 endAngle 绘制一条弧线。如果 anticlockwise 为 true 则会以逆时针方向绘制；否则会以顺时针方向绘制。如果当前的点不等于圆弧的开始点则会从当前点连接一条直线到圆弧的开始点。等价于 context.arc 和使用 SVG 的 elliptical arc curve 命令.

path.rect(x, y, w, h) <>

创建一个四个顶点为 ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩ 的子路径, 然后闭合子路径。等价于 context.rect 和使用 SVG 的 “lineto” 命令.

path.toString() <>

返回当前 path 的序列化字符串，这个字符串符合 SVG 的 path data specficiation(path 路径规范).