UE4 二维地图的缩放与拖拽操作

2024-05-23 17:24:44

这里写自定义目录标题

UE4 二维地图的缩放与拖拽操作
- 拖拽和缩放
- - 基础搭建
  - 添加小图标
  - 地图缩放
  - 地图拖拽
  - 实现部分
  - 效果展示
- 小图标的重合显示
- - 效果展示

UE4 二维地图的缩放与拖拽操作

纯蓝图实现

拖拽和缩放

基础搭建

新建一个MainUI，CanvasPanel_Parent存放地图和CanvasPanel_Child，注意MainUI锚点为左上角，否则无法正确获取大小与位置，Map为要缩放和拖拽的地图，CanvasPanel_Child存放小图标，Map和CanvasPanel_Child锚点为铺满全屏，否则缩放会有问题，Image和TextBlock为固定ui，用来对比操作是否正确，不重要。

新建ChildUI，用做小图标，大小为20*20（可随意），只需要两张图片即可

添加小图标

position为图标位置的二维数组，ChildUISizeHalf为子UI的大小的一半，这里为10*10。Icon Overlap为后续图标重叠的方法，暂时不需要连。

地图缩放

首先设置大小，Magnify布尔值判断是放大还是缩小，放大则为1.1倍，缩小则为0.9倍。总的限制在1-5倍，width为原视口宽，这里值1920，height为原视口高，这里值为1080。

然后因为大小改变了，需要调整CanvasPanel_Parent的位置，用scale来存储缩放的值方便后续使用。位置和大小的获取与计算都是为了以鼠标为中心进行放大，并且确保缩小后ui不会露出边界之外。

每次缩放调整了CanvasPanel_Parent之后，小图标的位置也需要更新，ChildUISizeHalf为小图标的一半大小，这里为10*10。

地图拖拽

两个方法即可

实现部分

在关卡蓝图调用MainUI对应方法

效果展示

小图标的重合显示

简单的以区域划分的方式重合，所以不会很自然。
在MainUI里面新建一个存放ChildUI数组的结构体，以及以vector2d为key，结构体为value的变量。

创建用来确定缩放后小图标重叠的层级依据和范围大小的变量

下面是Icon Overlap方法的逻辑，TemporaryUI为ChildUI的数组

在子UI里简单改一下颜色用来区分

最后在添加小图标之后和每次缩放之后调用

效果展示

UE4 二维地图的缩放与拖拽操作相关推荐

（简单详细）uniapp实现自定义海报内容并生成海报二维码图片（可拖拽，可调节大小）
实现效果应用场景公司遇到一个需要实现自定义海报才可以满足客户需求的问题,实现自定义海报内容,同时上传的二维码可以自动调节,需要用到canvans的知识,如果没有,那么可以直接使用我的这个案例即可 ...
寻路优化（一）——二维地图上A*启发函数的设计探索
工作中需要优化A*算法,研究了一天,最后取得了不错的效果.看网上的朋友还没有相关的研究,特此记录一下.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leon ...
01 创建一个二维地图
随着3.X系列版本新功能的不再增加,终于开始向4.X版本转变,其实说实话还是蛮不想转变的,因为相对于3.X版本的API,4.X版本里面的功能目前为止还是有点少的,但大势所趋,只能硬着头皮转了. 首先, ...
如何生成gazebo仿真环境的二维地图真值
在移动机器人仿真中,二维地图真值可以用来评价slam建图结果,也可以直接给路径规划算法提供输入. 利用gazebo进行仿真时,有很多方法都可以获取静态仿真环境的二维地图真值,本文将对以下链接: hyf ...
用字节数组存放二维地图数据
一二维地图数据内容在RPG的大地图中,我们往往会分割成很多小块(逻辑上),用于玩家行走,比如使用A星寻路等等,就需要的二维地图数据.一般情况,存放的是数值,主要是指每个格子里的数值,这里的数值是指 ...
skyline三维地图与arcgis二维地图联动
无论是二维控制三维,还是三维控制二维,都是通过事件来触发,只不过各自的事件有所区别就是了.这里所说的二维,是指arcgis for jsapi,三维指skyline,都是前端的内容. 其中二维控制三维 ...
maptalks+three.js+vue webpack项目实现二维地图上贴三维模型
我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已 ...
arcgis for android（二）显示二维地图
1.上一节讲了 arcgis for android 入门与提高(一)配置环境https://blog.csdn.net/HB_Programmer/article/details/119967868 ...
基于Vue框架开发的页面加载二维地图以及交互
一.在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ ...

最新文章

热门文章