滑块控件 | Slider Control

在本教程中,你将学习如何使用动态面板元件制作一个可以拖动的滑块控件。【原型预览】

1、元件设置
  1. 打开一个新的RP文件,在画布中打开Page 1
  2. 元件面板中拖拽一个水平线元件到画布中,设置它的宽度为400,线段宽度为5。
  3. 拖拽一个圆形元件到画布中,设置它的高度和宽度均为25。
  4. 选中水平线和圆形,点击界面顶部工具栏中的居中对齐图标,然后在点击中部对齐图标。
  5. 在圆形上点击鼠标右键,在弹出的右键菜单中选择转换为动态面板

注意:动态面板是唯一具有拖动事件的元件,所以任何你想拖动的元素,都要放入动态面板中。

2、使用动态面板的拖动时事件来移动它
  1. 选中动态面板,点击交互面板中的新建交互
  2. 在弹出的列表中选择拖动时事件,然后选择移动动作。
  3. 目标下拉列表中选择当前元件
  4. 在移动下拉列表中选择跟随水平移动。这样在Web浏览器中,动态面板就可以跟随你的鼠标拖动,在水平方向上移动。
  5. 先不要关闭这个动作。
3、给移动动作添加边界

注意:你可以在此了解移动边界的原理:移动动作边界。

  1. 点击移动动作底部的更多选项
  2. 边界下,点击添加界限

左边界

  1. 在出现的新的边界行中,在第一个下拉列表中选择左侧。(这是指动态面板左边缘的X坐标值。)
  2. 在中间的下拉列表中,选择大于等于>=)。
  3. 点击第三个字段右侧的fx图标以打开编辑值对话框。
  4. 在对话框底部,点击添加局部变量
  5. 在局部变量行的第一个字段中,设置变量名称为“LineWidget”,在第二个字段中,选择元件,在第三个字段中,选择线段元件。(这个局部变量就代表了这个线段的整体。)
  6. 在对话框上面的文本框中,输入:[[LineWidget.left]]。(这个表达式代表了线段元件左边缘的X坐标值。)
  7. 点击确定按钮关闭编辑值对话框。

我们刚刚添加的边界,左侧 >= [[LineWidget.left]],意味着动态面板的左边缘,只能移动到大于或等于线段元件左边缘X坐标值的地方。换句话说,就是它不能移动到超出线段元件左边缘的位置。

右边界

  1. 再次点击添加界限,在出现的新的边界行中,在第一个下拉列表中选择右侧。(这是指动态面板右边缘的X坐标值。)
  2. 在中间的下拉列表中,选择小于等于<=)。
  3. 点击第三个字段右侧的fx图标以打开编辑值对话框。
  4. 在对话框的底部,点击添加局部变量
  5. 在局部变量行的第一个字段中,设置变量名称为“LineWidget”,在第二个字段中,选择元件,在第三个字段中,选择线段元件。(这个局部变量就代表了这个线段整体。)
  6. 在对话框上面的文本框中,输入:[[LineWidget.right]]。(这个表达式代表了线段元件右边缘的X坐标值)
  7. 点击确定按钮关闭编辑值对话框。

我们刚刚添加的边界,右侧 <= [[LineWidget.right]],意味着动态面板的右边缘,只能移动到小于或等于线段元件右边缘X坐标值的地方。换句话说,就是它不能移动到超出线段元件右边缘的位置。

4、预览交互

预览页面,左右拖动小圆圈,它就会沿着线段元件移动,但是你不能将它拖动到超出线段元件左边界或右边界的位置。

附加信息和提示

纵向滑块【原型预览】

创建一个纵向滑块,按照上面的步骤进行操作即可,但是有些地方需要作出调整。

  1. 用垂直线代替水平线
  2. 移动动作下的移动下拉列表中,选择跟随垂直拖动。这样在Web浏览器中,动态面板就可以跟随你的鼠标拖动,在垂直方向上移动。
  3. 移动的边界设置为:
顶部 >= [[LineWidget.top]]
底部 <= [[LineWdiget.bottom]]
评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注