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

  • Por
Vemos las curvas cuadráticas a través de un ejemplo interactivo de trabajo con caminos en canvas del HTML 5 que dibuja rectángulos con esquinas redondeadas.

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.

Nota: Recordemos que el "More" de Mootools son una serie de scripts para crear interfaces de usuario avanzadas. Se descarga por separado del "Core", que es el framework fundamental. Por supuesto, para poder implementar los componentes del "More" se necesita tener disponible el "Core". En principio dicen en la página de Mootools que para ejecutar cualquier componente del "More" es necesario haber descargado el "Core" completo.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

gus4no

30/7/2010
sugerencia
muy buena guia , pero quiza como recomendacion , ya que estamos tratando con html5 seria bueno utilizar controles nuevos , en lugar de utilizar mootools , por ejemplo se puede usar el nuevo tipo de input (range) y actualizar el valor del radio en un onchange que ejecute la funcion sobre el range , yo lo hize de esa manera y funciona bien , de igual forma cualquier opcion es buena!

carlos_sanz-635579

31/8/2010
Pasar de 100
Muy buen artículo. ¿Habéis probado a pasar de 100 en el campo de edición? fantástico.

midesweb

17/1/2011
tu opción en HTML5
Hola gus4no,

Podrías enviar tu propuesta de código ¿no?

Alexis Advance

21/6/2011
Usar Frameworks
Debo decir que el manuel en general me parece excelente, pero en los ejemplos no deberían utilizar frameworks, pues no todos los dominamos. Yo uso JQuery en lugar de Mootols, por tanto tendré que pasar de este ejercicio, dado que no aprenderé a utilizar el framework para solamente seguir este artículo en particulas.

Por lo demás, muy buen manual.

¡Saludos!

sergio

26/10/2011
excelente guía
y muy útil

Rodrigo

03/7/2018
Ayudaaa
Cuál sería la función para que en vez del rectángulo sea un trapezoide?