Las curvas de Bezier, son un tipo de curvas muy utilizadas en los programas de dibujo y gráficos ya que nos permiten con unos puntos en el plano generar curvas, gracias a esto con algunas fórmulas matemáticas podemos lograr curvas suaves o más exactas, lo que podemos utilizar para darle más detalle a nuestros gráficos.
En HTML5 tenemos la posibilidad de implementar las curvas de Bezier gracias a varios métodos, podemos incluir las curvas cuadráticas y las cúbicas, la limitante es que en el canvas no tenemos un apoyo visual de donde tenemos los puntos referenciales.
Métodos para generar las curvas
Como ya hemos explicado las curvas de Bezier se apoyan en algunos puntos para poder realizar el dibujo, para poder lograr la curva deseada debemos hacer muchos experimentos, sin embargo para poder experimentar debemos primero conocer el trasfondo, por lo que a continuación vamos a ver la información correspondiente con los métodos que nos permiten dibujar estas curvas:
bezierCurveTo(cx1, cy1, cx2, cy2,x, y): Dibuja una curva de Bezier del tipo cúbica donde se unen los puntos (x, y) utilizando los puntos de control (cx1, cy1) y (cx2, cy2).
quadraticCurveTo(cx, xy, x, y): Dibuja una curva de Bezier cuadrática a los puntos (x, y) con el punto de control (cx, cy).
Ya conocemos el aspecto técnico con el cual debemos trabajar, ahora vamos a ver un ejemplo en código.
En este ejemplo vamos a dibujar una curva de Bezier cúbica, donde vamos a tomar como partida el último sub-path y luego llevarlo a los puntos de los últimos dos argumentos que recibe el método, adicionalmente se incluye una funcionalidad que si presionamos la tecla shift o ctrl de nuestro teclado cambian los puntos de partida y llegada de la curva.
Una vez que tenemos el código veamos que nos genera en el navegador, acotamos que como contiene una sección dinámica los resultados pueden variar:
Si nos fijamos tenemos los cuatro puntos de control marcados por las líneas rojas que vemos en la captura de pantalla.
Con esto finalizamos este tutorial sobre las curvas de Bezier, la clave es la experimentación si queremos lograr efectos más complejos y apegados a lo que necesitamos.
En HTML5 tenemos la posibilidad de implementar las curvas de Bezier gracias a varios métodos, podemos incluir las curvas cuadráticas y las cúbicas, la limitante es que en el canvas no tenemos un apoyo visual de donde tenemos los puntos referenciales.
Métodos para generar las curvas
Como ya hemos explicado las curvas de Bezier se apoyan en algunos puntos para poder realizar el dibujo, para poder lograr la curva deseada debemos hacer muchos experimentos, sin embargo para poder experimentar debemos primero conocer el trasfondo, por lo que a continuación vamos a ver la información correspondiente con los métodos que nos permiten dibujar estas curvas:
bezierCurveTo(cx1, cy1, cx2, cy2,x, y): Dibuja una curva de Bezier del tipo cúbica donde se unen los puntos (x, y) utilizando los puntos de control (cx1, cy1) y (cx2, cy2).
quadraticCurveTo(cx, xy, x, y): Dibuja una curva de Bezier cuadrática a los puntos (x, y) con el punto de control (cx, cy).
Ya conocemos el aspecto técnico con el cual debemos trabajar, ahora vamos a ver un ejemplo en código.
En este ejemplo vamos a dibujar una curva de Bezier cúbica, donde vamos a tomar como partida el último sub-path y luego llevarlo a los puntos de los últimos dos argumentos que recibe el método, adicionalmente se incluye una funcionalidad que si presionamos la tecla shift o ctrl de nuestro teclado cambian los puntos de partida y llegada de la curva.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Su navegador no es compatible con el elemento <code>canvas</code>
</canvas>
<script>
var canvasElem = document.getElementById("canvas");
var ctx = canvasElem.getContext("2d");
var startPoint = [50, 100];
var endPoint = [400, 100];
var cp1 = [250, 50];
var cp2 = [350, 50];
canvasElem.onmousemove = function(e) {
if (e.shiftKey) {
cp1 = [e.clientX, e.clientY];
} else if (e.ctrlKey) {
cp2 = [e.clientX, e.clientY];
}
ctx.clearRect(0, 0, 500, 140);
draw();
}
draw();
function draw() {
ctx.lineWidth = 3;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(startPoint[0], startPoint[1]);
ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1],
endPoint[0], endPoint[1]);
ctx.stroke();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
var points = [startPoint, endPoint, cp1, cp2];
for (var i = 0; i < points.length; i++) {
drawPoint(points[i]);
}
drawLine(startPoint, cp1);
drawLine(endPoint, cp2);
}
function drawPoint(point) {
ctx.beginPath();
ctx.strokeRect(point[0] -2, point[1] -2, 4, 4);
}
function drawLine(from, to) {
ctx.beginPath();
ctx.moveTo(from[0], from[1]);
ctx.lineTo(to[0], to[1]);
ctx.stroke();
}
</script>
</body>
</html>
Una vez que tenemos el código veamos que nos genera en el navegador, acotamos que como contiene una sección dinámica los resultados pueden variar:
Si nos fijamos tenemos los cuatro puntos de control marcados por las líneas rojas que vemos en la captura de pantalla.
Con esto finalizamos este tutorial sobre las curvas de Bezier, la clave es la experimentación si queremos lograr efectos más complejos y apegados a lo que necesitamos.
