必须进入应用级UI定制流程才能让画板输出图片支持交互;创建空白应用→复制工作流→搭建UI并绑定图片组件数据源→配置点击跳转、长按下载或弹窗编辑→调试样式后发布。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

要在扣子平台中让画板节点输出的图片真正适配用户界面、支持点击跳转或动态响应输入,必须脱离默认对话窗口,进入应用级UI定制流程——这一步不做,所有排版都只是静态快照,无法承载交互逻辑。
创建带画板输出的应用容器
点击左侧「项目开发」→「创建」→选择「创建应用」→选「空白应用」→填写名称(如“海报生成器”)、描述、上传图标→点击「确定」。
应用创建后,左上角「工作流」资源区点击「+」→从资源库中选择你已配置好画板节点的工作流→点击「复制到项目」。此时工作流被导入应用内,但尚未与界面绑定。
【必须复制而非引用】 直接引用原工作流会导致后续UI绑定失败,复制后才能在当前应用中编辑变量映射关系。
搭建画板结果展示页
在应用编辑界面顶部点击「用户界面」→选择「小程序和H5」→点击「开始搭建」。
中间预览区即为手机竖屏界面,右侧组件面板拖入一个「图片」组件到画布中央——这是画板输出图的唯一承载容器。
选中该图片组件,在右侧属性栏找到「数据源」→点击「绑定变量」→下拉选择你复制进来的工作流→展开其「结束节点」→勾选输出变量(如 image 或 final_image)→确认绑定。
这一步完成后,图片组件将自动接收画板节点渲染出的最终图像URL并实时显示,无需额外代码。
为画板内容添加交互响应
方法一:点击跳转触发新工作流
选中已绑定画板输出的图片组件→右侧属性栏开启「可点击」开关→在「点击事件」中选择「触发工作流」→从下拉列表中选取另一个已发布的海报编辑工作流(例如“重新生成+换风格”)→保存。
方法二:长按唤起下载菜单
同个图片组件→右侧属性栏找到「长按事件」→选择「下载图片」→启用后,用户长按画布中生成的海报即可直接保存到本地相册。
方法三:叠加浮动按钮实现二次编辑
在图片组件上方再拖入一个「按钮」组件→设置文字为「调整文字」→点击事件选「打开弹窗」→新建弹窗页面→放入文本输入框绑定画板中标题变量(如 {{title}})→提交后触发含画板节点的更新工作流→返回刷新主图。
注意:弹窗内输入框必须绑定上游变量,否则修改不生效;且画板节点需在工作流中启用「允许变量热更新」选项(默认关闭)。
调试与发布
第一步:点击右上角「预览」→用手机扫码打开真机预览,上传测试文案触发整条工作流,确认画板输出图完整显示且点击/长按行为符合预期。
第二步:若图片模糊或错位,返回用户界面编辑器→选中图片组件→右侧「样式」中手动设置「宽高比」为「9:16」或「1080×1920」→关闭「自适应缩放」→启用「居中裁剪」。
第三步:全部验证通过后,点击右上角「发布」→填写版本号(如 V1.2)和本次变更说明(如“新增长按下载+弹窗编辑”)→确认发布。


















