Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片

这篇具有很好参考价值的文章主要介绍了Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 先放参考文章:

Unity3d UGUI以鼠标位置点为中心缩放图片(含项目源码)https://blog.csdn.net/qq_33789001/article/details/117749837

再放实现效果:

Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片


说说事情缘由,项目需要用到这个效果,所以上网找了个参考文章,后来不知道为什么失效了,所以想着自己改改,看看是什么毛病。

贴原码:

    //ZoomObj是需要缩放的UI
    private void ZoomImgByMousePos(GameObject ZoomObj)
    {
        //判断鼠标滚轮是否滚动
        if (Input.GetAxis("Mouse ScrollWheel") == 0)
            return;

        //一些变量的声明
        RectTransform RectTran = ZoomObj.GetComponent<RectTransform>();
        float PivotX = RectTran.pivot.x;
        float PivotY = RectTran.pivot.y;
        float OffsetX = 0f;
        float OffsetY = 0f;
        Vector2 addOffset;

        //获取轴心点在屏幕的坐标
        previewPosition = Camera.main.WorldToScreenPoint(RectTran.position);

        //获取鼠标坐标
        newPosition = Input.mousePosition;

        //计算偏差值
        addOffset = newPosition - previewPosition;

        //计算轴心点偏移量
        if (RectTran.rect.width != 0 && ZoomObj.transform.localScale.x != 0)
            OffsetX = addOffset.x / RectTran.rect.width / RectTran.localScale.x;
        if (RectTran.rect.height != 0 && ZoomObj.transform.localScale.y != 0)
            OffsetY = addOffset.y / RectTran.rect.height / RectTran.localScale.y;

        //计算轴心点新值
        RectTran.pivot += new Vector2(OffsetX, OffsetY);

        //计算UI新位置
        RectTran.anchoredPosition += addOffset;

        //放大UI
        if (Input.GetAxis("Mouse ScrollWheel") > 0)
            ZoomObj.transform.localScale += (ZoomObj.transform.localScale.x >= MaxScale - 0.1f ? Vector3.zero : Vector3.one * 0.1f);
        else if (Input.GetAxis("Mouse ScrollWheel") < 0)
            ZoomObj.transform.localScale += (ZoomObj.transform.localScale.x < MinScale + 0.1f ? Vector3.zero : Vector3.one * -0.1f);
    }

对比一下原文章可以发现改动了一下地方,改了些Bug和实现原理。原文章其实我不太能看懂,省了太多说明内容,把我一个数学苦手和Unity新手看哭了。

解释一下关键的代码内容,先说明某些变量需要在脚本类内赋值,请自行修改。

获取轴心点在屏幕的坐标

//获取轴心点在屏幕的坐标
previewPosition = Camera.main.WorldToScreenPoint(RectTran.position);

通过UI的世界坐标转换为屏幕坐标,UI的世界坐标好像是UI的轴心点位于世界坐标的位置,因为轴心点不会离开屏幕,所以可以放心转换获取值。

之所以要放在开头,是因为后面缩放UI后轴心点就会偏移。这个偏移不会在UI缩放的代码块结束后就更改,会有一段延迟,如果放在最后,很有可能不会捕捉到更改的值。

计算偏差值

//计算偏差值
addOffset = newPosition - previewPosition;

计算鼠标位置和轴心点位于屏幕位置的差

计算轴心点偏移量

//计算轴心点偏移量
if (RectTran.rect.width != 0 && ZoomObj.transform.localScale.x != 0)
    OffsetX = addOffset.x / RectTran.rect.width / RectTran.localScale.x;
if (RectTran.rect.height != 0 && ZoomObj.transform.localScale.y != 0)
    OffsetY = addOffset.y / RectTran.rect.height / RectTran.localScale.y;

通过偏移值计算出缩放后UI轴心点的偏移距离,这个偏移距离是就鼠标位置而言的,因为轴心点的位置是默认和鼠标位于同一位置。屏幕坐标的单位距离和锚定坐标系的单位距离是一致的,所以可以直接用偏移值除以放大后的UI宽高获得轴心点的偏移距离。

计算轴心点位置

//计算轴心点新值
RectTran.pivot += new Vector2(OffsetX, OffsetY);

移动轴心点到鼠标位置

 计算UI位置

//计算UI新位置
RectTran.anchoredPosition += addOffset;

UI的位置必须要加上偏移值,这个位置可以是当地坐标或者是锚定坐标。似乎是UI的轴心点移动会伴随着UI位置的移动。如果不加会发现UI会在缩放后偏移预定坐标一段距离,这个多偏移的距离就是上面计算的偏移值。具体逻辑不太清楚 ,应该是Unity底层设定的。

2023/2/11 更新日志

新开的项目需要用到这个功能,结果我抄自己的都能抄出Bug,顿时火气就上来了,连夜对比排查出了问题所在。

  1. 这个需要缩放UI的Transform组件的Pivot的初始数值必须是0.5和0.5。
  2. 缩放UI的Transform组件的Anchor Presets必须是最中间那个

设置如下:

Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片

2023/6/9 更新日志

评论有小伙伴出现了问题,我想了一下大概会有人对UI不怎么熟悉,自己也没说清楚是在什么情况下使用这个代码,所以来补充一下。

这个代码是搭配Scroll View组件使用的,Scroll View不能锁定X和Y轴。(设置如下图)

Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片

 

代码中的ZoomObj一般是指Scroll View里的Content物体。


总结

  1. 代码中的ZoomObj一般是指Scroll View里的Content物体
  2. 这个需要缩放UI的Transform组件(Content)的Pivot的初始数值必须是0.5和0.5
  3. 缩放UI的Transform组件的Anchor Presets必须是最中间那个

说来惭愧,这篇文章是有初版的,我列举了一些可能会有问题的地方,结果我转头就踩坑了。初版是因为屏幕大小和UI大小相同才能侥幸拿到想要的效果,实际上如果改改UI的大小就出错了。然后多花了几小时来修Bug,重新修订了这篇文章,这一版的内容应该是正确的。

其实这个效果还不够好,感觉一卡一卡的,实际上可以再改良一下,减小滚轮数值,用协程循环进行几次缩放来达到同样的效果,我想这会更流畅些,当然也会更吃配置。不过我太懒了,这里就留给大家自己优化吧。

建议自己去实验一下,改改不同的地方,看看效果怎么样,只看代码的话是很难理解的。如果是一直做Unity2D项目的话或早或晚都会遇到这个问题,早点搞懂可以加深自己对Unity组件的了解,反正我没做到就是了。

最好是Unity内置缩放功能,为什么不内置呢?

最后,希望能帮到有困难的小伙伴吧,祝各位好运。文章来源地址https://www.toymoban.com/news/detail-508680.html

到了这里,关于Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 零代码实现Unity2D角色Sprite批量换装

    先看成果  图片上限5M,画质渣没办法o(╥﹏╥)o 思路参考:https://www.youtube.com/watch?v=ZgCB4tifQ_c         2D角色换装的教程不少,但大多都是以套装为主,大批量替换局部装备的似乎没有。研究了很久,这里也算做一个记录。         角色所有部位都需要在PS里面单独分层,

    2024年01月18日
    浏览(61)
  • 【Unity2d】2DNavMesh自动寻路实现

            在u3d中,系统自带了NavMesh组件,能够极其方便的实现自动寻路,新版的NavMesh并没有随着Unity的更新添加进引擎功能中,在2d项目中,我们想要实现NavMesh自动寻路还需要下载新的组件。这里提供网址:GitHub - h8man/NavMeshPlus: Unity NavMesh 2D Pathfinding         要在小伙

    2024年02月14日
    浏览(44)
  • unity2d实现一个全方位的无限随机地图

    要实现一个全方位的无限随机地图,可以考虑以下步骤: 1.创建一个空的场景,并添加一个相机和一个玩家对象。 2.创建一个TileMap,它将作为你的地图板块。你可以使用随机数生成算法生成各种类型的地形,如森林、草地、沙漠等等,并使用TileMap将它们组装在一起来创建你

    2024年02月07日
    浏览(44)
  • 【Unity2D】实现打怪掉落物品(如爆金币等)的功能

    本文章记录实现打怪掉落物品的功能,以下代码为2D实现,3D模式稍加修改即可。 目录 一、代码部分 二、注意事项 三、效果展示 创建一个C#脚本命名为Item,并将该脚本挂载到需要掉落的物品上。 1.需要禁用掉落物品与自身和其他人物之间的碰撞(否则可能被物品撞飞)。

    2024年02月11日
    浏览(38)
  • Unity2D控制角色左右移动

    1.在Hierarchy一栏中选中角色; 2.在inspector栏最底端找到Add Component选项并点击; 3.添加Rigidbody2D,合适的collider和new script; 4.将添加的Rigidbody2D拖到new script中;   5.在project栏中找到新添加的C#文件并双击打开(如果还没有编辑代码的工具,推荐Vscode) 6.代码如下: using System.Nu

    2024年02月14日
    浏览(50)
  • Unity2d游戏项目--小狐狸

    (一) 在文件夹中找到back图片,并在检查器面板中将back图片的每单位像素数设置为16。 (文件所在地) (面板设置) (二) 将图片拖入到场景中 (一) 生成矩形的瓦片地图 (二) 打开平铺调色板 (三) 新建并命名为map,在原目录新建一个文件夹,用于存放你在这个瓦

    2024年02月03日
    浏览(37)
  • Unity2D小狐狸教程笔记

    下载 https://unity.cn/releases 默认显示方式 window - layout - default SampleScene : Project - 文件目录 Scene -游戏画面 asset store - 素材商店 在asset store下载素材 sunnyland shift + sapace 放大窗口 1.背景导入 每个格子16像素: Pixels Per Unit 16px 2.绘制瓷砖式地图 新建瓦片图层:左上角/右键 2D object

    2024年01月24日
    浏览(47)
  • Unity2D绘制游戏地图

    首先,我们选择我们的地图素材(由于笔者在前段时间已经进行切割,最近才开始整理这一段,所以这个是用的老素材,可能有朋友就会觉得切割前后不一致,但是思路是一样的,大家学习思路即可)  接着,我们找到右上角的Slice进行图片切割,我这边简单介绍一下这个切

    2024年02月08日
    浏览(49)
  • 【Unity2D】角色动画的切换

    第一种方法是设置一个中间状态,从中间状态向其余各种状态切换,且各状态向其他状态需要设置参数 实现动作转移时右键点击Make Transition即可  实现动画转移需要设置条件 点击一种动画到另一种动画的线 ,然后点击加号添加Condition 比如机器人从向左走切换到向右走的条件

    2024年02月15日
    浏览(57)
  • Unity2D学习笔记-Tilemap

    tilemap算是接触了几次,但是无论是看视频还是看文章都一知半解,这次把编辑地图的开始步骤搞清楚。 首先要知道tilemap是做什么的。 这里提到的Tilemap其实不止是Tilemap:Tilemap本身是地图编辑器(虽然我更倾向于理解为“场景”,不过编辑地图才是核心)。之前学的印象是,

    2023年04月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包