Как наилучшим образом приблизить геометрическую дугу кривой Безье?

При рисовании дуги в 2D, используя приближение кривой Безье, как вычислить две контрольные точки, учитывая, что у вас есть центральная точка круга, начальный и конечный угол и радиус?

Ответ 1

Это нелегко объяснить в сообщении StackOverflow, тем более, что, доказывая это, вы будете включать в себя ряд подробных шагов. Однако то, что вы описываете, является распространенным вопросом, и есть ряд подробных объяснений. См. здесь и здесь; Я очень люблю # 2 и использовал его раньше.

Ответ 2

Там код Mathematica на Wolfram MathWorld: Безье-кривая приближения дуги, которая должна вас начать.

См. также:

Ответ 3

У Raphael 2.1.0 есть поддержка Arc- > Cubic (path2curve-function), и после исправления ошибки в нормализации пути S и T, похоже, теперь это работает. Я обновил * генератор случайных траекторий *, чтобы он генерировал только дуги, поэтому он легко тестирует все возможные комбинации путей:

http://jsbin.com/oqojan/53/

Протестируйте, и если какой-то путь завершится неудачно, я буду рад получить отчет.

EDIT: Просто понял, что это 3-летняя нить...

Ответ 4

Хорошее объяснение приводится в "Приближении a" Кубическая кривая Безье круговыми дугами"

Короче говоря: используя кривые Безье, вы можете достичь минимальной ошибки 1,96 × 10 ^ -4, что довольно хорошо для большинства приложений.

Для положительной квадрантной дуги используйте следующие пункты:

p0 = [0, radius]

p1 = [radius * K, radius]  

p2 = [radius, radius * K]

p3 = [radius, 0]

где K - так называемое "магическое число", которое является нерациональным числом. Его можно аппроксимировать следующим образом:

K = 0.5522847498

Ответ 5

Это 8-летний вопрос, но с которым я недавно боролся, поэтому я решил поделиться тем, с чем я столкнулся. Я потратил много времени, пытаясь использовать решение (9) из этот текст и не мог получить никаких разумных чисел из этого, пока не сделал некоторые из Google и узнали, что, по-видимому, в уравнениях были некоторые опечатки. По исправлениям, перечисленным в этом сообщении в блоге, учитывая начальную и конечную точки дуги ([x1, y1] и [x4, y4], и центр круга ([xc, yc]), можно получить контрольные точки для кубической кривой безье ([x2, y2] и [x3, y3]) следующим образом:

ax = x1 – xc
ay = y1 – yc
bx = x4 – xc
by = y4 – yc
q1 = ax * ax + ay * ay
q2 = q1 + ax * bx + ay * by
k2 = 4/3 * (√(2 * q1 * q2) – q2) / (ax * by – ay * bx)


x2 = xc + ax – k2 * ay
y2 = yc + ay + k2 * ax
x3 = xc + bx + k2 * by                                 
y3 = yc + by – k2 * bx

Надеюсь, это поможет кому-то, кроме меня!

Ответ 6

У меня был успех с этим общим решением для любой эллиптической дуги в виде кубической кривой Безье. Он даже включает начальный и конечный углы в формулировке, поэтому нет необходимости в дополнительном вращении (что было бы проблемой для некругового эллипса).

Ответ 7

Я отвечаю на этот старый вопрос (который должен принадлежать математике, поэтому писать формулы будет ужасно) с некоторыми демонстрациями.

Предположим, что P0 и P3 - ваша начальная и конечная точка вашей дуги, P1 и P2 - контрольные точки кривой Безье, а x - мера угла, деленная на два. Предположим, что x меньше, чем pi/2.

Пусть PM - средняя точка отрезка P0P3 и PH - средняя точка дуги. Чтобы приблизить дугу, мы хотим, чтобы кривая Безье начиналась в P0, проходила через PH, заканчивалась на P3 и касалась дуги в P0 и P3.

(Нажмите "Выполнить фрагмент кода", чтобы показать рисунок. Curses to imgur все еще не поддерживает SVG.)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 20 80 80">
    <style>text{font-size:40%;font-style:italic;text-anchor:middle}tspan{font-size:50%;font-style:normal}</style>
    <rect x="10" y="20" width="80" height="80" fill="none" stroke="gray"></rect>
    <path stroke="gray" stroke-dasharray="3,2" fill="none" d="M25,30 62.6,31.62 80,65 22.19,95.13 25,30 80,65 M22.19,95.13 62.6,31.62"></path>
    <path stroke="black" fill="none" d="M25,30A65.19 65.19 0 0 1 80,65"></path>
    <circle r="1" fill="red" cx="25" cy="30"></circle>
    <circle r="1" fill="green" cx="80" cy="65"></circle>
    <circle r="1" fill="magenta" cx="22.19" cy="95.13"></circle>
    <circle r="1" fill="darkgreen" cx="52.5" cy="47.5"></circle>
    <circle r="1" fill="yellow" cx="57.19" cy="40.13"></circle>
    <circle r="1" fill="maroon" cx="62.6" cy="31.62"></circle>
    <circle r="1" fill="orange" cx="48.27" cy="31"></circle>
    <circle r="1" fill="teal" cx="69.24" cy="44.35"></circle>
    <text x="25" y="28">P<tspan>0</tspan></text>
    <text x="48.27" y="29">P<tspan>1</tspan></text>
    <text x="71.24" y="42.35">P<tspan>2</tspan></text>
    <text x="83" y="63">P<tspan>3</tspan></text>
    <text x="62.6" y="29.62">P<tspan>E</tspan></text>
    <text x="59.19" y="47.13">P<tspan>H</tspan></text>
    <text x="54.5" y="54.5">P<tspan>M</tspan></text>
</svg>

Ответ 8

Я недавно наткнулся на эту проблему. Я собрал решение из статей, упомянутых здесь в форме модуля.

Он принимает начальный угол, угол конца, центр и радиус в качестве входа.

Он довольно хорошо аппроксимирует малые дуги (< = PI/2). Если вам нужно приблизить что-то дуги от PI/2 до 2 * PI, вы всегда можете сломать их в частях < PI/2, вычислить соответствующие кривые и присоединиться к ним позже.

Это решение является агностиком начального и конечного углов - оно всегда выбирает второстепенную дугу.

В результате вы получаете все четыре точки, которые вам нужны, чтобы определить кубическую кривую безье в абсолютных координатах.

Я думаю, что это лучше всего объяснить в коде и комментариях:

'use strict';

module.exports = function (angleStart, angleEnd, center, radius) {
    // assuming angleStart and angleEnd are in degrees
    const angleStartRadians = angleStart * Math.PI / 180;
    const angleEndRadians = angleEnd * Math.PI / 180;

    // Finding the coordinates of the control points in a simplified case where the center of the circle is at [0,0]
    const relControlPoints = getRelativeControlPoints(angleStartRadians, angleEndRadians, radius);

    return {
        pointStart: getPointAtAngle(angleStartRadians, center, radius),
        pointEnd: getPointAtAngle(angleEndRadians, center, radius),
        // To get the absolute control point coordinates we just translate by the center coordinates
        controlPoint1: {
            x: center.x + relControlPoints[0].x,
            y: center.y + relControlPoints[0].y
        },
        controlPoint2: {
            x: center.x + relControlPoints[1].x,
            y: center.y + relControlPoints[1].y
        }
    };
};

function getRelativeControlPoints(angleStart, angleEnd, radius) {
    // factor is the commonly reffered parameter K in the articles about arc to cubic bezier approximation 
    const factor = getApproximationFactor(angleStart, angleEnd);

    // Distance from [0, 0] to each of the control points. Basically this is the hypotenuse of the triangle [0,0], a control point and the projection of the point on Ox
    const distToCtrPoint = Math.sqrt(radius * radius * (1 + factor * factor));
    // Angle between the hypotenuse and Ox for control point 1.
    const angle1 = angleStart + Math.atan(factor);
    // Angle between the hypotenuse and Ox for control point 2.
    const angle2 = angleEnd - Math.atan(factor);

    return [
        {
            x: Math.cos(angle1) * distToCtrPoint,
            y: Math.sin(angle1) * distToCtrPoint
        },
        {
            x: Math.cos(angle2) * distToCtrPoint,
            y: Math.sin(angle2) * distToCtrPoint
        }
    ];
}

function getPointAtAngle(angle, center, radius) {
    return {
        x: center.x + radius * Math.cos(angle),
        y: center.y + radius * Math.sin(angle)
    };
}

// Calculating K as done in https://pomax.github.io/bezierinfo/#circles_cubic
function getApproximationFactor(angleStart, angleEnd) {
    let arc = angleEnd - angleStart;

    // Always choose the smaller arc
    if (Math.abs(arc) > Math.PI) {
        arc -= Math.PI * 2;
        arc %= Math.PI * 2;
    }
    return (4 / 3) * Math.tan(arc / 4);
}