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());

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

Установка

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

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

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

</script>

Справочник 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 и командам квадратных Bézier-кривых SVG .

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

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

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

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

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

Рисует сегмент дуги окружности с заданным центром ⟨x, y⟩, radius, 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 и использует команды «lineto» SVG .

path.toString()

Возвращает строковое представление этого path в соответствии со спецификацией данных пути SVG .