webentwicklung-frage-antwort-db.com.de

Was ist der Unterschied zwischen kubischem und quadratischem Bezier und ihren Anwendungsfällen?

Ich habe in letzter Zeit mit Leinwand gespielt und verschiedene Formen (Tropfen, Blütenblätter, Wolken, Steine) mit Methoden gezeichnet, die mit diesen Kurven verbunden sind. Trotzdem kann ich den Unterschied zwischen den Anwendungsfällen dieser verschiedenen Kurven nicht herausfinden.

Ich weiß, dass der kubische Bezier zwei Kontrollpunkte hat, einen Startpunkt und einen Endpunkt, wobei der quadratische Bezier einen einzelnen Kontrollpunkt, einen Startpunkt und einen Endpunkt hat. Wenn ich jedoch Formen zeichne, kann ich nicht leicht entscheiden, welche oder wann ich sie zusammen verwenden soll.

Woher weiß ich, welcher Kurventyp an verschiedenen Punkten zum Zeichnen einer Form verwendet werden soll?

24
Conqueror

Wie Sie festgestellt haben, verbinden sowohl quadratische Kurven als auch kubische Bezier-Kurven nur zwei Punkte mit einer Kurve.

Da die kubische Kurve über mehr Kontrollpunkte verfügt, ist der Pfad zwischen diesen beiden Punkten flexibler.

Angenommen, Sie möchten den folgenden Buchstaben "R" zeichnen:

enter image description here

Beginnen Sie mit dem Zeichnen mit den nicht gekrümmten Teilen des R:

enter image description here

Zeichnen Sie nun die Kurve mit einer quadratischen Kurve.

Beachten Sie, dass die quadratische Kurve „spitzer“ ist als wir es uns wünschen.

Das liegt daran, dass wir nur einen Kontrollpunkt haben, um die quadratische Kurve zu definieren.

enter image description here

Zeichnen Sie nun die Kurve mit einer kubischen Bezierkurve.

Die kubische Bézier-Kurve ist schöner gerundet als die quadratische Kurve.

Das liegt daran, dass wir 2 Kontrollpunkte haben, um die kubische Kurvenform zu definieren.

enter image description here

Also ... mehr Kontrollpunkte geben mehr Kontrolle über "Curviness"

Hier ist Code und eine Geige: 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>
56
markE

Ich verstehe, dass dieser Beitrag ziemlich spät ist. Es scheint jedoch, dass einige wichtige Aspekte der quadratischen und kubischen Bezier-Kurven noch fehlen. So....

Mit der quadratischen Bézier-Kurve können Sie die beiden Endsteigungen niemals parallel machen. Das kann man aber mit kubischen Bezierkurven erreichen. Darüber hinaus können Sie mit kubischen Bezier-Kurven die beiden Endsteigungen einzeln steuern, was auch mit quadratischem Bezier nicht möglich ist. Eine quadratische Bézier-Kurve weist jedoch niemals Wendepunkte auf (der Punkt, an dem sich das Krümmungszeichen ändert), während eine kubische Bézier-Kurve möglicherweise Wendepunkte aufweisen kann, wenn Sie die Kontrollpunkte nicht beachten. Zusammenfassend ist die kubische Bézier-Kurve aufgrund ihrer Flexibilität viel beliebter als die quadratische Bézier-Kurve. Quadratische Bézierkurve (häufiger rationale quadratische Bézierkurven) wird verwendet, wenn die monotone Krümmung wichtig ist.

12
fang

Ich denke, es ist auch schwierig, das erste Segment eines Pfads zu einem kubischen Bezier zu machen, wenn Sie die übliche Benutzeroberfläche zum Zeichnen von Pfaden für den Benutzer haben.

CAD-Programme, die das Zeichnen von Pfaden als Feature verwenden, ermöglichen es dem Benutzer normalerweise, das erste Segment als Kurve zu zeichnen, indem der Benutzer nicht nur klickt, sondern klickt und zieht.

Durch Klicken und Ziehen kann der Benutzer den ersten Kontrollpunkt an die gewünschte Stelle ziehen und beim Loslassen des Klicks das erste Segment als Kurve erstellen.

Ich kann keinen kubischen Bezier als Startsegment zeichnen, zumindest habe ich ihn noch nicht gesehen.

0
Nik Kyriakides