使用文档
了解如何使用 Collab Tools
Collab Tools 是一个专门为 osu! 好友面基 / Collab（实际上用途会更广泛）制作的工具集网站。
其实在这之前，有很多相关的功能已有其他工具或项目实现了，但我依然选择去尝试做一下，原因如下：
- 灵活：作为 Next.js 构建的前端项目，各平台只需浏览器访问即可使用，同时也支持自部署，简单快速；
- 安全：不想让除 Collab 成员以外的其他人知道？没问题！
- 集成：从小功能开始，逐步实现覆盖 Collab 流程的各步骤；
该项目的源代码可在 GitHub 上查看，在此期待各位的反馈或贡献~
该功能受到众多 osu! 机器人的启发，所在群用户可以使用一条短小精悍的命令生成用户卡片。 不过如果恰巧没法接触到部署这个功能的实例，或者单纯不想让群里的其他人知道这事...可能会有些麻烦。
为了避免如此尴尬，你可以试试用此工具偷偷生成点 Collab 成员的小卡片——欸嘿嘿，不要告诉他们哦。
实验性功能
该工具尚处于活跃开发阶段，可能会出现意料之外的大变动，敬请留意。
小提示
该工具生成的卡片样式未必与 osu! 机器人的输出完全相同，因为二者在代码上没有任何关系。
如果你想对现有样式做些改善，或者有新的想法，欢迎到项目仓库页提交 Issue 或 PR 做出贡献。
为了生成头像卡片，你需要：
- 用户的头像链接，对于 osu! 官服应该类似于
https://a.ppy.sh/<用户 ID>； - 用户名；
- 如有需要，可以填写两位国家/地区码，在卡片中显示国家/地区旗；
- 选择样式、预览生成的卡片、下载图像——大功告成！
osu! 的个人资料有对 ImageMap（图片映射）的BBCode (osu! wiki)支持，但图像中各个区域的位置与大小依然需要手动定义。
目前在制作 ImageMap 时，多数用户会选择使用图像编辑器，结合区域四角的坐标进行计算；或者用浏览器的开发者工具辅助定位映射区域，在区域较多的情况下会比较困难，同时需要相当一段时间精确调节各种参数。
你可以使用本工具提供的交互界面，在短时间内以“所见即所得”的方式轻松制作 ImageMap。
1. 上传图片
点击"上传图片"按钮，选择需要使用的图片文件。
2. 管理区域
使用以下工具在图片上创建、更改或删除矩形区域：
选择工具
点击选中现有区域，查看并编辑其对应属性，并进行移动、大小调整。
创建工具
在预览区拖动创建新的区域。
删除工具
点击删除已定义的区域。
3. 设置属性
为每个区域设置链接地址和描述文本，也可继续调整位置与大小。
小提示
- 使用 作为 ID 填入 填入对应 UID 的资料链接；
- 使用 作为用户名填入 填入对应用户名的资料链接。
所有区域在区域列表中统一显示，可以拖动左侧的控制柄调整所在层级。
与此同时，你可以在图像属性中修改要使用的图像地址与 ImageMap 名称（这个名称只会在 HTML 代码中用到），以便生成的代码直接使用这些属性。
4. 复制代码
点击“复制代码”按钮，按需获取生成的 HTML 或 BBCode 代码。
使用 BBCode
- 粘贴代码到资料编辑区；
- 将生成代码中的
图像链接替换为实际上传图像的链接； - 预览资料，测试 ImageMap 是否正常显示，各区域是否对应正确——大功告成！
使用 HTML
- 粘贴 HTML 代码，其应包含
<img>与<map>两个标签； - 按需修改
src（图像链接）与alt（图像备注）属性； - 预览页面并进行测试——大功告成！
注意
- 导出编辑器配置时，编辑的图像不会随之导出，导入时也是如此。因此在导入配置前，请确保加载了适合的图像。
- 从配置导入更改时，已有区域会被覆盖，配置文件中已有的设置会覆盖现有值。
全局
- Alt + 数字键：切换编辑模式（按从 1 开始的对应数字序）
选定区域时
- Del：删除选定区域
- Ctrl + D：创建副本
- - / =：移至下层/上层
- 方向键：移动选定区域
- 同时按下 Shift：精细移动（每次 1 像素）
- 同时按下 Ctrl：快速移动（每次 20 像素）