web-dev-qa-db-fra.com

Quelle est la différence entre Bézier cubique et Bézier quadratique et leurs cas d'utilisation?

J'ai récemment joué avec la toile et dessiné plusieurs formes (gouttes de larmes, pétales de fleurs, nuages, rochers) à l'aide des méthodes associées à ces courbes. Cela dit, je n'arrive pas à comprendre la différence entre les cas d'utilisation de ces différentes courbes.

Je sais que la couche de cubes cubique a 2 points de contrôle, un point de départ et un point d'extrémité où, comme la forme de Bézier quadratique, a un seul point de contrôle, un point de départ et un point d'extrémité. Cependant, lorsque je dessine des formes, je n'arrive pas à décider facilement lequel utiliser ou quand les utiliser en même temps.

Comment savoir quel type de courbe utiliser à différents moments du dessin d'une forme?

mathgraphicsbeziervector-graphicscurve
24
Conqueror

Comme vous l'avez découvert, les courbes quadratiques et les courbes de Bézier cubique ne font que relier deux points avec une courbe.

Étant donné que la courbe cubique a plus de points de contrôle, elle est plus flexible dans la trajectoire qu'il prend entre ces 2 points.

Par exemple, supposons que vous souhaitiez dessiner cette lettre «R»:

enter image description here

Commencez à dessiner avec les parties «non courbes» du R:

enter image description here

Maintenant, essayez de dessiner la courbe avec une courbe quadratique.

Notez que la courbe quadratique est plus "pointue" que ce que nous désirons.

C’est parce que nous n’avons qu’un seul point de contrôle pour définir la courbure quadratique.

enter image description here

Maintenant, essayez de dessiner la courbe avec une courbe de Bézier cubique.

La courbe de Bézier cubique est plus arrondie que la courbe quadratique.

C’est parce que nous avons 2 points de contrôle pour définir la courbure cubique.

enter image description here

Donc ... plus de points de contrôle donnent plus de contrôle sur la "courbure"

Voici le code et un violon: 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

Je comprends que ce post est plutôt en retard. Mais il semble que certains aspects importants concernant les courbes de Bézier cubiques et quadratiques manquent encore. Alors....

Avec la courbe de Bézier quadratique, vous ne pourrez jamais rendre les deux pentes d'extrémité parallèles. Mais vous pouvez y parvenir avec des courbes de Bézier cubiques. De plus, les courbes de Bézier cubiques vous permettent de contrôler individuellement les deux pentes d'extrémité, ce qui n'est pas possible non plus avec Bézier quadratique. Cependant, la courbe de Bézier quadratique n'aura jamais de points d'inflexion (le point auquel le signe de courbure change), alors que la courbe de Bézier cubique pourrait éventuellement comporter des points d'inflexion si vous ne faites pas attention aux points de contrôle. Donc, en résumé, la courbe de Bézier cubique est beaucoup plus populaire que la courbe de Bézier quadratique en raison de sa flexibilité. La courbe de Bézier quadratique (le plus souvent, les courbes de Bézier quadratiques rationnelles) sera utilisée lorsque la courbure monotone est importante.

12
fang

Je pense qu'il est également un peu difficile de transformer le premier segment d'un chemin en cube de Bézier si vous avez l'interface utilisateur de tracé de chemin habituelle pour l'utilisateur.

Les programmes de CAO dont le tracé est une fonctionnalité permettent généralement à l’utilisateur de dessiner le premier segment sous forme de courbe en le faisant cliquer et faire glisser au lieu de simplement cliquer.

Le clic et le glisser permettent à l'utilisateur de faire glisser le premier point de contrôle où il le souhaite et, en relâchant le clic, il permet à l'utilisateur de créer le premier segment sous forme de courbe.

Je ne pense pas qu'il soit possible de dessiner un cube de Bézier comme segment de départ, du moins je ne l'ai pas encore vu.

0
Nik Kyriakides