Manipulando el Canvas HMLT5 Usando Konva: Parte 2, Formas Básicas

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

El tutorial introductorio de la serie te enseño cómo dibujar tu primera forma usando Konva. También explicó cómo trabajan las capas y grupos en Konva. En el resto de la serie, nos concentraremos en temas más específicos como crear formas básicas y complejas o adjuntar escuchadores de eventos a diferentes formas para poder hacer interactivos tus gráficos.

Este tutorial en particular te mostrará cómo crear formas básicas como rectángulos, círculos, y elipses en Konva. También aprenderás sobre diferentes atributos que pueden ser usados para personalizar la apariencia de estas capas basado en tus necesidades. Las secciones posteriores de este tutorial discutirán cómo dibujar diferentes tipos de líneas y polígonos regulares usando Konva.

Dibujando Rectángulos, Círculos y Elipses

Puedes crear rectángulos en Konva usando el objeto Konva.rect(). La posición de la esquina superior izquierda de un rectángulo puede ser especificada usando las propiedades x y y. De manera similar, puedes especificar el ancho y alto del rectángulo usando las propiedades width y height. Todos los rectángulos que dibujes tendrán esquinas afiladas por defecto. Sin embargo, puedes redondearlas eligiendo un valor adecuado para la propiedad cornerRadius.

Es posible mostrar u ocultar un rectángulo usando la propiedad visible. Si no quieres ocultar completamente un rectángulo pero aún necesitas hacerlo semi-transparente, puedes usar la propiedad opacity. Puedes establecerlo a cualquier número entre 0 y 1 inclusivo. La forma no será visible si la opacidad se establece en 0.

También puedes rotar o escalar tus formas de rectángulo usando las propiedades rotation y scale respectivamente. La rotación es especificada como un número plano pero aplicado en grados. Tienes la opción de escalar cualquier rectángulo ya sea en el eje x o y de manera independiente usando las propiedades scaleX y scaleY.

Aquí está un ejemplo que dibuja diferentes rectángulos sobre un lienzo usando todas las propiedades que acabamos de discutir.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 10,
  y: 10,
  width: 200,
  height: 50,
  fill: "yellow",
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 160,
  y: 30,
  width: 80,
  height: 250,
  fill: "orange",
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 200,
  y: 160,
  width: 180,
  height: 180,
  cornerRadius: 10,
  strokeWidth: 10,
  opacity: 0.8,
  fill: "red",
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 400,
  y: 20,
  width: 180,
  height: 180,
  scaleX: 1.8,
  scaleY: 0.75,
  rotation: 45,
  fill: "lightgreen",
  stroke: "black"
});

layerA.add(rectA, rectB, rectC, rectD);

stage.add(layerA);

Deberías notar que los rectángulos no están dibujados en el orden en el cuál fueron creados. En su lugar, están dibujados en el orden en el cuál fueron agregados a la capa. Las propiedades fill y stroke son usadas para establecer el color de relleno y contorno respectivamente.

Please accept marketing cookies to load this content.

Puedes crear círculos en Konva usando el objeto Konva.circle(). Esta vez, las propiedades x y y determinan el punto central para dibujar el círculo. Aún puedes especificar un valor para las propiedades de ancho y alto. Estos valores son usados para calcular el diámetro del círculo a ser dibujado. Sin embargo, in círculo tiene ancho y alto igual. Esto significa que el valor especificado después toma precedencia sobre el especificado anteriormente en caso de conflicto. En otras palabras, si estableces el width de un círculo a 100 y después estableces su height a 180, el círculo tendrá un diámetro de 180 y el ancho será ignorado.

Para evitar confusión, puedes omitir las propiedades width y height y especificar un valor para el radius del círculo. Ten en mente que tienes que establecer el radio a 50 para dibujar un circulo cuyo ancho y alto sea 100.

De forma similar, también puedes crear una elipse usando el objeto Konva.ellipse(). La única diferencia es que la propiedad radio ahora aceptará un objeto con propiedades x y y como su valor. Si se especifica, las propiedades de ancho y alto ahora serán aplicadas de manera independiente para determinar la forma final de la elipse.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var circA = new Konva.Circle({
  x: 100,
  y: 100,
  width: 180,
  fill: "yellow",
  stroke: "black"
});

var circB = new Konva.Circle({
  x: 180,
  y: 150,
  height: 100,
  fill: "orange",
  stroke: "black"
});

var circC = new Konva.Circle({
  x: 200,
  y: 275,
  radius: 100,
  opacity: 0.5,
  fill: "red",
  stroke: "black"
});

var ellipA = new Konva.Ellipse({
  x: 400,
  y: 75,
  width: 70,
  height: 100,
  rotation: -15,
  fill: "lightgreen",
  stroke: "black"
});

var ellipB = new Konva.Ellipse({
  x: 400,
  y: 75,
  width: 80,
  height: 120,
  rotation: -15,
  strokeWidth: 5,
  fill: "white",
  stroke: "black"
});

var ellipC = new Konva.Ellipse({
  x: 450,
  y: 275,
  radius: {
    x: 100,
    y: 50
  },
  scaleY: 2,
  fill: "violet",
  stroke: "black"
});

layerA.add(circA, circB, circC, ellipB, ellipA, ellipC);

stage.add(layerA);

Deberías notar que ellipB tiene una altura y anchura más grande comparado con ellipA. Ya que ambos tienen los mismos valores de x y y, tuve que agregar a ellipB a la capa primero para mantener a ellipA visible. Si ellipB fuera agregado después de ellipA, lo hubiera dibujado sobre ellipA, ocultándolo de los espectadores.

Si observas de cerca, también verás que el círculo violeta es de hecho una elipse con radio y establecido a 50 y radio x establecido a 100. Sin embargo, ha sido escalado por un factor de 2 en la dirección de y. El escalado incremente el ancho del trazo también, haciéndolo dos veces más ancho en la parte superior e inferior comparado con sus bordes izquierdo y derecho.

Please accept marketing cookies to load this content.

Dibujando Líneas Usando Konva

Puedes usar el objeto Konva.Line() para crear diferentes tipos de líneas y curvas. Todas las líneas requieren que especifiques los puntos a través de los cuáles debería pasar la línea usando la propiedad points. Los puntos son especificados como un arreglo.

Puedes unir cualquier conjunto de puntos usando el arreglo points para formar un polígono estableciendo el valor del atributo closed a true. De manera similar, puedes convertir un conjunto de líneas rectas a curvas estableciendo el valor para el atributo tension. Un valor de 0 resultará en líneas rectas. Valores más altos crean líneas más curvas.

Es posible que crees una forma curva cerrada (una gota) estableciendo un valor para la propiedad tension así como cerrar la curva estableciendo closed a true.

Como el resto de las formas que hemos discutido, puedes establecer el ancho de trazo para dibujar las líneas usando el atributo strokeWidth. También puedes especificar un color fill para formas cerradas.

En el siguiente ejemplo, he usado el mismo conjunto de puntos para trazar todas las formas. Sin embargo, también he usado el método move() para mover cada forma a una distancia específica para evitar empalmes.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var lineA = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  stroke: "black"
});

var lineB = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  closed: true,
  fill: "yellow",
  stroke: "black"
});

var lineC = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  tension: 0.8,
  stroke: "blue"
});

var lineD = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  tension: 1.8,
  stroke: "red"
});

var lineE = new Konva.Line({
  points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
  closed: true,
  tension: 2.2,
  fill: "lightblue",
  stroke: "black"
});

lineB.move({
  x: 180,
  y: 40
});

lineC.move({
  x: 380,
  y: 0
});

lineD.move({
  x: 0,
  y: 200
});

lineE.move({
  x: 180,
  y: 220
});

layerA.add(lineA, lineB, lineC, lineD, lineE);

stage.add(layerA);

También deberías notar que las líneas rojas y azules son trazadas usando el mismo conjunto de puntos, pero un valor tension diferente cambia significativamente la forma final de la curva.

Please accept marketing cookies to load this content.

Dibujando Polígonos Regulares

Puedes elegir cuidadosamente el valor de puntos diferentes en el arreglo points para dibujar polígonos regulares como pentágonos y hexágonos. Dibujar polígonos más complejos como octágonos usando este método puede resultar más difícil y con errores. Para evitar errores, deberías usar el objeto Konva.RegularPolygon() para crear polígonos regulares.

Las propiedades x y y son usadas para especificar el centro del polígono. La propiedad radius es usada para especificar la distancia entre el punto central y todos sus vértices. Puedes usar la propiedad sides para especificar el número de lados que el polígono debería tener. Ten en mente que todos los lados de un polígono creado usando solo este método tendrá longitudes iguales. Puedes cambiar el largo de algunos lados usando las propiedades scaleX y scaleY, pero también cambiará el ancho de trazo del lado escalado.

Al igual que todas las otras formas que discutimos, puedes cambiar el ancho del trazo, opacidad y visibilidad de polígonos regulares usando strokeWidth, opacity, y visibility.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var triangle = new Konva.RegularPolygon({
  x: 150,
  y: 275,
  sides: 3,
  radius: 100,
  scaleY: 1.6,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var square = new Konva.RegularPolygon({
  x: 60,
  y: 60,
  sides: 4,
  radius: 50,
  fill: "rgba(200,0,0, 0.5)",
  stroke: "black"
});

var pentagon = new Konva.RegularPolygon({
  x: 160,
  y: 160,
  sides: 5,
  radius: 80,
  fill: "rgba(0,200,0, 0.5)",
  stroke: "black"
});

var hexagon = new Konva.RegularPolygon({
  x: 350,
  y: 120,
  sides: 6,
  radius: 80,
  fill: "rgba(0,0,200, 0.5)",
  stroke: "black"
});

var octagon = new Konva.RegularPolygon({
  x: 450,
  y: 275,
  sides: 8,
  radius: 100,
  fill: "rgba(200,200,0, 0.5)",
  stroke: "black"
});

layerA.add(triangle, square, pentagon, hexagon, octagon);

stage.add(layerA);

Please accept marketing cookies to load this content.

Ideas Finales

En este tutorial, hemos cubierto las formas más básicas que Konva nos permite dibujar sobre el lienzo con facilidad. También aprendimos sobre diferentes atributos que pueden ser usados para controlar la apariencia de todas estas formas. La mayoría de los atributos son comunes para todas las formas, pero algunos de ellos solo son aplicables sobre formas específicas.

Si tienes preguntas, por favor déjame saber en los comentarios. Aprenderemos sobre formas más complejas en el siguiente tutorial de la serie.