Короткий ответ: вы не можете.
SVG только построил квадратичный (2-й порядок) и кубический кривые (3-й порядок), тогда как кривая, которую вы показываете, является четвертой (4-й порядок). У SVG нет общей инструкции рисования «N term Bezier», поэтому вам придется идти на компромисс здесь.
Некоторые опции:
- преобразующие кривую в (серии) кубических кривых и делают их вместо. Это довольно сложная проблема и не рекомендуется.
- образец вашей кривой в достаточном количестве точек, чтобы полигон через эти точки выглядел как кривая с разрешением и уровнем масштабирования, на которые люди будут смотреть. Это легко сделать, но, конечно, у вас больше нет «кривой», теперь у вас есть многоугольник.
- как указано выше, но меньше точек, а затем вычислить последовательность кривой Катмулла-Рома, которая проходит через эти точки, затем преобразует эти кривые CR в кубический Bezier (они являются одним и тем же типом функции и могут быть преобразованы в 1: 1 от одного к другому). Это лучше, чем 2, потому что у вас есть кривая, но она может не выглядеть довольно так же, как оригинал. Конечно, чем больше очков вы используете, тем лучше результат.
- используйте холст, чтобы нарисовать кривую Безье кривой Nth, постройте изображение из результата, используя функцию
toDataURL, а затем загрузите это изображение в качестве изображения в свой SVG. Это будет отлично работать, но если вы используете созданный стиль SVG-пути, создание холста с помощью одного и того же стиля может стать проблемой.
- этот список может быть очень длинным, так что давайте остановимся здесь на данный момент.
Итог: если вам нужно, чтобы показать более высокого порядка кривых Безье, SVG не является подходящей технологией для использования (я бы рекомендовал просто делать анимацию, используя холст, или еще лучше, что-то вроде d3.js или paper.js. Вероятно, последний).
И если вы в конечном итоге катаетесь самостоятельно, функция выборки смехотворно проста.Кривые являются параметрическими, управляется значением t, которая проходит от 0 до 1 (включительно), и может быть записана в виде вложенной линейной интерполяции:
getCurvePoint(t, points) {
if (points.length === 1) return points[0];
var newpoints = [];
for(var i=0,j=1; j<points.length; i++,j++) {
newpoints[i] = lerp2d(t, points[i], points[j]);
}
return getCurvePoint(t,newpoints);
}
с функцией lerp является стандартной линейной функцией интерполяции:
lerp(ratio, start, end) {
return ratio*start + (1-ratio)*end;
}
lerp2d(ratio, start, end) {
return {
x: lerp(ratio, start.x, end.x),
y: lerp(ratio, start.y, end.y)
};
}
И простой jsbin пример: http://jsbin.com/pesutibefu/edit?html,js,output с использованием точек
var points = [
{x:50, y:100},
{x:50, y:250},
{x:210, y:250},
{x:250, y:50},
{x:380, y:150}
];
дает нам:
Хотя эскиз Paper.js будет легче работать, если вам нужно анимированные симпатичными дорожки, с перемещаемыми контрольными точками и т.д.
Мне это нравится! Какую часть вы пытаетесь нарисовать? Вы хотите анимировать удар? –
@ChrisW. нет нет нет, изображение это просто для ясности. Мне нужно нарисовать статическую кривую с помощью контрольных точек. – Legotin
Хорошо, насколько вы знакомы с данными о пути? Вы определяете свою начальную точку с помощью атрибута 'M', а' C' определяет вашу начальную кривую с вашими точками, следующими за первой дугой, и 'Z' заканчивает все это. Вы можете сыграть с чем-то вроде [this] (http://blogs.sitepointstatic.com/examples/tech/svg-curves/cubic-curve.html), чтобы немного поучиться. Или, если это статично, я просто просто создаю эти объекты в Adobe Illustrator и экспортирую в SVG. Однако, не видя, что вы пробовали, или зная очки и т. Д., Этот вопрос действительно довольно широк. –