axure怎么实现标注_Axure教程：为图片添加标签

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

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

一、功能分析

鼠标点击哪，标签打在哪——需要用到鼠标指针方面的函数，并结合中继器的增添动作(难点)

修改编辑标签的内容——中继器编辑功能

删除标签——中继器删除功能(难点)

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

二、元件准备

背景图片：bg

中继器：

tag 设置如下：

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

中继器内部元件：tag_show

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

bg+tag 组合成动态面板 panel

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

三、实现

1. 鼠标点击哪，标签打在哪

(1)在做动作之前先分析以下中继器的加载规律

如图，虚线框是中继器在纵向排列时默认情况下增加行的路径，而我们要的是黄色、蓝色实心框的随意路径，就是要求得坐标(x2、y2)与(x3、y3)的值。

这里需要用到鼠标指针方面的函数 Cursor.x、Cursor.y，这两个值是页面的绝对坐标值。

因为中继器 tag 及其行的元件 tag_show 是居左上，即 tag.x=0、