先放参考文章:
Unity3d UGUI以鼠标位置点为中心缩放图片(含项目源码)https://blog.csdn.net/qq_33789001/article/details/117749837
再放实现效果:
说说事情缘由,项目需要用到这个效果,所以上网找了个参考文章,后来不知道为什么失效了,所以想着自己改改,看看是什么毛病。
贴原码:
//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,顿时火气就上来了,连夜对比排查出了问题所在。
- 这个需要缩放UI的Transform组件的Pivot的初始数值必须是0.5和0.5。
- 缩放UI的Transform组件的Anchor Presets必须是最中间那个
设置如下:
2023/6/9 更新日志
评论有小伙伴出现了问题,我想了一下大概会有人对UI不怎么熟悉,自己也没说清楚是在什么情况下使用这个代码,所以来补充一下。
这个代码是搭配Scroll View组件使用的,Scroll View不能锁定X和Y轴。(设置如下图)
代码中的ZoomObj一般是指Scroll View里的Content物体。
总结
- 代码中的ZoomObj一般是指Scroll View里的Content物体
- 这个需要缩放UI的Transform组件(Content)的Pivot的初始数值必须是0.5和0.5
- 缩放UI的Transform组件的Anchor Presets必须是最中间那个
说来惭愧,这篇文章是有初版的,我列举了一些可能会有问题的地方,结果我转头就踩坑了。初版是因为屏幕大小和UI大小相同才能侥幸拿到想要的效果,实际上如果改改UI的大小就出错了。然后多花了几小时来修Bug,重新修订了这篇文章,这一版的内容应该是正确的。
其实这个效果还不够好,感觉一卡一卡的,实际上可以再改良一下,减小滚轮数值,用协程循环进行几次缩放来达到同样的效果,我想这会更流畅些,当然也会更吃配置。不过我太懒了,这里就留给大家自己优化吧。
建议自己去实验一下,改改不同的地方,看看效果怎么样,只看代码的话是很难理解的。如果是一直做Unity2D项目的话或早或晚都会遇到这个问题,早点搞懂可以加深自己对Unity组件的了解,反正我没做到就是了。
最好是Unity内置缩放功能,为什么不内置呢?文章来源:https://www.toymoban.com/news/detail-508680.html
最后,希望能帮到有困难的小伙伴吧,祝各位好运。文章来源地址https://www.toymoban.com/news/detail-508680.html
到了这里,关于Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!