如何使边界圈子按钮扩展到悬停中的悬停中的边界丸按钮，仍然保持边界厚度？答案

【问题标题】：How can I make a bordered circle button expand into a bordered pill button on hover in Unity, and still maintain the border thickness?如何使边界圈子按钮扩展到悬停中的悬停中的边界丸按钮，仍然保持边界厚度？
【发布时间】：2020-03-31 16:18:00
【问题描述】：

我正在使用 Unity 2019.2.5f1，我正在尝试创建一些可以这样操作的动态 UI 按钮...

未悬停时清除边框按钮，见下文：

然后，当鼠标悬停并按下时，它会自动生成动画并拉长成一个干净且恒定的有边框的药丸按钮，如下所示：

问题：我正在尝试使用一个精灵（圆形的）来完成所有这些，但是当圆形按钮扩展到药丸按钮时，边框会变形。像这样：

编辑器设置：

当前的 9 切片：

我已经在精灵上尝试了几个 9 切片，其中一个只有一个从左到右沿圆圈中心线的切片。一个在左右切片之间有一个小条子。一个与圆形精灵分成四个象限，所有切片向下。这些似乎都导致了类似的行为。我觉得这是一件很容易解决的事情……唉，我的努力遭到了挫败。

【问题讨论】：

您能否向您的检查员展示您的图像组件配置，以及您的精灵编辑器，将按钮 9 切片为 4 个象限？
@ErikOverflow 添加，谢谢！
我对 C# 或 Unity 的经验为零，但是否可以创建一个“组”元素：一个圆（左）、一个圆（右）和在它们顶部的矩形中间。悬停时，矩形宽度会扩大。

标签： c# unity3d user-interface

【解决方案1】：

我设法实现了您想要做的事情。这是我的设置：

图像切片：

按钮设置：确保按钮的图像设置为切片模式。

要增加侧面的平坦部分，请增加按钮图像组件中的每单位像素乘数。

【讨论】：

感谢您的回复。我已经设法得到与以前类似的结果，但是，我想要的结果（图片编号 2）具有完全圆形的侧面，左右两侧没有平坦部分。所以基本上就像你在中间垂直切割圆圈然后左右拉伸并填充中间。
嘿！我刚刚更新了我的答案。您可以增加单位像素乘数以获得更平坦的表面。
这成功了！谢谢。我将“每单位像素数”更改为 1.6，这几乎成功了。在动画过程中您仍然可以捕捉到一点非常轻微的失真 - 但我认为这只是我的批评:)