ShapeShift Engine 形动引擎

基于微分学的 Web 图形排布工具。用户通过绘制多边形，并提出对多边形“重合”“不重合”的需求，ShapeShift Engine 会基于梯度下降的方式将多边形平移，生成用户需求的排布。您可以点击这里试用。

本地构建

1. 克隆本项目，进入项目目录。
2. 使用 npm install 安装依赖。
3. 运行 npx vite build 进行网页构建，构建文件会写入 dist 目录。
4. 部署 dist 目录中的文件。下面提供了两种常见的轻量级部署方式：
   • 使用 Python 部署：执行 python -m http.server <port>。将 <port> 替换为目标端口。
   • 使用 http-server 部署：通过 npm install -g http-server 全局安装 http-server，执行 http-server -p <port> -g 启动服务器。将 <port> 替换为目标端口。
5. 部署完成后，使用浏览器访问 http://localhost:<port>。将 <port> 替换为目标端口。

使用方法

绘制多边形

点击 New Polygon 按钮开始绘制多边形，在画布上按多边形顶点顺序点按，即可绘制。再次点按该按钮完成绘制。注意：输入多边形须为简单多边形（边与边之间不能相交，不能包含孔洞）。

完成绘制后，画布会为多边形分配编号，在右侧列表上可以点击编号，左侧画布上对应多边形会闪烁。

添加文本

在 Enter text 文本框输入文本，输入字号和字体（请使用字体英文名，例如黑体 SimHei、宋体 SimSun），点击 New Text 按钮后会在随机位置添加文本。

您也可以在选择字号和字体后从后缀为 txt 文本文件导入文本，上传的文本文件中的每行会被视作一个文本块导入。

编辑排布方案

在 Polygon Relation Editor 中可以编辑多边形排布方案。您也可以在“高级选项”中启用原先输入多边形关系的输入框。

通过输入框编辑关系（不建议）

在 Do not overlap 输入框输入希望不重合的多边形编号，格式为：[[关系 1], [关系 2], [关系 3]]，例如 [[0, 1], [1, 2]] 表示希望 多边形 0 与 多边形 1不重合，多边形 1 与 多边形 2 不重合。

在 Overlap 输入框输入希望重合的多边形编号，格式与 Do not overlap 相同。

在 Fix 输入框输入希望固定住的多边形编号，格式为：[编号，编号，编号]，例如 [0, 1] 表示 多边形 0 与 多边形 1 在操作过程中不被移动。

导入导出文件

本应用允许用户导入或导出 JSON 文件，绘制完成后点按 Download JSON 即可导出 JSON 文件，未来需要时点按 Import JSON 按钮再次导入，可以继续先前未完成的工作。另外可以根据需要编写程序生成 JSON 文件导入本应用进行多边形排布。

完成排布操作后，点击 Download SVG 即可下载当前多边形布局至 SVG 文件以便在其他设计软件中继续编辑。

执行排布

完成前两步后点击 Process 即可在画布上按需求生成对多边形的排布。计算过程中按钮上的文字会变成 Processing...。