web-dev-qa-db-ja.com

3次ベジエと2次ベジエの違いとその使用例は何ですか？

私は最近キャンバスをいじって、これらの曲線に関連付けられたメソッドを使用していくつかの形状（ティアドロップ、花びら、雲、岩）を描きました。そうは言っても、これらの異なる曲線の使用例の違いを理解することはできないようです。

3次ベジエには2つの制御点、始点、および終点がありますが、2次ベジエには1つの制御点、始点、および終点があります。しかし、図形を描くとき、​​どれを使うか、いつ使うかを簡単に決めることができないようです。

シェイプを描くさまざまなポイントで使用するカーブのタイプを知るにはどうすればよいですか？

mathgraphicsbeziervector-graphicscurve
31
Conqueror

お気づきのように、2次曲線と3次ベジェ曲線はどちらも、2つのポイントを1つの曲線で結びます。

3次曲線の方が制御点が多いため、これらの2点間を通る経路はより柔軟です。

たとえば、次の文字「R」を描画するとします。

enter image description here

Rの「曲線ではない」部分で描画を開始します。

enter image description here

次に、2次曲線で曲線を描画してみます。

二次曲線は、私たちが望むものよりも「尖っています」ことに注意してください。

これは、2次曲線を定義するための制御点が1つしかないためです。

enter image description here

次に、3次ベジェ曲線を使用して曲線を描画してみます。

3次ベジエ曲線は2次曲線よりもうまく丸められます。

これは、3次曲線を定義する2つの制御点があるためです。

enter image description here

だから...より多くの制御点は、「曲率」をより制御します

ここにコードとフィドルがあります： 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>
59
markE

この投稿はかなり遅れていることを理解しています。しかし、2次および3次ベジェ曲線に関するいくつかの重要な側面がまだ欠けているようです。そう....

2次ベジェ曲線では、2つの端の勾配を平行にすることはできません。しかし、3次ベジェ曲線でそれを実現できます。さらに、3次ベジェ曲線を使用すると、2つの端の勾配を個別に制御できます。これは、2次ベジェでは不可能です。ただし、2次ベジェ曲線には変曲点（曲率の符号が変化する点）はありませんが、3次ベジェ曲線には制御点に注意しないと変曲点が含まれる可能性があります。したがって、要約すると、3次ベジェ曲線はその柔軟性のために2次ベジェ曲線よりもはるかに人気があります。単調な曲率が重要な場合は、2次ベジェ曲線（より多くの場合、有理2次ベジェ曲線）が使用されます。

14
fang

また、ユーザーに通常のパス描画UIを使用している場合、パスの最初のセグメントを3次ベジエにするのも難しいと思います。

パス描画機能を備えたCADプログラムでは、通常、ユーザーはクリックするだけでなくクリックしてドラッグすることで、最初のセグメントを曲線として描画できます。

クリックアンドドラッグにより、ユーザーは最初の制御点を必要な場所にドラッグでき、クリックを解除すると、最初のセグメントを曲線として作成できます。

立方体のベジエを開始セグメントとして描画することはできません。少なくとも、まだ見ていません。

0
Nik Kyriakides