效果

通常按钮为方形,将 不规则图形 图片按钮结合,能实现不规则外观。或者说让任意图形,具备点击交互功能。如下所示:

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_图形界面

 在线编辑(登录后完整功能)

步骤

新建页面

略。参见 1新建。命名为"任意绘制按钮"

拖入组件

拖入 图片按钮组件、 信息提示函数

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_大屏可视化_02

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_页面嵌套_03

信心提示函数设置 输入(组)设置"您点击了图片按钮" 提示类型选择提示

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_UIOTOS_04

完整步骤如下:

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_WEB组态_05

新建部件

  1. 点击左下角按钮切换到模式。
  1. 组件-其他-更多,右键新建部件,并命名。

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_大屏可视化_06

  1. 绘图
  • 左下角切换到模式,

完整步骤如下:

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_WEB组态_07

粘贴路径

不规则图形页面路径粘贴在 图片按钮 图标路径中。

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_图形界面_08

连线

按钮触发函数执行无关联属性( 图片按钮)→  执行 信息提示

UIOTOS文档:不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_页面嵌套_09


至此,设置完毕,可查看最终效果