# d3-path

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

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

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

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

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

# Installing

NPM 安装:npm install d3-path. 也可以下载 latest release (opens new window). 此外还可以直接从 d3js.org (opens new window)standalone library (opens new window) 或作为 D3 4.0 (opens new window) 一部分直接载入. 支持 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 (opens new window)

# API Reference

# d3.path() <> (opens new window)

创建一个新的实现了 CanvasPathMethods (opens new window) 的路径序列化生成器。

# path.moveTo(x, y) <> (opens new window)

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

# path.closePath() <> (opens new window)

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

# path.lineTo(x, y) <> (opens new window)

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

# path.quadraticCurveTo(cpx, cpy, x, y) <> (opens new window)

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

# path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) <> (opens new window)

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

# path.arcTo(x1, y1, x2, y2, radius) <> (opens new window)

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

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

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

# path.rect(x, y, w, h) <> (opens new window)

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

# path.toString() <> (opens new window)

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

最后更新: 2019/5/18 下午4:11:02