В чем разница между кубическим безье и квадратичным безьером и их вариантами использования?

Недавно я играл с холстом и рисовал несколько фигур (слезы, лепестки цветов, облака, камни), используя методы, связанные с этими кривыми. С учетом сказанного я не могу понять разницу между вариантами использования этих разных кривых.

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

Как узнать, какой тип кривой использовать в разных точках рисования фигуры?

Ответ 1

Как вы обнаружили, как квадратичные кривые, так и кривые Cubic Bezier просто соединяют 2 точки с кривой.

Поскольку кубическая кривая имеет больше контрольных точек, она более гибкая в пути, который требуется между этими двумя точками.

Например, скажем, вы хотите нарисовать эту букву "R":

Начните рисовать с помощью "неперекрывающихся" частей R:

Теперь попробуйте рисовать кривую квадратичной кривой.

Обратите внимание, что квадратичная кривая более "заостренная", чем мы хотим.

Это потому, что у нас есть только одна контрольная точка для определения квадратичной кривизны.

Теперь попробуйте рисовать кривую с кубической кривой безье.

Кубическая кривая Безье более хорошо округлена, чем квадратичная.

Это потому, что у нас есть 2 контрольных точки для определения кубической кривизны.

Итак... больше контрольных точек дает больший контроль над "извилистостью"

Вот код и скрипт: http://jsfiddle.net/m1erickson/JpXZW/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=8;
    ctx.lineCap="round";

    function baseR(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(30,200);
        ctx.lineTo(30,50);
        ctx.lineTo(65,50);
        ctx.moveTo(30,120);
        ctx.lineTo(65,120);
        ctx.lineTo(100,200);
        ctx.strokeStyle="black";
        ctx.stroke()
    }

    function quadR(){
        ctx.beginPath();
        ctx.moveTo(65,50);
        ctx.quadraticCurveTo(130,85,65,120);
        ctx.strokeStyle="red";
        ctx.stroke();
    }

    function cubicR(){
        ctx.beginPath();
        ctx.moveTo(65,50);
        ctx.bezierCurveTo(120,50,120,120,65,120);
        ctx.strokeStyle="red";
        ctx.stroke();
    }

    $("#quad").click(function(){
        baseR();
        quadR();
        //cubicR();
    });

    $("#cubic").click(function(){
        baseR();
        cubicR();
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="quad">Use Quadratic curve</button>
    <button id="cubic">Use Cubic Bezier curve</button><br><br>
    <canvas id="canvas" width=150 height=225></canvas>
</body>
</html>

Ответ 2

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

С квадратичной кривой Безье вы никогда не сможете параллельны двум концам склонов. Но вы можете добиться этого с помощью кубических кривых Безье. Кроме того, кубические кривые Безье позволяют вам управлять двумя концевыми склонами по отдельности, что невозможно и с квадратичным Безье. Однако квадратичная кривая Безье никогда не будет иметь точек перегиба (точка, в которой изменяется знак кривизны), в то время как кубическая кривая Безье может иметь точки перегиба, если вы не будете осторожны с контрольными точками. Итак, в сводке кубическая кривая Безье гораздо более популярна, чем квадратичная кривая Безье из-за ее гибкости. Квадратичная кривая Безье (чаще всего рациональные квадратичные кривые Безье) будет использоваться, когда важна монотонная кривизна.

Ответ 3

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

САПР-программы, которые имеют трассировку пути как функцию, обычно позволяют пользователю рисовать первый сегмент как кривую, когда пользователь нажимает & drag вместо простого нажатия.

Щелчок и перетаскивание позволяет пользователю перетащить первую контрольную точку, где он хочет, и отпустить клик, он позволяет пользователю создавать первый сегмент в виде кривой.

Невозможно нарисовать кубический безье в качестве начального сегмента, по крайней мере, я еще не видел его.