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 и команде «moveto» SVG .

path.closePath() Исходный код

Завершает текущую подпуть и вызывает автоматическое построение прямой линии от текущей точки до начальной точки текущей подпути. Эквивалентно context.closePath и команде «closepath» SVG .

path.lineTo(x, y) Исходный код

Рисует прямую линию от текущей точки до указанной точки ⟨x, y⟩. Эквивалентно context.lineTo и команде «lineto» SVG .

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 .