用UE自带的UMG组件实现类似图片查看器鼠标拖动缩放功能

因工作需要实现类似图片查看器的功能，我先用UE自身的UMG组件测试了一下，还是能基本实现的。

主要组件的嵌套方式可以参考下图红框中所示：

            

ScaleBox_0控制图片的缩放，SizeBox_0控制图片的位移。

1、鼠标拖动图片

要实现拖动功能必须把图片组件放在CanvasPanel画布下面，其次，画布必须Fill Screen撑满整个屏幕的。因为我调用的GetMousePositionOnViewPort函数是针对整个屏幕的，而且图片组件在画布下面的层级也方便设置位置。

                                      

 图片组件SizeBox_0的上一级画布确保是撑满屏幕的，再上一级的ScaleBox_0的Anchors要选择全屏

鼠标左键按下时先记录此时的鼠标位置并会激活定时器，每0.02s计算鼠标新的位置和旧位置之间的差值，只要把差值加到图片组件旧有的位置上就是图片组件新的位置，图片组件我这里用的是SizeBox_0。节点连接可以参考下图。我这里位置差值还乘以了图片缩放值的倒数，是为了让图片在放大后拖动时不会移动太快。

2、鼠标中键缩放图片

缩放是控制ScaleBox_0的RenderScale，当时觉得以整个屏幕的中心缩放图片效果最好，所以ScaleBox_0的锚点是全屏。缩放和位移是由2个分开的组件控制就不会相互影响。

节点比较简单，主要用一个变量记录下缩放值，给图片移动功能用，再设置下RenderScale属性就行。