Avgransningsrutor
Oversikt
Avgransningsrutor ar den centrala interaktionsmodellen i Reverse Engineering. Efter att ha laddat upp en bild ritar du rektangulara rutor runt enskilda UI-element for att isolera dem. Varje avgransningsruta blir en valbar region som kan tilldelas beteenden, konverteras till kod eller exporteras som en wireframe-komponent.
Skarmflode och grupper
Skarmflodes-canvasen later dig organisera ditt reverse engineering-arbete i grupper. Varje grupp kan innehalla flera skarmbilder och kan typas som Skarm (huvudsidor, sektioner eller vyer) eller Modal (overlagg, dialoger, popupper, ladur). Dubbelklicka pa en grupp for att oppna den och arbeta med dess bilder.
Manuell avgransning
Valj ruteverktyget
Valj ritverktyget for avgransningsrutor fran verktygsfalltet ovanfor bildcanvasen.
Rita en ruta
Klicka och dra pa bilden for att rita en rektangular ruta runt ett UI-element — en knapp, ett kort, ett navigeringsfalt, en hjaltsektion eller valfri komponent.
Andra storlek och justera
Dra kanterna eller hornen pa valfri ruta for att finjustera dess position och storlek. Se till att den tatt omsluter malelementet.
Tilldela beteende
Valj en ruta och definiera vad elementet ska gora — till exempel "oppnar en modal", "navigerar till /om" eller "vaxlar en rullgardinsmeny".
AI auto-avgransning
Istallet for att rita varje ruta manuellt kan du anvanda AI auto-avgransning for att lata Kaiju Hub AI automatiskt identifiera och markera UI-element i din bild. AI:n analyserar den visuella layouten och skapar avgransningsrutor runt identifierade komponenter som sidhuvuden, knappar, kort, inmatningsfalt, bilder och navigeringsobjekt.
Identifiering med ett klick
Klicka pa auto-avgransningsknappen sa skannar AI:n hela bilden och skapar avgransningsrutor runt varje identifierat UI-element.
Redigera efter identifiering
Automatiskt identifierade rutor ar fullt redigerbara. Flytta, andra storlek, ta bort eller lagg till nya rutor for att forfina resultaten.
Selektiv omidentifiering
Kor automatisk identifiering pa en specifik region av bilden om du bara behover rutor for en del av layouten.
Rikta beteende
Kraften i avgransningsrutor ligger i att rikta vad varje element gor. Efter att ha markerat ett element kan du tilldela det interaktiva beteenden som aterspeglas i den genererade koden eller wireframen:
Oppnar modal
Att klicka pa elementet oppnar en modal/dialog. Ange vilket innehall modalen ska visa.
Navigerar till sektion
Elementet fungerar som en lank eller knapp som navigerar till en annan sida eller sektion i appen.
Vaxlar innehall
Elementet visar eller doljer relaterat innehall — rullgardinsmenyer, dragspel, expanderbara paneler.
Formularskickning
Elementet utloser formularvalidering och skickningslogik.
Anpassad atgard
Definiera valfri anpassad beteendebeskrivning sa genererar AI:n lampliga handelsehanterare och logik.