36

私は最近キャンバスをいじっており、これらの曲線に関連付けられた方法を使用して、いくつかの形状 (涙のしずく、花びら、雲、岩) を描いています。そうは言っても、これらの異なる曲線のユースケースの違いを理解できないようです。

3 次ベジェには 2 つの制御点、開始点、および終点があることを知っていますが、2 次ベジェには単一の制御点、開始点、および終点があります。しかし、図形を描くとき、​​どれを使うか、いつ組み合わせて使うか、簡単には決められないようです。

図形を描くさまざまなポイントで使用する曲線の種類を知るにはどうすればよいですか?

4

2 に答える 2

75

おわかりのように、2 次曲線と 3 次ベジエ曲線はどちらも 2 点を曲線で接続するだけです。

3 次曲線にはより多くの制御点があるため、それらの 2 点間のパスがより柔軟になります。

たとえば、この文字「R」を描きたいとしましょう。

ここに画像の説明を入力

R の「非曲線」部分から描画を開始します。

ここに画像の説明を入力

二次曲線で曲線を描いてみます。

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

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

ここに画像の説明を入力

次に、3 次ベジエ曲線で曲線を描いてみます。

3 次ベジエ曲線は、2 次曲線よりもきれいに丸められています。

これは、3 次曲線を定義する 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>
于 2013-09-15T17:35:21.463 に答える
16

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

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

于 2014-09-09T06:36:35.067 に答える