Begrenzingsvakken
Overzicht
Begrenzingsvakken zijn het kerninteractiemodel van Reverse Engineering. Na het uploaden van een afbeelding teken je rechthoekige vakken rond individuele UI-elementen om ze te isoleren. Elk begrenzingsvak wordt een selecteerbaar gebied waaraan gedrag kan worden toegewezen, dat naar code kan worden geconverteerd of als wireframecomponent kan worden geëxporteerd.
Schermstroom & groepen
Het Schermstroom-canvas stelt je in staat om je reverse engineering-werk in groepen te organiseren. Elke groep kan meerdere schermafbeeldingen bevatten en kan worden getypeerd als Scherm (hoofdpagina's, secties of weergaven) of Modaal (overlays, dialogen, popups, laden). Dubbelklik op een groep om deze te openen en met de afbeeldingen te werken.
Handmatige vakken
Selecteer het vakgereedschap
Kies het begrenzingsvak-tekengereedschap uit de werkbalk boven het afbeeldingscanvas.
Teken een vak
Klik en sleep op de afbeelding om een rechthoekig vak rond een UI-element te tekenen — een knop, een kaart, een navigatiebalk, een hero-sectie of elk component.
Formaat wijzigen & aanpassen
Sleep de randen of hoeken van een vak om de positie en grootte te verfijnen. Zorg ervoor dat het strak om het doelelement past.
Gedrag toewijzen
Selecteer een vak en definieer wat het element moet doen — bijvoorbeeld, "opent een modaal venster," "navigeert naar /about," of "schakelt een dropdownmenu."
AI-automatische vakken
In plaats van elk vak handmatig te tekenen, gebruik je AI-automatische vakken om Kaiju Hub AI automatisch UI-elementen in je afbeelding te laten detecteren en omlijnen. De AI analyseert de visuele indeling en maakt begrenzingsvakken rond gedetecteerde componenten zoals headers, knoppen, kaarten, invoervelden, afbeeldingen en navigatie-items.
Detectie met één klik
Klik op de auto-vak-knop en AI scant de hele afbeelding en maakt begrenzingsvakken rond elk gedetecteerd UI-element.
Bewerken na detectie
Automatisch gedetecteerde vakken zijn volledig bewerkbaar. Verplaats, wijzig de grootte, verwijder of voeg nieuwe vakken toe om de resultaten te verfijnen.
Selectieve herdetectie
Voer automatische detectie uit op een specifiek gebied van de afbeelding als je alleen vakken nodig hebt voor een deel van de indeling.
Gedrag sturen
De kracht van begrenzingsvakken zit in het sturen van wat elk element doet. Na het omkaderen van een element kun je interactief gedrag toewijzen dat wordt weerspiegeld in de gegenereerde code of wireframe:
Opent modaal
Klikken op het element opent een modaal venster/dialoog. Specificeer welke inhoud het modale venster moet tonen.
Navigeert naar sectie
Het element fungeert als een link of knop die naar een andere pagina of sectie van de app navigeert.
Wisselt inhoud
Het element toont of verbergt gerelateerde inhoud — dropdowns, accordeons, uitklapbare panelen.
Formulierverzending
Het element activeert formuliervalidatie en verzendlogica.
Aangepaste actie
Definieer een aangepaste gedragsbeschrijving en AI genereert de juiste event handlers en logica.