Fatal编程技术网
  • math/
  • Math 三次贝塞尔和二次贝塞尔之间的区别及其使用情况是什么？

Math 三次贝塞尔和二次贝塞尔之间的区别及其使用情况是什么？

math graphics

Math 三次贝塞尔和二次贝塞尔之间的区别及其使用情况是什么？,math,graphics,bezier,vector-graphics,curve,Math,Graphics,Bezier,Vector Graphics,Curve,我最近一直在玩画布，并一直在使用与这些曲线相关的方法绘制一些形状（泪滴、花瓣、云、岩石）。尽管如此，我似乎无法找出这些不同曲线的用例之间的差异 我知道三次贝塞尔曲线有两个控制点，一个起点和一个终点，其中二次贝塞尔曲线有一个控制点，一个起点和一个终点。然而，在绘制形状时，我似乎无法轻松决定使用哪一个或何时将它们结合使用 如何知道在绘制形状的不同点上使用哪种类型的曲线？正如您所发现的，二次曲线和三次贝塞尔曲线都只将两个点与一条曲线连接起来 因为三次曲线有更多的控制点，所以它在这两个点之间的路径上更灵

我最近一直在玩画布，并一直在使用与这些曲线相关的方法绘制一些形状（泪滴、花瓣、云、岩石）。尽管如此，我似乎无法找出这些不同曲线的用例之间的差异

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

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

正如您所发现的，二次曲线和三次贝塞尔曲线都只将两个点与一条曲线连接起来

因为三次曲线有更多的控制点，所以它在这两个点之间的路径上更灵活

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

从R的“非曲线”部分开始绘图：

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

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

这是因为我们只有一个控制点来定义二次曲线

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

三次贝塞尔曲线比二次曲线更圆滑

这是因为我们有两个控制点来定义三次曲线

所以…更多的控制点可以更好地控制“曲线”

下面是代码和小提琴：


正文{背景色：象牙色；填充：20px；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.线宽=8；
ctx.lineCap=“圆形”；
函数baseR（）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（30200）；
ctx.lineTo（30,50）；
ctx.lineTo（65,50）；
ctx.moveTo（30120）；
ctx.lineTo（65120）；
ctx.lineTo（100200）；
ctx.strokeStyle=“黑色”；
ctx.stroke（）
}
函数quadR（）{
ctx.beginPath（）；
ctx.moveTo（65,50）；
ctx.二次曲线（130,85,65120）；
ctx.strokeStyle=“红色”；
ctx.stroke（）；
}
函数cubicR（）{
ctx.beginPath（）；
ctx.moveTo（65,50）；
ctx.bezierCurveTo（120,50120120,65120）；
ctx.strokeStyle=“红色”；
ctx.stroke（）；
}
$（“#quad”）。单击（函数（）{
baseR（）；
quadR（）；
//cubicR（）；
});
$（“#立方”）。单击（函数（）{
baseR（）；
cubicR（）；
});
}); // end$（函数（）{}）；
使用二次曲线
使用三次贝塞尔曲线
我知道这篇文章已经很晚了。但似乎二次和三次贝塞尔曲线的一些重要方面仍然缺失。所以

使用二次贝塞尔曲线，将永远无法使两个端点坡度平行。但是你可以用三次贝塞尔曲线来实现。此外，三次贝塞尔曲线允许您单独控制两个端点坡度，这在二次贝塞尔曲线中也是不可能的。但是，二次贝塞尔曲线永远不会有拐点（曲率符号改变的点），而三次贝塞尔曲线可能有拐点，如果您不小心控制点。总之，三次贝塞尔曲线比二次贝塞尔曲线更受欢迎，因为它的灵活性。当单调曲率很重要时，将使用二次贝塞尔曲线（通常为有理二次贝塞尔曲线）。

基本上，它与您希望曲线的外观有关。二次曲线是二次曲线。从函数的名称来看，这对我来说不是很明显
bezierCurveTo（）
被假定为三次曲线。我来这里是想找出
quadraticCurveTo（）
和
bezierCurveTo（）
：-）谢谢，接受了。如果三次曲线具有更大的灵活性，那么是否有任何理由使用二次曲线？二次曲线在数学上比贝塞尔曲线更简单，因此画布绘制效率更高。顺便说一句，如果绘制两个控制点相同的贝塞尔曲线，则为二次曲线。有时，这样考虑两条曲线会有所帮助。就设计而言，二次曲线的一个好处是，您可以基于所有点相互约束的事实，使用快捷方式对多边形贝塞尔曲线建模（这也是一个缺点，因为在二次多边形贝塞尔曲线中移动一个坐标将完全改变形状）。仅使用控制点反射在曲线点上的曲线意味着您只需要第一个控制点，加上所有曲线点，在编码曲线时为您节省大量空间（这就是TrueType字体对其轮廓建模的方式）@markE先生，您在上一条评论中所说的完全错误！具有相同控制点的三次贝塞尔不是二次贝塞尔！事实上，如果我们把二次贝塞尔变换成三次，我们会得到两个不同的句柄，坐标不同。也就是说，看看这个SVG示例：如果我们将两条相连的二次曲线与一条三次曲线进行比较会怎么样？他们不能达到同样的灵活性水平吗？你可以用两条相连的二次曲线来增加灵活性水平。但这也带来了复杂性增加的代价，因为你有两条曲线而不是一条。此外，必须确保这两条曲线始终以切线连续性连接。即使这样做，这两条曲线在连接处也可能存在曲率不连续。所以，三次曲线仍然是避免所有这些麻烦的更好选择。什么是单调曲率？ 
<!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>