前端-远程-1个月

项目编号：【41056】
项目名称：鱼饵在线定制器（HTML5 Canvas 绘图工具）

本项目需要开发一个嵌入 WordPress 的在线绘图定制器，用户可在渔饵线框区域内进行自定义上色、绘画、添加文字与图片等操作。核心功能包括：

⸻

① 绘图工具（重点功能）
• 两种画笔（仿 PS）
• 硬边圆笔刷（Hard Round）
• 柔边圆笔刷（Soft Round，带 Feather/Softness 可调）
• 画笔支持：大小可调、透明度可调
• 支持 Undo / Redo
• 支持清空绘画层（重置后只保留渔饵线框及底纹）
• 绘画区域必须被严格限制在 SVG Mask（鱼饵线框区域） 中，不能绘制到外部

⸻

② 多图层系统（Canvas + 图片混合）

需实现独立图层结构：
1. Layer1：鱼饵线框（SVG）+ 遮罩区域（Mask）
2. Layer2：底纹1（电镀）
3. Layer3：底纹2（烫金）
4. Layer4：底纹3（花纹图案，自动裁切，不超出绘制区域）
5. Layer5：用户绘画层（Canvas）
6. Layer6：用户上传图片（支持拖拽/缩放/旋转）
7. Layer7：覆盖层（彩片/条纹等选择性覆盖，也支持拖拽/缩放/旋转）
8. Layer8：眼睛层

要求：
• 图层之间互不干扰
• 画笔绘制永远属于 Layer5
• 各层透明度可调

⸻

③ 文本工具
• 插入文字，可移动、缩放、旋转
• 多字体选择
• 可添加特效：浮雕（Emboss）、斜面（Bevel）、描边、阴影等

⸻

④ 导出与提交（前端 + 后端）

用户完成定制后点击“提交”，需实现：

前端生成：
• PNG 图片（透明背景，包含所有图层）
• JSON 文件（保存图层状态、绘制路径、用户选择等）

前端与后端交互：
• 将 PNG + JSON + 用户信息（姓名/邮箱/电话/备注等）
POST 到 WordPress 后台

后端（WordPress）需实现：
• 保存 PNG 到媒体库或指定目录
• 保存 JSON 到数据库
• 保存用户填写的资料
• 后台创建一个列表页面可查看所有用户提交记录

⑤ 支持多产品渔饵模型（至少几十款）
• 不同产品有不同 SVG 线框与遮罩
• 通过 URL 参数切换，如：
/design?model=32

⑥ WordPress 嵌入

需提供一个可在 WordPress 中使用的嵌入方式（iframe 或 shortcode 均可）。

参考网站：https://www.vipertackle.com/custom-crank/paint?i=32