ImageEditor

Kadrowanie i punkt ostrości dla jednego obrazu, z opcjonalnym obrotem i odbiciem. Użyj go w oknie dialogowym albo panelu bocznym, gdy obraz musi pasować do stałych kształtów; faktyczną pracę na obrazie wykonuje aplikacja przez wywołania zwrotne.

ImageEditor

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: ImageEditor

Rotate and flip

Aspect ratio

Drag the frame or its corners. Arrow keys move it, Shift with an arrow key resizes it.

Left edge

Top edge

Width

Height

Noc, podgląd: ImageEditor

Rotate and flip

Aspect ratio

Drag the frame or its corners. Arrow keys move it, Shift with an arrow key resizes it.

Left edge

Top edge

Width

Height

Wysoki kontrast, podgląd: ImageEditor

Rotate and flip

Aspect ratio

Drag the frame or its corners. Arrow keys move it, Shift with an arrow key resizes it.

Left edge

Top edge

Width

Height

UżycieLink do sekcji Użycie

tsx

import { ImageEditor } from '@skribly/ui/media'

tsx

<ImageEditor src={url} imageWidth={1920} imageHeight={1080} ratios={ratios}
  labels={labels} previews={[{ label: 'Square', ratio: 1 }]}
  onApplyCrop={crop} onSaveFocal={saveFocal} onRotate={rotate}
  status={result} isBusy={working} busyLabel="Working on the image" />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Ramka kadru jest jednym przystankiem w kolejności Tab, suwakiem, któremu czytniki ekranu przekazują klawisze strzałek: strzałki ją przesuwają, Shift ze strzałkami zmienia rozmiar, a jej pozycja jest odczytywana słowami z cropValueText.
Pola liczbowe ustawiają dokładne krawędzie i rozmiar, a dwa suwaki ustawiają punkt ostrości, więc nic nie wymaga wskaźnika.
Cele w rogach mają 24 px.
Wyniki pojawiają się słowami ze znakiem: błędy są ogłaszane od razu, a pozostałe w trybie polite, i zostają do zastąpienia.
Narzędzia leżą obok podglądu, gdy edytor jest szeroki, a pod nim w przeciwnym razie; linie ramki zachowują kontrastową krawędź na dowolnym obrazie i używają wyróżnienia systemowego w trybie wymuszonych kolorów.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.