Axure RP9——【元件函数】

元件函数 Element function

目录

Element function

 I.元件函数

II.窗口函数

III.鼠标指针函数

IV.字符串函数

---

 I.元件函数

举个栗子

1.实现 “放大”“缩小”功能

（1）从元件库拖一个矩形出来，并进行命名，颜色填充

（2）设置2个按钮，“放大”和“缩小”；并进行交互设置

单击时——设置尺寸——矩形图形（即矩形框的命名）

 

（3）点击右下角的fx进行函数设置：

实现点击放大按钮时，扩大原大小的两倍；

先插入局部变量，对元件进行设置，目标是矩形图形；

插入变量：元件——找到设置的长宽高，将this换成局部变量，再乘以对应的比例即可

（4）效果预览

 

II.窗口函数

窗口函数 （ Window function）

获取窗口在页面中的坐标位置、宽度、高度等参数。

【Window.width】：获取窗口的宽度

【Window.height】：获取窗口的高度

【Window.ScrollX】：获取页面横向滚动的当前坐标值

【Window.ScrollY】：获取窗口纵向滚动的当前坐标值

Eg:设置可以在浏览器内滚动的图片

（1）放置2个或多个动态面板的图片；

并进行坐标设置；（将两个都设置为(x0，y0)），宽度和高度设置一样就行（eg：宽1000，高500）

格式设置：右键此动态面板，取消选择自适应内容，选择固定到浏览器（左侧上方）；

（2）交互设置

进行设置前，先思考计算一下：

功能：

在页面内滑动时，可以自动从第一张图片末尾迭代到第2张图片显示；（和用下拉按钮不是一个观感哈！）

函数：

宽度：不用变，2个动态面板是一样的宽

高度：两张图片的宽和高（1000,500）；向下滑动时会产出位移差

第一张：宽不变；高度：会由原来的高度减去所移动的高度，即（500-window.scrollY）

第二张：宽不变；高度：会在上面的位移上继续；需要加上之前的图片高度再减；即（1000-window.scrollY）

（3）交互设计：

在页面空白处，点击交互；

选择【窗口滚动时】——【设置尺寸】——【目标为2个动态面板】，进行尺寸设置；

（4）注意！

因为要实现整体的滚动；还需要再拖动一个元件到页面，对它的坐标设置的大一些，透明就行；

再预览即可！

 

III.鼠标指针函数

鼠标指针函数 （Mouse pointer function）

用户获取当前鼠标位置，使用如下：

Cursor.x:  获取鼠标的X坐标（cursor光标）

Cursor.y:  获取鼠标的Y坐标

DragX:获取被拖动控件的X位移

DragY:获取被拖动控件的Y位移

TotallDragX:获取被拖动控件的X位移的总和

​​​​​​​TotallDragY:获取被拖动控件的Y位移的总和

DragTime:获取被拖动控件的时间

Eg：设置一个弹框，且会随着鼠标的坐标跟随显示到对应的位置

（1）元素放置：

先放一大一小矩形到页面；并分别命名；

（2）设置交互

大矩形框：

单击时——隐藏小的矩形框；移动时——选择目标小矩形框——选择到达；需要用到鼠标窗口函数（设置函数）

小矩形框：先设置隐藏状态

单击时——隐藏

再将它置于底层

 

IV.字符串函数

https://www.bilibili.com/video/BV1AC4y1b75K?p=29