unity3d - 滚动时缩放和更改颜色 UI

Question

我有 ScrollRect 里面有数字（工作正常）我想要当任何数字位置在蓝色的图像中而不是数字改变颜色（红色）并且增加字体大小我不知道如何实现请帮助

Answer 1

可能有多种方法可以实现这一目标。

我可能会选择这样的东西：

首先在您的图像上有一个专用组件 - 这只是为了更容易找到它并有一些预缓存的引用：

[RequireComponent(typeof(RectTransform))]
public class TargetImage : MonoBehaviour
{
    [SerializeField]
    private RectTransform _rectTransform;

    public RectTransform RectTransform => _rectTransform;
    
    private void Awake()
    {
        if (!_rectTransform) _rectTransform = GetComponent<RectTransform>();
    }
}

然后在每个文本上，您都可以使用另一个组件来控制您想要实现的目标：

[RequireComponent(typeof(TMP_Text))]
// or if using Text
//[RequireComponent(typeof(Text))]
public class Example : NetworkBehaviour
{
    [SerializeField]
    private TMP_Text _text;
    // or if using Text
    //private Text _text;

    [SerializeField]
    private TargetImage _targetage;

    [SerializeField]
    private float _hitFontSize = 40;
    // or if using Text
    //private int _hitFontSize = 40;

    [SerializeField]
    private Color _hitFontColor = Color.red;

    
    private float _normalFontSize;
    // or if using Text
    //private int _normalFontSize;

    private Color _normalFontColor;
   
    private void Awake()
    {
        if (!_text) _text = GetComponent<TMP_Text>();
        if (!_targetage) _targetage = FindObjectOfType<TargetImage>();

        _normalFontColor = _text.color;
        _normalFontSize = _text.fontSize;
    }

    private void LateUpdate()
    {
        var isInsideTargetImage = _targetage && _targetage.RectTransform.FullyContains(_text.rectTransform);

        _text.color = isInsideTargetImage ? _hitFontColor : _normalFontColor;
        _text.fontSize = isInsideTargetImage ? _hitFontSize : _normalFontSize;
    }
}

我前段时间想出FullyContains的一个小扩展方法在哪里

public static class RectTransformExtensions
{     
    ///<summary>
    /// Returns a Rect in WorldSpace dimensions using <see cref="RectTransform.GetWorldCorners"/>
    ///</summary>
    public static Rect GetWorldRect(this RectTransform rectTransform)
    {
        // This returns the world space positions of the corners in the order
        // [0] bottom left,
        // [1] top left
        // [2] top right
        // [3] bottom right
        var corners = new Vector3[4];
        rectTransform.GetWorldCorners(corners);

        Vector2 min = corners[0];
        Vector2 max = corners[2];
        Vector2 size = max - min;

        return new Rect(min, size);
    }

    ///<summary>
    /// Checks if a <see cref="RectTransform"/> fully encloses another one
    ///</summary>
    public static bool FullyContains (this RectTransform rectTransform, RectTransform other)
    {       
        var rect = rectTransform.GetWorldRect();
        var otherRect = other.GetWorldRect();

        // Now that we have the world space rects simply check
        // if the other rect lies completely between min and max of this rect
        return rect.xMin <= otherRect.xMin 
            && rect.yMin <= otherRect.yMin 
            && rect.xMax >= otherRect.xMax 
            && rect.yMax >= otherRect.yMax;
    }
}

然后当您现在滚动时会发生以下情况