边界框
概述
边界框是逆向工程的核心交互模型。上传图片后，您在各个 UI 元素周围绘制矩形框以将其隔离。每个边界框成为一个可选择的区域，可以分配行为、转换为代码或导出为线框图组件。
屏幕流程与分组
屏幕流画布允许您将逆向工程工作组织成组。每个组可以包含多个屏幕图像，并可以分类为屏幕（主页面、部分或视图）或模态框（叠加层、对话框、弹出窗口、抽屉）。双击组以打开并处理其图像。
手动框选
1
选择框选工具
从图片画布上方的工具栏中选择边界框绘制工具。
2
绘制框
在图片上点击并拖动以在 UI 元素周围绘制矩形框——按钮、卡片、导航栏、主视觉区域或任何组件。
3
调整大小和位置
拖动任何框的边缘或角来微调其位置和大小。确保它紧密包裹目标元素。
4
分配行为
选择一个框并定义该元素应执行的操作——例如"打开模态框"、"导航到 /about"或"切换下拉菜单"。
AI 自动框选
无需手动绘制每个框，使用 AI 自动框选让 Kaiju Hub AI 自动检测和勾画图片中的 UI 元素。AI 分析视觉布局并在检测到的组件（如页眉、按钮、卡片、输入框、图片和导航项）周围创建边界框。
一键检测
点击自动框选按钮，AI 扫描整个图片，在每个检测到的 UI 元素周围创建边界框。
检测后编辑
自动检测的框完全可编辑。移动、调整大小、删除或添加新框以完善结果。
选择性重新检测
如果只需要图片部分区域的框，可对特定区域运行自动检测。
引导行为
边界框的强大之处在于引导每个元素的行为。框选元素后，您可以为其分配交互行为，这些行为将反映在生成的代码或线框图中：
打开模态框
点击该元素打开模态框/对话框。指定模态框应显示的内容。
导航到部分
该元素作为链接或按钮，导航到应用的另一个页面或部分。
切换内容
该元素显示或隐藏相关内容——下拉菜单、手风琴、可展开面板。
表单提交
该元素触发表单验证和提交逻辑。
自定义操作
定义任何自定义行为描述，AI 将生成相应的事件处理程序和逻辑。