您现在的位置:   首页 >> 新闻中心 >> 原型设计

Axure教程:为图片添加标签

发布人:www.yunke.ai 发布时间:2021-01-01 142 次浏览

本文介绍如何利用中继器实现给图片打标签的效果,enjoy~

通常来说,有动态内容变化就要用到函数,有相同的数据增添删改的效果就要用到中继器,所以这篇文章就讲的是利用中继器实现给图片打标签的效果。

一、功能分析

  • 鼠标点击哪,标签打在哪——需要用到鼠标指针方面的函数,并结合中继器的增添动作(难点)
  • 修改编辑标签的内容——中继器编辑功能
  • 删除标签——中继器删除功能(难点)

以上几个功能看似很简单,其实很有逻辑难点。

二、元件准备

背景图片:bg

中继器:

tag 设置如下:

repeater中text存文本内容、x存横坐标、y存竖坐标、v存可见状态(1可见、0不可见)

中继器内部元件:tag_show

局部变量:n  初始值为1(可以用一个矩形承载这个局部变量)

bg+tag 组合成动态面板panel

键盘:keyboard 初始状态“隐藏”(由输入框 input、确定按钮 ok、删除按钮 del组成)

三、实现