使用文档

了解如何使用 Collab Tools

简介
关于本网站/工具

Collab Tools 是一个专门为 osu! 好友面基 / Collab（实际上用途会更广泛）制作的工具集网站。

其实在这之前，有很多相关的功能已有其他工具或项目实现了，但我依然选择去尝试做一下，原因如下：

  • 灵活：作为 Next.js 构建的前端项目，各平台只需浏览器访问即可使用，同时也支持自部署，简单快速；
  • 安全：不想让除 Collab 成员以外的其他人知道？没问题！
  • 集成：是希望满足 Collab 图制作全过程的项目呢（虽然目前依然还差很远）；

该项目的源代码可在 GitHub 上查看，在此期待各位的反馈或贡献~

ImageMap 编辑器
快速制作映射图

osu! 的个人资料有对 ImageMap（图片映射）的BBCode (osu! wiki)支持，但图像中各个区域的位置与大小依然需要手动定义。

目前在制作 ImageMap 时，多数用户会选择使用图像编辑器，结合区域四角的坐标进行计算；或者用浏览器的开发者工具辅助定位映射区域，在区域较多的情况下会比较困难，同时需要相当一段时间精确调节各种参数。

你可以使用本工具提供的交互界面，在短时间内以“所见即所得”的方式轻松制作 ImageMap。

1. 上传图片

点击"上传图片"按钮，选择需要使用的图片文件。

2. 管理区域

使用以下工具在图片上创建、移动或删除矩形区域：

选择工具

点击选中现有区域，查看并编辑其对应属性。

移动工具

将已创建的区域拖动到新位置。

创建工具

在预览区拖动创建新的区域。

删除工具

点击删除已定义的区域。

3. 设置属性

为每个区域设置链接地址和描述文本，也可继续调整位置与大小。

4. 复制代码

点击“复制代码”按钮，按需获取生成的 HTML 或 BBCode 代码。

使用生成的代码
在个人资料或其他地方使用
在其他网站使用 ImageMap 前，需要先将图像上传到支持的平台（图床）。

使用 BBCode

  1. 粘贴代码到资料编辑区；
  2. 将生成代码中的 图像链接 替换为实际上传图像的链接；
  3. 预览资料，测试 ImageMap 是否正常显示，各区域是否对应正确——大功告成！

使用 HTML

  1. 粘贴 HTML 代码，其应包含 <img> 与 <map> 两个标签；
  2. 按需修改 src（图像链接）与 alt（图像备注）属性；
  3. 预览页面并进行测试——大功告成！