Gradienty i warstwy

Gradienty linear i radial ze stopami, gradientUnits i spreadMethod, warstwy z visibility i opacity oraz workspaces eksportowe.

Gradienty#

Definicje żyją w document.gradients (lub top-level gradients), a obiekty referencjonują je przez url(#id).

Linear#

json

{
  "gradients": [
    {
      "id": "sunset",
      "type": "linear",
      "x1": 0,
      "y1": 0,
      "x2": 1,
      "y2": 1,
      "stops": [
        { "offset": 0, "color": "#FF8A00" },
        { "offset": 0.5, "color": "#FF3D77", "opacity": 0.9 },
        { "offset": 1, "color": "#7C5CD6" }
      ]
    }
  ]
}

json

{
  "id": "hero",
  "type": "rect",
  "x": 0,
  "y": 0,
  "width": 1200,
  "height": 630,
  "fill": "url(#sunset)"
}

Radial#

json

{
  "id": "glow",
  "type": "radial",
  "cx": 0.5,
  "cy": 0.5,
  "r": 0.6,
  "stops": [
    { "offset": 0, "color": "#FFFFFF", "opacity": 0.9 },
    { "offset": 1, "color": "#FFFFFF", "opacity": 0 }
  ]
}

Stopy i opcje#

Każdy gradient ma co najmniej dwa stopy:

json

{ "offset": 0, "color": "#0052FF", "opacity": 1 }

Opcja	Wartości	Opis
`gradientUnits`	`objectBoundingBox`, `userSpaceOnUse`	Układ współrzędnych gradientu
`spreadMethod`	`pad`, `reflect`, `repeat`	Zachowanie poza zakresem 0–1

json

{
  "id": "stripes",
  "type": "linear",
  "gradientUnits": "userSpaceOnUse",
  "spreadMethod": "repeat",
  "x1": 0,
  "y1": 0,
  "x2": 40,
  "y2": 0,
  "stops": [
    { "offset": 0, "color": "#0052FF" },
    { "offset": 0.5, "color": "#0052FF" },
    { "offset": 0.5, "color": "#FFFFFF" },
    { "offset": 1, "color": "#FFFFFF" }
  ]
}

Nieobsługiwane typy gradientów emitują unsupported.gradient.

Warstwy#

layers organizują obiekty w nazwane, eksportowalne warstwy:

json

{
  "layers": [
    {
      "id": "background",
      "name": "Tło",
      "visible": true,
      "opacity": 1,
      "objects": ["bg", "grid"]
    },
    {
      "id": "content",
      "name": "Treść",
      "objects": ["title", "subtitle"]
    },
    {
      "id": "watermark",
      "name": "Znak wodny",
      "visible": false,
      "opacity": 0.4,
      "objects": ["logo"]
    }
  ]
}

Obiekt może też deklarować przynależność przez layerId:

json

{ "id": "title", "type": "text", "layerId": "content", "content": "Hej" }

Warstwy nie zmieniają kolejności rysowania

Warstwy to organizacja i eksport, nie stos renderu. Kolejność rysowania wynika z tablicy objects — warstwa z visible: false ukrywa swoje obiekty, ale nie przesuwa ich w kolejności.

Eksport warstw#

Panel eksportu pozwala wybrać warstwę jako target i wyeksportować ją osobno — np. tło bez znaku wodnego albo sam znak wodny z przezroczystością. Batch export wygeneruje plik per warstwa.

Workspaces#

Nazwane regiony eksportu w document.workspaces:

json

{
  "document": {
    "width": 2400,
    "height": 1260,
    "workspaces": [
      { "id": "og", "name": "Open Graph", "x": 0, "y": 0, "width": 1200, "height": 630 },
      { "id": "twitter", "name": "Twitter", "x": 1200, "y": 0, "width": 1200, "height": 630 },
      { "id": "square", "name": "Kwadrat", "x": 0, "y": 630, "width": 630, "height": 630 }
    ]
  }
}

Jeden dokument, wiele formatów wyjściowych — batch export przechodzi po workspace'ach i generuje komplet plików.

Przykład: kompletna scena z gradientem i warstwami#

json

{
  "version": "1.0",
  "document": {
    "width": 1200,
    "height": 630,
    "background": "#0F1220",
    "gradients": [
      {
        "id": "aurora",
        "type": "linear",
        "x1": 0, "y1": 0, "x2": 1, "y2": 1,
        "stops": [
          { "offset": 0, "color": "#0052FF" },
          { "offset": 1, "color": "#7C5CD6" }
        ]
      }
    ]
  },
  "layers": [
    { "id": "bg", "objects": ["bg-rect"] },
    { "id": "fg", "objects": ["title"] }
  ],
  "objects": [
    { "id": "bg-rect", "type": "rect", "x": 0, "y": 0, "width": 1200, "height": 630, "fill": "url(#aurora)", "layerId": "bg" },
    { "id": "title", "type": "text", "x": 600, "y": 315, "content": "AURORA", "fontSize": 72, "fontWeight": 800, "textAnchor": "middle", "fill": "#FFFFFF", "letterSpacing": 8, "layerId": "fg" }
  ]
}