Cargando

Ir a contenido

X

 


HTML5 - Curvas de Bezier

En este tutorial veremos cómo construir las curvas de Bezier y contaremos con algunos ejemplos que nos ayuden a entender este tema.


Escrito por feb 23 2014 06:54


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.

<!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:

html5_curvasbezier.jpg


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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 23 2014 06:54
  •   Actualizado feb 25 2014 08:46
  •   Visitas 1.1K
  •   Nivel
    Profesional