JSON Canvas Viewer

Especificação JSON

Estrutura Base

Todo JSON do Canvas Viewer segue esta estrutura:

{
  "canvas": {
    // Configurações do canvas
  },
  "elements": [
    // Array de elementos
  ]
}

Objeto Canvas

Define as propriedades do canvas principal.

Propriedades

Propriedade Tipo Obrigatório Padrão Descrição
width number Sim - Largura do canvas em pixels
height number Sim - Altura do canvas em pixels
backgroundColor string Não “#FFFFFF” Cor de fundo (formato hex)
exportWidth number Não 1080 Largura de design de referência
exportHeight number Não 1920 Altura de design de referência

Exemplo

{
  "canvas": {
    "width": 360,
    "height": 640,
    "backgroundColor": "#F8F9FA",
    "exportWidth": 1080,
    "exportHeight": 1920
  }
}

Sistema de Referência

As propriedades exportWidth e exportHeight definem as dimensões de referência para o design:

Cálculo de escala:

scaleFactor = min(canvasWidth / exportWidth, canvasHeight / exportHeight)
**Exemplo Prático** Design em `1080x1920` renderizado em `360x640`: - Fator de escala: `0.333` - Elemento com `x=540` renderiza em `180` - Font size `24` renderiza como `8`

Array de Elementos

Lista de elementos a serem renderizados no canvas.

Ordem de Renderização

Elementos são renderizados em ordem crescente de zIndex:

{
  "elements": [
    {
      "type": "rect",
      "zIndex": 0  // Renderizado primeiro (fundo)
    },
    {
      "type": "text",
      "zIndex": 1  // Renderizado depois
    },
    {
      "type": "icon",
      "zIndex": 2  // Renderizado por último (frente)
    }
  ]
}

Regras:

Propriedades Comuns

Propriedades que se aplicam a múltiplos tipos de elementos.

Posicionamento

Propriedade Tipo Padrão Descrição
x number | “center” 0 Posição horizontal
y number | “center” 0 Posição vertical
centerX boolean false Centraliza horizontalmente
centerY boolean false Centraliza verticalmente

Exemplos:

// Posição absoluta
{ "x": 100, "y": 50 }

// Centralização por string
{ "x": "center", "y": "center" }

// Centralização por flag
{ "x": 100, "y": 50, "centerX": true }

Transformações

Propriedade Tipo Padrão Descrição
rotation number 0 Rotação em graus (0-360)
opacity number 1.0 Opacidade (0.0 a 1.0)
zIndex number 0 Ordem de empilhamento

Sistema de Cores

Formato Hexadecimal

Todas as cores usam formato hexadecimal:

{
  "color": "#RRGGBB",      // RGB (alpha implícito 100%)
  "color": "#AARRGGBB"     // ARGB (alpha explícito)
}

Exemplos:

#FF0000

Vermelho sólido

#00FF00

Verde sólido

#0000FF

Azul sólido

#80FF0000

Vermelho com 50% opacidade

Parsing

Color _parseColor(String hexColor) {
  hexColor = hexColor.replaceAll('#', '');
  if (hexColor.length == 6) {
    hexColor = 'FF$hexColor';  // Adiciona alpha 100%
  }
  return Color(int.parse('0x$hexColor'));
}

Validação

O que é Validado

O sistema valida:

  1. JSON bem formado (sintaxe correta)
  2. Estrutura de objeto raiz
  3. Tipos de dados básicos

O que NÃO é Validado

O sistema não valida:

Tratamento de Erros

**JSON inválido** ```json { "canvas": { "width": 360 }, "elements": [], // Vírgula extra } ``` Resultado: Editor mostra erro, canvas não renderiza
**Propriedade inválida** ```json { "type": "rect", "x": "invalid" // String onde deveria ser number } ``` Resultado: Elemento renderiza com valor padrão (0)

Exemplo Completo

{
  "canvas": {
    "width": 360,
    "height": 640,
    "backgroundColor": "#1A1A1A"
  },
  "elements": [
    {
      "type": "image",
      "src": "https://example.com/bg.jpg",
      "fullSize": true,
      "fit": "cover",
      "opacity": 0.3,
      "zIndex": 0
    },
    {
      "type": "gradient",
      "fullSize": true,
      "gradientType": "linear",
      "startX": 0.5,
      "startY": 0,
      "endX": 0.5,
      "endY": 1,
      "colorStops": [
        {"color": "#000000", "stop": 0, "opacity": 0.0},
        {"color": "#000000", "stop": 1, "opacity": 0.8}
      ],
      "zIndex": 1
    },
    {
      "type": "rect",
      "x": "center",
      "y": 200,
      "width": 320,
      "height": 240,
      "color": "#FFFFFF",
      "borderRadius": 20,
      "zIndex": 2
    },
    {
      "type": "text",
      "content": "Modern Design",
      "x": "center",
      "y": 250,
      "fontSize": 28,
      "fontFamily": "Poppins",
      "weight": "bold",
      "color": "#000000",
      "textAlign": "center",
      "zIndex": 3
    }
  ]
}

Próximos Passos

Elementos

Explore todos os tipos de elementos suportados

Ver Elementos →

Renderização

Entenda como o sistema processa JSON

Ver Pipeline →

Componentes

Veja a implementação dos componentes

Ver Componentes →