Рисование эллипсов с квадратичными кривыми Безье и кубическими кривыми Безье

Я создаю модуль JavaScript, чтобы добавить удобные функции к элементу холста HTML5. Я пытаюсь дать как можно больше различных реализаций для заполнения моего модуля. Чтобы увидеть мой прогресс, посетите мою страницу проекта и мою страница примеров.

У меня есть метод рисования эллипса, в котором используются кубические кривые Безье. Я знаю, что квадратичные кривые Безье можно преобразовать в кубические кривые Безье, но у меня есть несколько вопросов:

  • Есть ли разница в допуске на ошибку при приближении круга? Эллипс?
  • Есть ли причина иметь обе реализации? (производительность, точность и т. д.)
  • Мне не хватает других методов рисования эллипсов?

P.S. Это напрямую не связано, но есть ли другие функции, которые хотелось бы иметь в таком модуле?

Примечание. Это не домашнее задание.

РЕДАКТИРОВАТЬ: Вот мой код для эллипса (xDis - это радиус по x, yDis - это радиус по y):

function ellipse(x, y, xDis, yDis) {
    var kappa = 0.5522848, // 4 * ((√(2) - 1) / 3)
        ox = xDis * kappa,  // control point offset horizontal
        oy = yDis * kappa,  // control point offset vertical
        xe = x + xDis,      // x-end
        ye = y + yDis;      // y-end

    this.moveTo(x - xDis, y);
    this.bezierCurveTo(x - xDis, y - oy, x - ox, y - yDis, x, y - yDis);
    this.bezierCurveTo(x + ox, y - yDis, xe, y - oy, xe, y);
    this.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye);
    this.bezierCurveTo(x - ox, ye, x - xDis, y + oy, x - xDis, y);
}

Связанные вопросы:

Преобразовать квадратичную кривую Безье в кубическую?

https://stackoverflow.com/questions/2688808/drawing-quadratic-bezier-circles-with-a-given-radius-how-to-determine-control-po


javascript html bezier
person beatgammit    schedule 06.04.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Кубическая кривая Безье имеет еще две степеней свободы, чем квадратичная. Таким образом, это может еще больше уменьшить ошибку. Хотя математика для выбора контрольных точек усложняется с увеличением степени кривой, кубическая кривая должна быть достаточно простой.

Разница в производительности не большая. Еще несколько умножений и сложений.

Хотя это может быть достигнуто путем поворота плоскости, было бы неплохо указать оси эллипса. Центр и две оси образуют эллипс center + cos(t)*axis1 + sin(t)*axis2.

Еще одной особенностью библиотеки могут быть различные виды полиномиальных кривых и сплайнов. B-сплайн похож на кривую Безье. , но можно продолжить по нескольким контрольным точкам.

person Markus Jarderot    schedule 06.04.2011
comment
+1 За предложение B-сплайна. Думаю, я уже делаю то, что ты сказал. На всякий случай выложу сюда свой код. - person beatgammit; 06.04.2011

arrow_upward
0
arrow_downward

Если это ванильный эллипс, не было бы проще построить стандартную параметрическую форму эллипса и преобразовать результат в преобразование вращения, если он имеет неканоническую ориентацию?

person R Hill    schedule 06.04.2011
comment
В основном это то, что я делаю сейчас, но я использую кубическую кривую вместо квадратичной. Проверьте здесь. Это API Я использую. - person beatgammit; 06.04.2011