Obiekty sceny

Wszystkie 10 typów obiektów — rect, circle, ellipse, line, polygon, polyline, path, text i group — z pełnymi przykładami JSON.

Rect i rounded rect#

json

{
  "id": "card",
  "type": "rect",
  "x": 80,
  "y": 80,
  "width": 400,
  "height": 240,
  "rx": 24,
  "ry": 24,
  "fill": "#FFFFFF",
  "stroke": "#DDE5F5",
  "strokeWidth": 2
}

Właściwość	Typ	Opis
`x`, `y`	number	Lewy górny róg
`width`, `height`	number	Wymiary
`rx`, `ry`	number	Promień zaokrąglenia rogów

Circle#

json

{
  "id": "dot",
  "type": "circle",
  "cx": 600,
  "cy": 400,
  "radius": 150,
  "fill": "#0052FF"
}

Ellipse#

json

{
  "id": "orbit",
  "type": "ellipse",
  "cx": 600,
  "cy": 400,
  "rx": 310,
  "ry": 126,
  "fill": "none",
  "stroke": "#B8C9F4",
  "strokeWidth": 3,
  "transform": { "rotate": -12, "originX": 600, "originY": 400 }
}

Line#

json

{
  "id": "axis",
  "type": "line",
  "x1": 100,
  "y1": 400,
  "x2": 1100,
  "y2": 400,
  "stroke": "#171717",
  "strokeWidth": 2
}

Polygon i polyline#

points to tablica punktów { x, y }. Polygon zamyka kształt, polyline nie.

json

{
  "id": "triangle",
  "type": "polygon",
  "points": [
    { "x": 600, "y": 120 },
    { "x": 800, "y": 480 },
    { "x": 400, "y": 480 }
  ],
  "fill": "#FF8A00",
  "stroke": "#171717",
  "strokeWidth": 3
}

json

{
  "id": "sparkline",
  "type": "polyline",
  "points": [
    { "x": 100, "y": 500 },
    { "x": 250, "y": 420 },
    { "x": 400, "y": 460 },
    { "x": 550, "y": 300 }
  ],
  "fill": "none",
  "stroke": "#0052FF",
  "strokeWidth": 4
}

Path#

d to dane ścieżki w składni SVG (obsługiwane komendy), fillRule steruje regułą wypełnienia.

json

{
  "id": "wave",
  "type": "path",
  "d": "M 100 400 C 250 250, 400 550, 550 400 S 850 250, 1000 400",
  "fill": "none",
  "stroke": "#7C5CD6",
  "strokeWidth": 6
}

json

{
  "id": "star",
  "type": "path",
  "d": "M 600 100 L 640 260 L 800 260 L 670 360 L 720 520 L 600 420 L 480 520 L 530 360 L 400 260 L 560 260 Z",
  "fill": "#FFD75E",
  "fillRule": "evenodd"
}

Informacja

Dane path są ograniczone do 1 000 000 znaków, a renderer akceptuje tylko obsługiwane komendy — nieznane komendy są odrzucane w walidacji, nie ignorowane po cichu.

Text#

json

{
  "id": "title",
  "type": "text",
  "x": 600,
  "y": 386,
  "content": "VECTOR",
  "fontSize": 28,
  "fontFamily": "Inter, sans-serif",
  "fontWeight": 700,
  "textAnchor": "middle",
  "letterSpacing": 5,
  "fill": "#FFFFFF"
}

Właściwość	Typ	Opis
`x`, `y`	number	Pozycja kotwicy
`content`	string	Treść (lokalna, escapowana w XML)
`fontSize`	number	Rozmiar w jednostkach dokumentu
`fontFamily`	string	Rodzina fontów
`fontWeight`	integer	Grubość (400, 700…)
`textAnchor`	string	`start`, `middle`, `end`
`letterSpacing`	number	Odstęp między literami

Group#

Grupa dziedziczy transformację i opacity na dzieci:

json

{
  "id": "logo",
  "type": "group",
  "transform": { "translateX": 600, "translateY": 400 },
  "opacity": 0.95,
  "children": [
    { "id": "logo-bg", "type": "circle", "cx": 0, "cy": 0, "radius": 90, "fill": "#0052FF" },
    { "id": "logo-text", "type": "text", "x": 0, "y": 8, "content": "VE", "fontSize": 48, "fontWeight": 700, "textAnchor": "middle", "fill": "#FFFFFF" }
  ]
}

Głębokość zagnieżdżenia grup jest ograniczona do 32.

Blend modes i opacity#

json

{
  "id": "glow",
  "type": "circle",
  "cx": 300,
  "cy": 300,
  "radius": 120,
  "fill": "#FF8A00",
  "opacity": 0.6,
  "blendMode": "multiply"
}

W SVG blendMode trafia do mix-blend-mode, w rasteryzacji jest składany w pipeline RGBA.

Kolejność rysowania#

Obiekty rysowane są w kolejności tablicy objects (i children w grupach) — późniejsze przykrywają wcześniejsze. Warstwy (layers) organizują obiekty, ale zachowują kolejność rysowania z tablicy.