学习如何使用动态面板小部件制作可拖动的滑块控件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
小部件设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
- 打开一个新的RP文件，然后在画布上打开Page 1。
- 将水平线窗口小部件从库窗格拖到画布上。将其宽度设置为400，将其边框厚度设置为5。
- 将一个椭圆小部件拖动到画布上，并将其宽度和高度都设置为25。
- 选择直线和椭圆。单击界面顶部的居中对齐图标，然后单击居中对齐图标。
- 右键单击椭圆，然后在上下文菜单中选择创建动态面板。
注意：动态面板是唯一具有拖动事件的窗口小部件，因此任何要拖动的元素都必须放置在动态面板中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
移动动态面板及其拖曳事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
- 选择动态面板，然后在交互窗格中单击新建交互。
- 在出现的列表中选择拖动事件，然后选择移动动作。
- 在目标下拉列表中选择此小部件。
- 在移动下拉列表中，选择拖动x。在Web浏览器中拖动时，这将使动态面板沿X（水平）轴跟随光标。
- 请勿关闭操作。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
向移动动作添加边界文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
- 单击移动操作底部的更多选项。
- 在边界下，单击添加边界。
左边界文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
- 新出现的边界行，请在第一个下拉列表中选择向左。（这是指动态面板左边缘的X值）
- 在中间的下拉列表中，选择大于或等于。
- 单击第三个字段右侧的fx图标以打开编辑值对话框。
- 在对话框底部，单击添加本地变量。
- 在新的本地变量行的第一个字段中，将变量命名为LineWidget。在第二个字段中，选择小部件。在第三个中，选择line小部件。（此局部变量整体上是指行小部件）
- 在对话框的上部字段中，输入：[[LineWidget.left]]（此括号表示的是线控件左边缘的X值）
- 单击确定关闭编辑值对话框。
创建好的边界，左-大于或等于-[[LineWidget.left]]，这意味着动态面板的左边界只能移动到X值，该值大于或等于该行的X值 小部件的左边界。换句话说，它不能在页面上移动到行控件左边缘界以外的任何地方。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
右边界文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
- 再次单击添加边界。在出现的新边界行中，在第一个下拉列表中选择右键。（这是指动态面板右边缘的X值）
- 在中间的下拉列表中，选择小于或等于。
- 单击第三个字段右侧的fx图标以打开编辑值对话框。
- 在对话框底部，单击添加本地变量。
- 在新的本地变量行的第一个字段中，将变量命名为LineWidget。在第二个字段中，选择小部件。 在第三个中，选择line小部件。（此局部变量整体上是指行小部件）
- 在对话框的上方字段中，输入：[[LineWidget.right]]（此括号表示的是行控件右边缘的X值。）
- 单击确定关闭编辑值对话框。
创建好的边界，右-小于或等于-[[LineWidget.right]]，这意味着动态面板的右边缘只能移动到小于或等于该线的X值的X值 小部件的右边缘。换句话说，它在页面上的右移不能超过行控件的右边缘。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
预览互动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
预览页面并向左和向右拖动圆圈。 现在，它只能沿着线控件定义的路径移动，并且您不应将其拖动到线控件的左右边缘之外。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
附加信息和提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
垂直滑块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
要构建垂直滑块，请按照上述步骤进行以下更改：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/41684.html
- 使用垂直线代替水平线。
- 在移动动作的下拉列表中，选择拖动。在Web浏览器中拖动时，这将使动态面板沿Y（垂直）轴跟随光标。
- 对于移动动作边界，请使用：
top — is greater than or equals — [[LineWidget.top]] bottom — is less than or equals — [[LineWidget.bottom]]