如何在Unity中防止UI图像过度缩放

huangapple go评论77阅读模式
英文:

How to prevent over scale for UI Image in Unity

问题

因为这很难想象,所以我将尝试用图像来描述它。

这是我的父对象,包含2个子对象,"Are you sure"文本和"Yes No"按钮(忽略白色的按钮):

如何在Unity中防止UI图像过度缩放

现在问题来了,如果我像这样将文本和按钮放在锚点内(我设置了文本对象和按钮容器的锚点,以便在缩放时它们不会重叠):

如何在Unity中防止UI图像过度缩放
如何在Unity中防止UI图像过度缩放

但由于我想使用Unity动画制作外观动画(它将向下滑动),所以我必须将文本放在父对象之外(在其上方/视口之外),因为4个文本角到锚点之间的距离是固定值。所以每次我缩放游戏选项卡时,文本将重叠视口,像这样:

如何在Unity中防止UI图像过度缩放
如何在Unity中防止UI图像过度缩放

所以我的问题是:在动画调用并放置在适当位置时,我如何保持文本对象的外边界与其父对象(这里是黄色面板)之间的距离,同时仍然可以缩放以适应父对象内部的锚点(如第二个图像)?

我尝试搜索了大量教程并花了几个小时来调整锚点和枢轴,但似乎毫无希望,因为没有视频或文档涵盖这种问题:/ 任何支持或建议将不胜感激。

英文:

Because this is pretty hard to imagine, so I will try to describe it along with images.

This is my parent object that contains 2 children, the "Are you sure" text and "Yes No" Buttons (nvm the white one):

如何在Unity中防止UI图像过度缩放

Now here's the problem, the scaling of text and buttons works just fine if I put them inside the anchor with setup like this (I set anchors of both object text and buttons container like that, so when scaling they will not be collapse on each other):

如何在Unity中防止UI图像过度缩放
如何在Unity中防止UI图像过度缩放

But since I want to make appearance animation using unity animator (it will slide down), I must place the Text outside of the parent object (above it / outside the viewport), and because the distance between the 4 Text's corners to the Anchors is a fixed value. So every time I scale the game tab, the text will just overlap the viewport like this:

如何在Unity中防止UI图像过度缩放
如何在Unity中防止UI图像过度缩放

So my question is: how can I maintain the distance between the out border Text object and its parent (here is the yellow panel) while it still can scale to fit inside its anchors inside the parent object (like the second image) when the animation is called and it is placed in place?

I tried to search for bunch of tutorials and messing with its anchors and pivot for hours, but it seem hopeless since there's no video or documents cover on this kind of problem :/

Any support or suggestion would be appreciated a lot.

答案1

得分: 0

使用“AspectRatioFitter”组件来保持高度比例,并将锚点设置为宽度的一行,这意味着它只能水平缩放。但使用“AspectRatioFitter”,它还会为您缩放高度。然后,您就实现了保持距离的目标,同时仍然可以进行缩放。

英文:

For anyone interested in this question. Use "AspectRatioFitter" component to maintain the height ratio and set the anchor to one line of width, which means it's only can be scaled horizontally. But with "AspectRatioFitter", it will scale the height for you too. And woala, you achieved your aim is to maintain the distance while it still can be scaled.

huangapple
  • 本文由 发表于 2023年6月12日 10:50:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76453379.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定