本文介绍如何利用中继器实现给图片打标签的效果,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、