Manipulando el Canvas HTML5 Usando Konva: Parte 4, Estilizando

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

En el segundo tutorial de la serie, aprendiste cómo dibujar algunas formas básicas como rectángulos, círculos, y polígonos regulares usando Konva. El tercer tutorial cubrió cómo puedes usar Konva para dibujar algunas formas complejas como estrellas y aros así como imágenes en el lienzo.

En este tutorial, iremos un paso más allá y aprenderemos cómo aplicar diferente estilizado a formas cambiando sus valores de relleno y trazo. También aprenderás cómo controlar la opacidad de una forma y aplicarle sombras. En las secciones finales, aprenderás cómo usar modos de fusión para especificar como debería lucir el resultado final si se empalman diferentes formas.

Aplicando Relleno y Trazo

Hemos estado usando las propiedades fill y stroke desde el primer tutorial de la serie. Sin embargo, solo los hemos usado para rellenar formas con color sólido hasta ahora. También puedes llenar una forma con degradados (tanto lineal como radial) así como imágenes. Lo mismo va para diferentes trazos aplicados a una forma.

Hay dos maneras de aplicar un relleno a diferentes formas. Puedes establecer el valor del relleno usando la propiedad fill cuando una forma es creada por primera vez en Konva, o puedes usar el método fill() para aplicar un relleno de manera dinámica en respuesta a algunos eventos como hover, clic del botón, etc.

Cuando se llena un elemento con un color sólido, puedes especificar un valor para la propiedad fill y funcionará bien. Cuando uses un degradado lineal para rellenar el interior de una forma, necesitas especificar valores válidos para muchas de las propiedades como fillLinearGradientStartPoint, fillLinearGradientEndPoint, y fillLinearGradientColorStops. Las primeras dos propiedades aceptan objetos que especifican las coordenadas x y y de los puntos de inicio y fin del degradado. También puedes especificar los valores x y ya por separado usando las propiedades fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, y fillLinearGradientEndPointY.

Los degradados lineales también tienen el mismo conjunto de propiedades, pero la palabra Linear es reemplazada con Radial. Dos propiedades adicionales relacionadas con degradados radiales son fillRadialGradientStartRadiusy fillRadialGradientEndRadius.

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: 25,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 0
  },
  fillLinearGradientEndPoint: {
    x: 200,
    y: 150
  },
  fillLinearGradientColorStops: [0, 'blue', 1, 'yellow'],
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 375,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 50
  },
  fillLinearGradientEndPoint: {
    x: 100,
    y: -50
  },
  fillLinearGradientColorStops: [0, 'green', 0.1, 'yellow', 0.5, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 25,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 220,
  fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 375,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 150,
  fillRadialGradientStartPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientEndPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientColorStops: [0, 'blue', 0.5, 'yellow', 0.9, 'green'],
  stroke: "black"
});

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

stage.add(layerA);

Cuando no se especifica, el punto inicial y final de un degradado radial es asumido para ser 0,0. Por esto es que el degradado radial en el tercer rectángulo se origina desde la esquina superior izquierda. También recuerda que los puntos de inicio y fin son especificados relativos a la figura misma.

Please accept marketing cookies to load this content.

Al igual que el relleno, puedes establecer el valor de color y ancho de trazo usando las propiedades stroke y strokewidth cuando una forma es instanciada primero. También puedes establecer de manera dinámica estos dos valores usando los métodos stroke() y strokewidth().

Creando Sombras en Konva

Puedes aplicar sombras a cualquier forma creada usando Konva con la ayuda de cuatro propiedades diferentes llamadas shadowColor, shadowOffset, shadowBlur, y shadowOpacity. La propiedad shadowOffset acepta un objeto con componentes x y y como su valor, pero también puedes usar shadowOffsetX y shadowOffsetY para especificar las coordenadas x y y de forma separada. También tienes la opción de habilitar y deshabilitar las sobras para cualquier forma particular usando la propiedad shadowEnabled.

Puedes controlar la opacidad de la forma misma usando la propiedad opacity. Por favor nota que un objeto completamente transparente no proyectará una sombra. De manera similar, si has establecido el color fill de una forma a transparente, solo la sombra de su stroke será generada sobre el lienzo.

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: 25,
  y: 25,
  width: 200,
  height: 150,
  cornerRadius: 5,
  fill: "orange",
  opacity: 0.5,
  shadowColor: "black",
  shadowOffset: {
    x: -10,
    y: 10
  },
  shadowBlur: 10,
  stroke: "black"
});

var starA = new Konva.Star({
  x: 400,
  y: 200,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 150,
  fill: "transparent",
  stroke: "black",
  strokeWidth: 5,
  shadowColor: "red",
  shadowOffset: {
    x: 5,
    y: 5
  },
  shadowBlur: 0
});

layerA.add(rectA, starA);

stage.add(layerA);

Estableciendo la propiedad shadowBlur a 0 hace la sombra tan afilada como la forma original. Establecer este valor demasiado alto hará que la sombra pierda su forma original; solo verás un parche oscuro sobre el lienzo.

Please accept marketing cookies to load this content.

Me gustaría notar que también puedes crear sombras de texto con el mismo conjunto de propiedades una vez que instanciaste un objeto Konva.Text().

Aplicando Modos de Fusión

Hasta ahora en la serie, cualquier empalme entre formas ocultaba la forma inferior por completo. La única manera de mantener visible la forma inferior fue hacer todas las formas sobre esta parcialmente transparentes.

Algunas veces, podrías querer que el resultado final después del empalme de diferentes formas siga ciertas reglas. Por ejemplo, es posible solo mostrar el color más claro u oscuro en casos en donde las formas se empalman.

Konva te permite especificar algunos valores para determinar cómo se deberían fusionar los colores de formas empalmadas usando la propiedad globalCompositeOperation. Puedes leer la documentación en MDN para aprender sobre la propiedad y sus posibles valores a más detalle.

En el siguiente ejemplo, he aplicado un modo de fusión diferente a cada uno de los rectángulos colocados en la esquina del rectángulo central.

var canvasWidth = 600;
var canvasHeight = 400;

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

var layerA = new Konva.Layer();

var rectCenter = new Konva.Rect({
  x: 225,
  y: 125,
  width: 150,
  height: 150,
  fill: "rgb(255, 100, 0)"
});

var rectA = new Konva.Rect({
  x: 125,
  y: 25,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "lighten"
});

var rectB = new Konva.Rect({
  x: 325,
  y: 25,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "darken"
});

var rectC = new Konva.Rect({
  x: 125,
  y: 225,
  width: 150,
  height: 150,
  fill: "rgb(0, 200, 100)",
  globalCompositeOperation: "hue"
});

var rectD = new Konva.Rect({
  x: 325,
  y: 225,
  width: 150,
  height: 150,
  fill: "rgb(0, 255, 0)",
  globalCompositeOperation: "xor"
});

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

stage.add(layerA);

El color del rectángulo de encima es rgb(0, 200, 100), y el color del rectángulo central es rgb(255, 100, 0). Cuando el modo de fusión lighten es aplicado, los componentes rgb de ambos colores son comparados de manera individual, y los valores más altos para cada componente son usados para obtener el valor final. En nuestro caso, el color final de la esquina superior izquierda se vuelve rgb(255, 200, 100).

Cuando el modo de fusión darken es aplicado, los componentes rgb de ambos colores son comparados de manera individual, y los valores más bajos para cada componente son usados para obtener el color final. En nuestro caso, el color final para la esquina superior derecha se vuelve rgb(0, 100, 0).

Cuando el modo de fusión hue es aplicado, la luminosidad y croma del color inferior son combinados con el tono del color de encima. Es por esto que el color final aún permanece verde pero se vuelve más claro. Cuando el modo de fusión xor es aplicado, el color final se vuelve transparente en todos los lugares de empalme.

Please accept marketing cookies to load this content.

Ideas Finales

En este tutorial, aprendimos cómo rellenar una forma con degradados lineales o radiales en lugar de colores sólidos. También aprendimos cómo aplicar sombras a diferentes formas y hacerlas parcialmente transparentes usando la propiedad opacity. La sección final te mostró cómo usar modos de fusión para poder cambiar el color final después de que dos formas se empalmen.

Si tienes alguna pregunta relacionada con este tutorial, por favor déjame saber en los comentarios. El siguiente tutorial de esta serie te enseñará cómo conectar eventos a diferentes formas en Konva.