Szybki start

Uruchom workspace webowy, zbuduj natywne CLI C++23 i skompiluj WebAssembly. Pierwsza scena i pierwszy eksport.

Wymagania#

Web:

Node.js 24
npm 11

Natywny silnik:

kompilator C++23
CMake ≥ 3.24
Ninja

Workspace webowy#

bash

npm install
npm run dev

Workspace startuje pod adresem wypisanym przez Vite. Edytor JSON po lewej, podgląd na środku, inspektor i eksport po prawej.

Komendy webowe#

bash

npm run dev
npm run typecheck
npm run test
npm run build
npm run test:e2e

Playwright wymaga przeglądarki na nowej maszynie:

bash

npx playwright install --with-deps chromium

Natywne CLI#

Skonfiguruj i zbuduj

bash

cmake --preset native-debug
cmake --build --preset native-debug
ctest --preset native-debug

Wygeneruj pierwszy obraz

bash

build/native-debug/engine/vector-engine examples/getting-started.json output.png --width 1200 --height 800

Opcje CLI: --width, --height, --quality, --background, --transparent.

bash

build/native-debug/engine/vector-engine scene.json out.jpg --quality 90 --background "#F4F7FF"
build/native-debug/engine/vector-engine scene.json out.svg
build/native-debug/engine/vector-engine scene.json out.bmp --transparent

WebAssembly#

Zainstaluj i aktywuj Emscripten SDK, potem:

bash

cmake --preset wasm-release
cmake --build --preset wasm-release

Build kopiuje vector_engine.js i vector_engine.wasm do apps/web/public/wasm. Zweryfikowana para artefaktów jest dołączona do repo, więc aplikacja używa rdzenia C++23 od razu. Po zmianie kodu natywnego przebuduj parę:

bash

npm run wasm:build
npm run verify:wasm

Fallback w development

Gdy artefaktów WASM nie ma, tryb deweloperski używa przeglądarkowego renderera zgodnego API, więc UI pozostaje używalny. Produkcyjnie zawsze weryfikuj npm run verify:wasm.

Pierwsza scena#

Wklej do edytora:

json

{
  "version": "1.0",
  "document": {
    "width": 800,
    "height": 600,
    "unit": "px",
    "background": "#0F1220"
  },
  "objects": [
    {
      "id": "card",
      "type": "rect",
      "x": 100,
      "y": 100,
      "width": 600,
      "height": 400,
      "rx": 24,
      "fill": "#1A1F36",
      "stroke": "#3D4670",
      "strokeWidth": 2
    },
    {
      "id": "title",
      "type": "text",
      "x": 400,
      "y": 280,
      "content": "VECTOR ENGINE",
      "fontSize": 36,
      "fontWeight": 700,
      "textAnchor": "middle",
      "fill": "#FFFFFF",
      "letterSpacing": 4
    },
    {
      "id": "accent",
      "type": "circle",
      "cx": 400,
      "cy": 360,
      "radius": 8,
      "fill": "#0052FF"
    }
  ]
}

Podgląd odświeża się z debounce, a walidacja pokazuje błędy inline w edytorze. Eksportuj przez panel po prawej (7 kroków) albo nagłówkiem.

Co dalej?#

Format sceny — pełna referencja dokumentu.
Obiekty — wszystkie 10 typów z przykładami.
Eksport — formaty i ich zachowanie.