一行多按钮拼版 · 整图 + 热区坐标

把「标题 + 一行多个按钮 + 说明」画进 一张整图,上传给「多热区切图」模块,按下方坐标框热区、逐个设链接。

本次新增:① 标题(7 种艺术字 + 任意颜色,位于按钮行上方)② 按钮可上传自定义图,按每行个数自动缩放 ③ 整图 8 种个性外框 + 颜色/粗细/圆角 ④ 独立「副标 / 说明文字」输入框,全部文字颜色可自定义 ⑤ 整图底色自定义色与渐变 ⑥ 方案记录:存一条、点一下就恢复,只改要改的地方 ⑦ 可修改格式:导出工程文件 .json(回到本工具继续改)和可编辑 SVG(文字是文本,可用矢量软件直接改字)⑧ 行数自定义 1~20 行 ⑨ 云端方案库:方案记录同步到 Cloudflare KV,换电脑继续用 ⑩ 按钮主文字 / 副标分别设字间距(−5~30px,支持负值收紧)⑪ 左右边距新增「实际留白」读数与「一键贴边」。

1 · 画布与排布

画布宽度
每行个数
行数
或直接输入 1~20 行
按钮圆角 R
左右边距
—
按钮间距
按钮高度
行间距
上下留白

按钮宽度 =(可用宽 − 间距)/ 每行个数,改「每行个数」时按钮与自定义图会自动等比缩放。行数支持自定义 1~20 行(上方数字框直接输入),快捷按钮给出常用值;行数多导致整图超过 2400px 时,调小「按钮高度」或拆成多张图。按钮高度最低 50px,调矮时记得同步调小文字字号和圆角;若提示「高度需 144~2400」,把上下留白调大一点即可凑够下限。
PC 端「多热区切图」模块要求固定宽度 1440(高度 144~2400、≤10MB):请选「1440 PC」,750 只用于手机端、1920 也不行;导出后不要再放大成 3000 宽,否则后台会提示「含不符合比例要求的图片,请先进行裁剪」。
已有 3000 宽的旧图?打开「图片宽度一键转 1440」→(等比缩放,不裁掉内容)。

2 · 标题(艺术字,位于按钮行上方)

可多行;标题会做进图片,改字需重新导出上传。

艺术字样式
字体 字重
标题字号
主色
第二色
描边色
描边粗细
字间距
对齐
下方间距

「渐变 / 立体 / 双色」用第二色;「描边 / 渐变描边」用描边色。所有颜色都可点色块自由取色。

3 · 副标 / 说明文字(独立输入框)

这里填整块说明文字(支持多行),就是参考店那种 ①②③ 小字;不需要可清空。

放置位置
字号
文字颜色
对齐
与内容间距

4 · 按钮文案(所有文字颜色可自定义)

关掉=纯底图(配合「图文导航」类模块后台填字)

每行一个按钮:主文案 | 小字副标(副标可省略)。数量不足自动补「入口 N」。

主文字号
主文字距px
副标字号
副标字距px
主副间距两行基线距 ≈ 48px
主文字色
副标颜色

按钮副标(| 后面的小字)颜色也能自定义,不再固定灰色。主文字与副标的字号、颜色、字间距各自独立;字间距可填负值收紧,范围 −5~30px。字距过大使文字超出按钮宽度时会自动压窄,此时同步调小字号即可。「主副间距」调的是主文案与副标两行之间的上下距离:正值拉开、负值收紧,以两行中间为轴向上下均分,不改变原有居中布局,只对带副标的按钮生效;右侧实时显示两行基线距。间距过大可能超出按钮,请配合按钮高度调整。

5 · 按钮自定义图(按每行个数自动缩放)

图片模式
统一图(所有按钮用同一张):
逐格图(多选,按按钮顺序 1→N 分配):
尚未上传图片
适配方式
图片缩放
图片透明度

图片会按当前按钮宽高自动铺入并裁圆角;改「每行个数」后自动跟着变大/变小。图片会随「方案记录」和「工程文件」一起保存;未存档的临时编辑刷新后需重新上传。

6 · 配色与版本(底色可自定义 / 渐变)

按钮配色
版本
整图底色
自定义底色
渐变第二色选「渐变」时生效
渐变方向
底色不透明
自定义填充按钮配色选「自定义」时生效
按钮描边色
描边粗细

7 · 整图外框(8 种个性边框)

外框样式
边框颜色
第二色渐变 / 双线 / 角标用
边框粗细
外框圆角
离边距离
框内边距
框内底色

外框会画在最上层,标题、按钮、说明都包在里面。注意:启用外框后,内容左右还会额外内收「离边距离 + 框内边距 + 边框粗细」三层留白,它们和「1 · 画布与排布」里的左右边距是相加关系——所以左右边距设 0 仍可能有间距。想让按钮贴边,把这三项调小,或直接点卡片 1 的「↔ 一键贴边」;上方「实际左右留白」会实时显示总和。

8 · 导出

批量包内附 说明.txt(尺寸 + 全部参数 + 热区坐标)。

两种「可修改格式」的区别:
· 工程文件 .json:保存全部参数、文案、自定义图。回到本工具点「导入工程文件」即可继续调,只改要改的那几处再导出 PNG,效果与原图 100% 一致。推荐。
· 可编辑 SVG:文字是真正的文本节点,可用 Illustrator / Inkscape / Figma 直接改字,不必打开本工具。字体依赖电脑、艺术字会有细微差异,且淘宝后台不收 SVG,改完需另存为 PNG 再上传。

9 · 方案记录(存一条,点一下就能改)

当前:临时编辑(未存为记录)
记录名称

点记录(或「载入修改」)即可恢复当时全部参数、文案和按钮图,只改变动的部分;改完点「更新当前记录」覆盖,或改个名称再「保存为记录」另存一条。

☁ 云端方案库(Cloudflare KV · 换电脑 / 换浏览器继续用)
API 地址
方案库 ID 相当于秘密路径,请设成不易猜到的字符串
访问口令
云端:尚未连接

「保存到云端」把当前全部记录(含缩略图、参数、按钮图)写进 KV;「从云端载入」把云端记录合并进本地列表(同 ID 覆盖、本地独有保留)。本地记录始终保留,云端用于跨设备同步。访问口令首次写入即设定且不能在页面里清除,请记牢;不勾选「记住本机设置」时刷新后需重填口令。

记录 vs 工程文件:记录存在本浏览器里,随开随点、最方便,换电脑或清缓存会丢(可同步到上方云端方案库);工程文件是独立 .json 文件,可备份、可发给别人、换设备用「导入工程文件」打开。建议重要方案两个都留一份。