Rectángulos con esquinas redondeadas en canvas, interactivo con Mootools

Vamos a mostrar un nuevo ejemplo de dibujo de caminos en canvas un poco más avanzado. Crearemos una página con un canvas que tendrá un rectángulo con esquinas redondeadas y una interfaz de usuario para que se pueda configurar el radio del redondeado de las esquinas.

Es un ejemplo un poco avanzado porque mezclamos varias tecnologías, pues no sólo tenemos que pintar en el canvas, sino también responder a acciones del usuario para alterar el dibujo.

Por un lado tenemos que saber hacer dibujos en canvas con curvas cuadráticas. De hecho, este ejemplo de trabajo en canvas del HTML 5 nos ayudará a observar un poco más la utilidad de las curvas cuadráticas.

Para que el usuario pueda definir el radio de las curvas en las esquinas del rectángulo vamos a colocar una interfaz de tipo "slider" creada con el framework Javascript Mootools, que permite cambiar el valor del radio arrastrando un control. Además habrá un campo de texto para cambiar este radio escribiendo cualquier otro valor directamente.

Para saber mejor qué es lo que vamos a crear, recomendamos echar un vistazo a la página del ejemplo.

Función para crear un rectángulo con esquinas redondeadas en canvas

En las páginas de ayuda para trabajar con caminos del canvas de Mozilla hay un código de una función para hacer rectángulos con esquinas redondeadas que vamos a utilizar para este ejemplo.

function roundedRect(ctx,x,y,width,height,radius){
   ctx.beginPath();
   ctx.moveTo(x,y+radius);
   ctx.lineTo(x,y+height-radius);
   ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
   ctx.lineTo(x+width-radius,y+height);
   ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
   ctx.lineTo(x+width,y+radius);
   ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
   ctx.lineTo(x+radius,y);
   ctx.quadraticCurveTo(x,y,x,y+radius);
   ctx.stroke();
}

Simplemente hace un rectángulo en la posición x,y con anchura y altura dadas por medio de los parámetros width y height y un último parámetro radius para especificar el radio de la curvatura en la esquina redondeadas.

Ahora podríamos hacer un rectángulo redondeado con la siguiente llamada:

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   roundedRect(ctx, 10, 10, 130, 110, 20);      
}

Javascript para cambiar el radio de las esquinas redondeadas

Ahora veamos el código Javascript para alterar el radio de las esquinas como respuesta a eventos del usuario. Primero observemos esta función Javascript, que recibe un valor radio y sirve para actualizar el rectángulo del canvas:

function actualizaRadioRectangulo(radio){
   radio = parseInt(radio)
   if (isNaN(radio)) {
      radio = 0;
   }
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      ctx.clearRect(0,0,150,150);
      roundedRect(ctx, 10, 10, 130, 110, radio);
   }
}

Ahora podemos ver el campo de texto para cambiar el radio de las esquinas manualmente, escribiendo cualquier otro valor dentro del mismo.

Radio: <input type="text" name="radio" value="10" onkeyup="actualizaRadioRectangulo(this.value)">

Como se puede ver, tiene definido un evento para actualizar el radio del rectángulo cuando el usuario pulsa una tecla en el campo de texto.

Código Mootools para el componente slider

Hasta el momento no se había utilizado para nada Mootools, es decir, todo lo que hemos visto es Javascript normal. Para lo que necesitamos el framework Javascript es para el componente slider, que es una interfaz de usuario para cambiar valores al mover una barra que se desplaza a izquierda o derecha.

Ese componente slider está en la distribución Mootools que se llama "more" y tenemos que descargarla por separado en la propia página de descarga de Mootools, accediendo mediante el enlace que pone "More Builder". Allí tenemos que seleccionar por lo menos el componente "Slider" y los paquetes requeridos se seleccionarán automáticamente.

Así pues, para la parte del slider tenemos que incluir los scrips "Core" y "More"

<script src="mootools-1.2.4-core-yc.js" type="text/javascript"></script>
<script src="mootools-1.2.4.2-more.js" type="text/javascript"></script>

Luego podríamos tener un HTML como este para producir el contenedor del slider:

<div id="slidercontenedor" style="width:220px; padding: 5px 0px; background-color:#eeeeee;">
   <div id="slidercontrol" style="width:10px; height: 10px; background-color:#9999dd;"></div>
</div>
<div>Valor: <span id="valor">20</span></div>

Ahora podemos ver el script Mootols para generar dinámicamente el componente a partir de estos elementos HTML.

window.addEvent("domready", function(){
   var miSlider = new Slider("slidercontenedor", "slidercontrol",{
      'range': [0,55],
      'steps': 55,
      'initialStep': 20,
      onChange: function(lugar){
         actualizaRadioRectangulo(lugar);
         $("valor").set("html", lugar);
      }
   });
});

Código completo del ejercicio

Para acabar este ejercicio nos quedan algunas cosas que no hemos comentado sobre el elemento canvas del HTML 5, porque se habían visto anteriormente en repetidos artículos del Manual de Canvas, como la función cargaContextoCanvas()

De todos modos, para referencia podemos ver a continuación el código completo de este creador dinámico e interactivo de rectángulos redondeados.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script src="mootools-1.2.4-core-yc.js" type="text/javascript"></script>
<script src="mootools-1.2.4.2-more.js" type="text/javascript"></script>
   <title>Curvas cuadráticas</title>
<script>
//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}

//Crea un rectángulo con las esquinas rendondeadas
function roundedRect(ctx,x,y,width,height,radius){
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.stroke();
}

function actualizaRadioRectangulo(radio){
   radio = parseInt(radio)
   if (isNaN(radio)) {
      radio = 0;
   }
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      ctx.clearRect(0,0,150,150);
      roundedRect(ctx, 10, 10, 130, 110, radio);
   }
}

window.onload = function(){
   //Recibimos el elemento canvas
   var ctx = cargaContextoCanvas('micanvas');
   
   if(ctx){
      roundedRect(ctx, 10, 10, 130, 110, 20);      
   }
}
</script>
<script>
window.addEvent("domready", function(){
   var miSlider = new Slider("slidercontenedor", "slidercontrol",{
      'range': [0,55],
      'steps': 55,
      'initialStep': 20,
      onChange: function(lugar){
         actualizaRadioRectangulo(lugar);
         $("valor").set("html", lugar);
      }
   });
});
</script>
</head>

<body>

<canvas id="micanvas" width="150" height="150">
Recicla tu navegador!!
</canvas>
<form name="fradio">
Radio: <input type="text" name="radio" value="10" onkeyup="actualizaRadioRectangulo(this.value)">
</form>
<br><br>
Arrastra el cuadradito azul para cambiar el radio del borde redondeado:
<div id="slidercontenedor" style="width:220px; padding: 5px 0px; background-color:#eeeeee;">
   <div id="slidercontrol" style="width:10px; height: 10px; background-color:#9999dd;"></div>
</div>
<div>Valor: <span id="valor">20</span></div>
</p>
</body>
</html>

Finalizamos con el enlace a la página donde está el ejemplo en marcha.