基于微分学的 Web 图形排布工具。用户通过绘制多边形，并提出对多边形“重合”“不重合”的需求，ShapeShift Engine 会基于梯度下降的方式将多边形平移，生成用户需求的排布。您可以点击这里试用。
- 克隆本项目，进入项目目录。
- 使用
npm install安装依赖。 - 运行
npx vite build进行网页构建，构建文件会写入dist目录。 - 部署
dist目录中的文件。下面提供了两种常见的轻量级部署方式：- 使用 Python 部署：执行
python -m http.server <port>。将<port>替换为目标端口。 - 使用 http-server 部署：通过
npm install -g http-server全局安装 http-server，执行http-server -p <port> -g启动服务器。将<port>替换为目标端口。
- 使用 Python 部署：执行
- 部署完成后，使用浏览器访问
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...。