Question

我最近一直在玩帆布，并使用与这些曲线相关的方法绘制了几种形状（泪滴，花瓣，云，岩石）。话虽如此，我似乎无法弄清楚这些不同曲线的用例之间的区别。

我知道三次贝塞尔曲线有2个控制点，一个起点和一个端点，其中二次贝塞尔曲线有一个控制点，一个起点和一个终点。但是，在绘制形状时，我似乎无法轻易决定使用哪一个或何时结合使用它们。

如何知道在不同的绘制形状点使用哪种曲线？

Answer 1

正如您所发现的，二次曲线和Cubic Bezier曲线都只是用曲线连接两个点。

由于立方曲线具有更多控制点，因此在这两个点之间的路径中更灵活。

例如，假设您要绘制此字母“R”：

enter image description here

使用R：

的“非curvey”部分开始绘图

enter image description here

现在尝试使用二次曲线绘制曲线。

请注意，二次曲线比我们想要的更“尖”。

那是因为我们只有1个控制点来定义二次曲线。

enter image description here

现在尝试使用三次贝塞尔曲线绘制曲线。

三次贝塞尔曲线比二次曲线更圆整。

那是因为我们有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>

Answer 2

我理解这篇文章已经很晚了。但似乎关于二次和三次贝塞尔曲线的一些重要方面仍然缺失。所以....

使用二次贝塞尔曲线，您将永远无法使两个末端斜率平行。但是你可以用三次贝塞尔曲线实现这一点。此外，三次贝塞尔曲线允许您单独控制两个端部斜率，这对于二次贝塞尔曲线也是不可能的。然而，二次贝塞尔曲线永远不会有拐点（曲率符号变化的点），而如果你不小心控制点，则三次贝塞尔曲线可能有拐点。因此，总的来说，由于其灵活性，三次贝塞尔曲线比二次贝塞尔曲线更受欢迎。当单调曲率很重要时，将使用二次贝塞尔曲线（更常见的是有理二次贝塞尔曲线）。

Answer 3

如果您拥有用户通常的路径绘制UI，我认为将路径的第一段设置为立方贝塞尔也很困难。

将路径绘制作为特征的CAD程序通常允许用户通过让用户单击并拖动而不是单击来将第一个分段绘制为曲线。

点击和拖动允许用户将第一个控制点拖动到他想要的位置，并在释放点击时，允许用户将第一个段创建为曲线。

我不是可以画一个立方贝塞尔作为起始段，至少我还没有看到它。

三次贝塞尔曲线和二次贝塞尔曲线及其用例有什么区别？

3 个答案: