荣小菜补钙记第59期_LabVIEW之二维图片拖拽与缩放 Demo

labview

荣小菜补钙记第59期_labview之二维图片拖拽与缩放

同步更新于 WeChat：荣小菜在补钙

大家好，我是荣小菜，本期用一个小Demo讲解在二维图片控件中实现图片拖拽的缩放。

1. 缩放功能

实现二维图片缩放功能通过设置图片控件的“缩放因子”属性实现，通过触发鼠标滑轮事件，上滚时Delta值为1，下滚时Delta值为-1，每次滚动缩放因子变化|0.1|，设置缩放因子上限为10(放大10倍)，下限为0.1(缩小10倍)。

滑轮动作

2. 拖拽功能

拖拽主要由鼠标按下，鼠标移动，鼠标释放3个动作实现。

先看鼠标按下，鼠标按下后进入可拖拽状态，并通过当前原点坐标和鼠标坐标计算两者相对坐标，“相对位置”后续将继续使用。

注意1：原点坐标为图片左上角坐标。

注意2：本Demo实现两种拖拽方式，可选择是否反转。

鼠标按下
实现图片移动的关键是根据鼠标移动修改图片原点位置
鼠标移动时，使用“当前鼠标坐标”与上一步骤中计算出的“相对位置”即可算得图片“原点坐标”。

实现反转拖拽，则将减数和被减数位置互换即可。

鼠标移动
完成拖拽后，鼠标释放，此时程序进入“不可拖拽”状态，鼠标移动事件可以被触发，但不执行相关逻辑。当然，比起这种使用布尔状态量的方法，我们也可以通过动态注册、注销事件的方式实现，详见LabVIEW自带范例“动态事件生成”。

鼠标释放
3. 复用性
稍微做一些复用性的设计，这里简单设计三个可重用Vi，分别为“INIT”、“CORE”和“STOP”，用户想要让某图片控件具备缩放和拖拽功能，只需使用这3个函数即可(见MAIN函数)。需要注意的是，每用一个INIT函数和CORE函数，必须使用一个STOP函数来停止。下面进行详细讲解。

MAIN程序框图

先看“INIT”函数，关键点为通过控件引用注册系列动态事件，每次调用该函数即可为不同控件注册相关功能事件；另一关键点为注册STOP用户事件，我们可以通过触发该事件来停止CORE中的循环(该设计在操作者框架中十分常用)。

INIT后面板
调用INIT后必须接着调用CORE函数，该函数主要功能在第1、2节中已经讲解，此处重点是实现动态事件的逻辑流程和响应STOP用户事件的停止流程。当STOP用户事件触发时，销毁注册的动态事件和用户事件。

CORE后面板
最后看STOP函数，简单但关键，必须调用，产生STOP用户事件，是程序顺利停止的关键。

STOP后面板
4. Demo演示
下面进行Demo演示，缩放、正向拖拽、反向拖拽。

Demo
本期就到此结束啦，测试Demo已上传，感兴趣的同学可以看看，也期望各位大神能帮忙前来指教，进一步分享更多更有趣的程序。
分享开源免费，共同学习进步^_^