Crear un Canvas

Introducción

Los Canvas son una representación de objetos que se usa para renderizar una imagen, este no tiene relación con los comandos, sino con la funcionalidad que ofrece Beatriz-dono.

Estructura de un Canvas

Un Canvas es un objeto JSON que contiene los siguientes campos:

Es la representación de un Canvas y las datos de trazabilidad.

  interface Canvas {
    id?: string | undefined;
    version: string;
    title: string;
    author?: string | undefined;
    forkedFrom?: string | undefined;
    visible?: boolean | undefined;
    h: number;
    w: number;
    bgColor: string;
    layerCastColor: string;
    layers: Layer[];
  }
  type Layer = LayerText | LayerShape;

id: Opcional No Editable Identificador único del Canvas.
version: La versión del Canvas, esto sera importante en el futuro, por defecto usara la ultima versión.
title: Título del Canvas. es usada como identificador para los módulos de comandos. la longitud máxima es de 100 caracteres.
author: Opcional No Editable Indica quien creó el Canvas, la longitud máxima es de 100 caracteres.
forkedFrom: Opcional No Editable Indica el id del canvas original, la longitud máxima es de 100 caracteres.
visible: Opcional Esta propiedad indicara si el canvas puede ser visto por la comunidad (no implementado). por defecto es true.
h: Altura del Canvas.
w: Ancho del Canvas.
bgColor: Opcional Color de fondo del Canvas.
layerCastColor: Opcional id del slayer que se usara para usar como trazabilidad, si no se especifica, no se usara trazabilidad.
layers: Lista de capas del Canvas. por ahora tiene un limite de 50 capas.

Es la representación de un texto.

  interface LayerText {
    type: 'text';
    dx: number;
    dy: number;
    text: string;
    size: number;
    family: string;
    color?: string | undefined;
    globalAlpha?: number | undefined;
    letterSpacing?: number | undefined;
    maxWidth?: number | undefined;
    weight?: number | undefined;
    align?: 'start' | 'end' | 'left' | 'right' | 'center' | 'button' | undefined;
    baseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom' | undefined;
    filter?: Filter | undefined;
  }

type: Tipo de texto, puede ser text o shape.
dx: Posición horizontal del texto.
dy: Posición vertical del texto.
text: texto a renderizar, este soporta las variables de usuario y de servidor.
size: Tamaño del texto. este esta expresado en pixeles. por ejemplo, si el texto es de 10 pixeles, el valor será 10.
family: Familia de fuentes a usar, esta feature esta hecha para soportar muchas fuentes, pero por el momento solo agregamos algunas fuentes. aquí algunas:
- Roboto, Inter, Montserrat, Open Sans, Arvo, Lato, Nunito, Caveat, Karla, Dancing Script
color: Opcional Color del texto, puede ser un color hexadecimal , la palabra auto o transparent.
- Si es auto, el texto usara el color que se usara es de colorCast.
- Si es transparent, el texto usara el color transparente.
globalAlpha: Opcional Opacidad del texto, por defecto es 1.
letterSpacing: Opcional Espacio entre letras.
maxWidth: Opcional Ancho máximo del texto, por defecto es 0, esto significa que el texto no tiene límite de ancho.
weight: Opcional Peso del texto, por defecto es 400.
align: Opcional Alineación del texto, por defecto es left.
baseline: Opcional Alineación de la línea base, por defecto es top.
filter: Opcional Un conjunto de filtros que se aplican sobre el texto, por defecto es undefined.

Es la representación de una figura, puede ser una imagen, una linea, un rectángulo, etc.

  interface LayerShape {
    type: 'shape';
    color?: string | undefined;
    dx: number;
    dy: number;
    dh?: number | undefined;
    dw?: number | undefined;
    image?: string | undefined;
    clip?: Clip | undefined;
    filter?: Filter | undefined;
  }

type: Tipo de figura, puede ser text o shape.
color: Opcional Color de la figura, puede ser un color hexadecimal , la palabra auto o transparent.
- Si es auto, la figura usara el color que se usara es de colorCast.
- Si es transparent, la figura usara el color transparente.
dx: Posición horizontal de la figura.
dy: Posición vertical de la figura.
dh: Altura de la figura.
dw: Ancho de la figura.
image: Opcional URL de la imagen o {{user_avatar}} o {{user_banner}} o {{server_avatar}} o {{server_banner}}.
clip: Opcional Un SVG clipPath que usara de mascara para el clip.
filter: Opcional Un conjunto de filtros que se aplican sobre la figura, por defecto es undefined.

Representa un SVG clipPath que usara de mascara para el clip.

  type Clip = {
    d: string;
    h: number;
    w: number;
    align?: 'top' | 'left' | 'right' | 'center' | 'button' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined;
  };

d: estructura SVG del clipPath.
h: Altura del viewport del clipPath.
w: Ancho del viewport del clipPath.
align: Opcional este es usado para alinear la imagen si este existe.

  type Filter = {
    blur?: number | undefined;
    brightness?: number | undefined;
    contrast?: number | undefined;
    dropShadow?: DropShadow | undefined;
    grayscale?: number | undefined;
    hueRotate?: number | undefined;
    invert?: number | undefined;
    opacity?: number | undefined;
    saturate?: number | undefined;
    sepia?: number | undefined;
  };

  type DropShadow = {
    offsetX: number;
    offsetY: number;
    blurRadius: number;
    color?: string | undefined;
  };

blur: Opcional Blur de la imagen. una escala de 1 a 100.
brightness: Opcional Brillo de la imagen. una escala de -100 a 100.
contrast: Opcional Contraste de la imagen. una escala de -100 a 100.
dropShadow: Opcional Un shadow de la imagen.
- offsetX: Posición horizontal del shadow. limite de MAX_WIDTH_CANVAS.
- offsetY: Posición vertical del shadow. limite de MAX_WIDTH_CANVAS.
- blurRadius: Radio del blur del shadow. una escala de 0 a 100.
- color: Color del shadow. puede ser un color hexadecimal , la palabra auto o transparent.
  - Si es auto, el texto usara el color que se usara es de colorCast.
  - Si es transparent, el texto usara el color transparente.
grayscale: Opcional Escala de grises de la imagen. una escala de 0 a 100.
hueRotate: Opcional Rotación de color de la imagen. una escala de -360 a 360.
invert: Opcional Invertir la imagen. una escala de 0 a 100.
opacity: Opcional Opacidad de la imagen. una escala de 0 a 100.
saturate: Opcional Saturación de la imagen. una escala de 0 a 100.
sepia: Opcional Sepia de la imagen. una escala de 0 a 100.

Cosas que tener en cuenta

Tamaño máximo del Canvas

el tamaño máximo de la imagen es de 2000 pixeles por cada lado. esto lo veras representado por MAX_WIDTH_CANVAS.