VAPS XT入门系列17:实现界面双击放大和拖拽移动

系列索引:VAPS XT4.2.1入门系列索引

实现效果为:有个多个界面,移动其中一个到另一个界面上,那么两个界面自动交换,实现拖拽移动。

先创建一个根工程。

new

填写根工程路径和名称

dir

新根工程效果如下:

display

右击工程名称,添加新子项目

sub

选择container,并填写路径和名称

new

创建完成之后会自动显示属性界面

property

默认是只有Position属性,按照规则添加Width/Height属性。

双击Format会显示可视的界面,当然新工程是空的。

widget

添加子界面如下:

property

  • PosBeforeDrag为CoordData(坐标)类型,用于保存之前位置状态。
  • PopUpPart_1为PopUpPart类型,表示此组件界面可以位于所有窗口的最上方。
  • RectActiveArea用于捕捉鼠标事件
  • SimpleGroup会将其内部的子界面打包成一个整体,这样操作方便。
  • RectWidthHeight带有宽高属性的矩形界面组件。

至此,工程方面的操作结束了。

简单拖拽

本部分需要实现窗口的拖动,松开后自动回到原来位置。

默认的空白的状态图为:

state chart

点击工具栏的状态图标,添加状态

state1

默认状态是一个点,需要给他展开。

resize

这个比较简单,鼠标放在那个点上,鼠标变为十字架型是往左上角拖拽就可以了。

然后双击State_1修改状态名称。

然后再添加两个状态和三条线。

full

最左侧的点线是初始状态线(Initial Transition),右侧的两条线为普通的转换线(Transition)。

Normal->Press

先修改Normal->Press的状态转移:

normal2press

Trigger表示满足小框条件就触发此状态转移。

RectActiveArea_1.evPress(e)表示RectActiveArea捕获到鼠标的Press事件,e表示捕获的坐标。

Action表示触发之后的操作。

PosBeforeDrag.Value=e;将按下那一瞬间的坐标保存下来。

简单来说,点击界面时保存原始坐标。

Press->Normal

本状态就是鼠标松开后的状态。

双击编辑:

release

RectActiveArea_1捕获鼠标释放事件(evRelease)。

然后执行将界面移动到原点:SimpleGroup_1.Position为中心点坐标。

简单来说,释放鼠标时界面自动回到坐标原点。

状态内部转换(Internal Transitions)

在软件的底部有Internal Transitions标签页,双击Add左侧的白色空白区域。

拖拽的基本操作是,鼠标按下界面然后在不松开的情况下移动鼠标,那么Press状态内部也需要处理一下。

internal

RectActiveArea_1捕获到拖拽事件时(evDrag),将计算后的坐标赋值给SimpleGroup。

数据流向(Data Flow)

dataflow

.Width/.Height/.Position是本子项目的最父层属性,将这些属性值赋值给子界面的变量。

操作效果如下:

测试效果-B站

会发现界面被锁定在一定范围内。

修改一下RectActiveArea的参数

property

效果:

拖拽松开返回效果-B站

拖拽至指定位置

上一部分是拖拽释放后返回原点,本部分是鼠标在哪释放界面就停在哪。

将Press->Normal的Action替换为:

1
2
SimpleGroup_1.Position.X=e.X-PosBeforeDrag.Value.X;
SimpleGroup_1.Position.Y=e.Y-PosBeforeDrag.Value.Y;

效果为:

拖拽停留效果-B站

双击放大

首先,添加一个双击(DoubleClick)状态,以及Normal到DoubleClick双向链接。

doubleclick

Normal->DoubleClick

这个转换就是双击界面后的效果。

forward

简单来说,双击界面时把界面置顶。

DoubleClick

双击后的效果

double

简单的测试程序,把界面移至坐标顶点,然后宽高直接乘2。

DoubleClick->Normal

放大后的界面再次双击时回到原来状态。

back

界面移至坐标原点,宽高直接除以2。(偷懒,实际应该是保存之前的状态值,此时恢复。)

效果如下:

双击效果-B站

完整工程在VAPS_XT中的Back2Pos。