math - una - lucid software
¿Cuál es la diferencia entre bezier cúbico y bezier cuadrático y sus casos de uso? (3)
Como ha descubierto, tanto las curvas cuadráticas como las curvas de Bezier cúbico simplemente conectan 2 puntos con una curva.
Como la curva cúbica tiene más puntos de control, es más flexible en la trayectoria que toma entre esos 2 puntos.
Por ejemplo, digamos que quiere dibujar esta letra "R":
Comience a dibujar con las partes "no curvadas" de la R:
Ahora intenta dibujar la curva con una curva cuadrática.
Note que la curva cuadrática es más "puntiaguda" de lo que deseamos.
Eso es porque solo tenemos 1 punto de control para definir la curvatura cuadrática.
Ahora intente dibujar la curva con una curva bezier cúbica.
La curva bezier cúbica está más bien redondeada que la curva cuadrática.
Eso es porque tenemos 2 puntos de control para definir la curvatura cúbica.
Entonces ... más puntos de control dan más control sobre la "curvatura"
Aquí está el código y un Fiddle: 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>
He estado jugando con el lienzo recientemente y he estado dibujando varias formas (gotas de lágrima, pétalos de flores, nubes, rocas) utilizando métodos asociados con estas curvas. Dicho esto, parece que no puedo entender la diferencia entre los casos de uso de estas curvas diferentes.
Sé que el bezier cúbico tiene 2 puntos de control, un punto de inicio y un punto final donde el bezier cuadrático tiene un solo punto de control, un punto de inicio y un punto final. Sin embargo, al dibujar formas, parece que no puedo decidir fácilmente cuál usar o cuándo usarlas en conjunto.
¿Cómo puedo saber qué tipo de curva usar en diferentes puntos de dibujo de una forma?
Creo que también es un poco difícil hacer que el primer segmento de una ruta sea más cúbico si tienes la IU de dibujo de ruta habitual para el usuario.
Los programas CAD que tienen el trazado de trazado como una característica, generalmente permiten al usuario dibujar el primer segmento como una curva haciendo que el usuario haga clic y arrastre en lugar de simplemente hacer clic.
Al hacer clic y arrastrar, el usuario puede arrastrar el primer punto de control al lugar que desea y al soltar el clic, le permite al usuario crear el primer segmento como una curva.
No es posible dibujar un bezier cúbico como segmento de inicio, al menos no lo he visto todavía.
Entiendo que este post es bastante tarde. Pero parece que todavía faltan algunos aspectos importantes sobre las curvas Bezier cuadráticas y cúbicas. Asi que....
Con la curva de Bezier cuadrática, nunca podrá hacer que las dos pendientes finales sean paralelas. Pero eso se puede lograr con curvas Bezier cúbicas. Además, las curvas de Bezier cúbicas le permiten controlar las dos pendientes finales de forma individual, lo que tampoco es posible con Bezier cuadrático. Sin embargo, la curva de Bezier cuadrática nunca tendrá puntos de inflexión (el punto en el que cambia el signo de curvatura), mientras que la curva de Bezier cúbica podría tener puntos de inflexión si no tiene cuidado con los puntos de control. Entonces, en resumen, la curva de Bezier cúbica es mucho más popular que la curva de Bezier cuadrática debido a su flexibilidad. La curva de Bezier cuadrática (más a menudo, las curvas de Bezier cuadráticas racionales) se utilizará cuando la curvatura monotónica sea importante.