d3-path

Предположим, у вас есть код, который рисует на 2D-холсте:

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

Модуль d3-path позволяет взять этот код и дополнительно отрисовать его в SVG. Он работает, сериализуя вызовы CanvasPathMethods в данные пути SVG. Например:

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

Теперь код, написанный один раз, может быть использован как с Canvas (для производительности), так и с SVG (для удобства). Пример практического использования см. в d3-shape.

Установка

Если вы используете NPM, npm install d3-path. В противном случае, скачайте последнюю версию. Вы также можете загрузить напрямую с d3js.org, как самостоятельную библиотеку, или как часть D3 4.0. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla среде экспортируется глобальная переменная 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

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 квадратичной кривой Bézier.

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) Источник

Рисует кубический Bézier-сегмент от текущей точки до указанной точки ⟨x, y⟩ с указанными контрольными точками ⟨cpx1, cpy1⟩ и ⟨cpx2, cpy2⟩. Эквивалентно context.bezierCurveTo и командам SVG кубической кривой Bézier.

path.arcTo(x1, y1, x2, y2, radius) Источник

Рисует сегмент дуги окружности с указанным радиусом, который начинается касательно линии между текущей точкой и указанной точкой ⟨x1, y1⟩ и заканчивается касательно линии между указанными точками ⟨x1, y1⟩ и ⟨x2, y2⟩. Если первая точка касания не совпадает с текущей точкой, рисуется прямая линия между текущей точкой и первой точкой касания. Эквивалентно context.arcTo и использует команды SVG эллиптической дуги.

path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) Источник

Рисует сегмент дуги окружности с указанным центром ⟨x, y⟩, радиусом, startAngle и endAngle. Если anticlockwise равно true, дуга рисуется против часовой стрелки; в противном случае — по часовой стрелке. Если текущая точка не совпадает с начальной точкой дуги, рисуется прямая линия от текущей точки до начала дуги. Эквивалентно context.arc и использует команды SVG эллиптической дуги.

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.