Tipos de Elementos
O JSON Canvas Viewer suporta 7 tipos de elementos: rect, text, image, circle, icon, gradient e line.
Rectangle (rect)
Renderiza retângulos com cores, gradientes, bordas e cantos arredondados.
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
width |
number | 100 | Largura do retângulo |
height |
number | 100 | Altura do retângulo |
color |
string | “#EEEEEE” | Cor de preenchimento |
borderRadius |
number | 0 | Raio de borda arredondada |
borderWidth |
number | 0 | Espessura da borda |
borderColor |
string | “#000000” | Cor da borda |
gradient |
object | null | Gradiente (sobrescreve color) |
Exemplo Básico
{
"type": "rect",
"x": 100,
"y": 100,
"width": 200,
"height": 150,
"color": "#FF6B6B",
"borderRadius": 12,
"borderWidth": 2,
"borderColor": "#FFFFFF"
}
Exemplo com Gradiente
{
"type": "rect",
"x": 50,
"y": 50,
"width": 300,
"height": 200,
"gradient": {
"type": "linear",
"startX": 0.0,
"startY": 0.0,
"endX": 1.0,
"endY": 1.0,
"colorStops": [
{"color": "#FF6B6B", "stop": 0.0, "opacity": 1.0},
{"color": "#4ECDC4", "stop": 1.0, "opacity": 1.0}
]
}
}
Text (text)
Renderiza texto com Google Fonts, rich text (spans) e estilos avançados.
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
content |
string | ”” | Texto (usado se não houver spans) |
fontSize |
number | 16 | Tamanho da fonte |
fontFamily |
string | ”” | Nome da fonte (Google Fonts) |
weight |
string | number | “normal” | Peso da fonte |
color |
string | “#000000” | Cor do texto |
textAlign |
string | “left” | Alinhamento (left, center, right) |
maxWidth |
number | “canvas” | null | Largura máxima |
lineHeight |
number | 1.0 | Altura da linha |
Exemplo Simples
{
"type": "text",
"content": "Hello World",
"x": "center",
"y": 100,
"fontSize": 32,
"fontFamily": "Roboto",
"weight": "bold",
"color": "#000000",
"textAlign": "center"
}
Exemplo com Rich Text
{
"type": "text",
"x": 50,
"y": 100,
"fontSize": 16,
"spans": [
{
"text": "This is ",
"color": "#000000"
},
{
"text": "bold ",
"color": "#FF0000",
"weight": "bold"
},
{
"text": "and this is ",
"color": "#000000"
},
{
"text": "underlined",
"color": "#0000FF",
"textDecoration": "underline"
}
]
}
Image (image)
Renderiza imagens de URLs ou base64 com filtros e transformações.
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
src |
string | ”” | URL ou data URI base64 |
width |
number | 100 | Largura da imagem |
height |
number | 100 | Altura da imagem |
fit |
string | “contain” | cover, contain, fill, etc |
fullSize |
boolean | false | Preenche canvas inteiro |
filter |
string | null | paris, vintage, classic |
blur |
number | 0 | Intensidade do blur |
Filtros Disponíveis
paris
Suavização com warmth leve
vintage
Tons sépia com vinheta
classic
Preto e branco suavizado
Exemplo com Filtro
{
"type": "image",
"src": "https://picsum.photos/400/300",
"x": 50,
"y": 50,
"width": 300,
"height": 200,
"fit": "cover",
"filter": "vintage",
"borderRadius": 16
}
Circle (circle)
Renderiza círculos e elipses com bordas.
Exemplo
{
"type": "circle",
"x": 180,
"y": 320,
"width": 80,
"height": 80,
"color": "#4ECDC4",
"borderWidth": 3,
"borderColor": "#FFFFFF"
}
Icon (icon)
Renderiza ícones do Material Design.
Ícones Disponíveis
star
favorite
home
search
settings
person
add
edit
delete
check
close
error
Exemplo
{
"type": "icon",
"name": "star",
"x": 180,
"y": 320,
"size": 32,
"color": "#FFD700"
}
Gradient (gradient)
Elemento dedicado para gradientes como camada independente.
Exemplo Linear
{
"type": "gradient",
"fullSize": true,
"gradientType": "linear",
"startX": 0.5,
"startY": 0.0,
"endX": 0.5,
"endY": 1.0,
"colorStops": [
{"color": "#000000", "stop": 0.0, "opacity": 0.0},
{"color": "#000000", "stop": 1.0, "opacity": 0.8}
]
}
Line (line)
Renderiza linhas horizontais simples.
Exemplo
{
"type": "line",
"x": 50,
"y": 200,
"width": 260,
"thickness": 2,
"color": "#E0E0E0"
}
Para linha vertical, use rotation: 90.
Exemplo Completo - Card
{
"elements": [
{
"type": "rect",
"x": "center",
"y": 100,
"width": 320,
"height": 440,
"color": "#FFFFFF",
"borderRadius": 20,
"zIndex": 0
},
{
"type": "image",
"src": "https://picsum.photos/300/200",
"x": "center",
"y": 110,
"width": 300,
"height": 200,
"fit": "cover",
"borderRadius": 16,
"zIndex": 1
},
{
"type": "text",
"content": "Card Title",
"x": "center",
"y": 330,
"fontSize": 24,
"fontFamily": "Roboto",
"weight": "bold",
"color": "#2C3E50",
"textAlign": "center",
"zIndex": 2
}
]
}