Unity之圆环slider

一、参考文章

Unity_圆环滑动条（圆形、弧形滑动条）_unity弧形滑动条-CSDN博客

此滑动条拖动超过360后继续往前滑动值会从0开始，正常我们超过360度时不可在滑动。

二、 超过360度不可滑动问题解决

参考HTML文章制作： https://www.cnblogs.com/pangys/p/13201808.html

下载链接

修改后的脚本：

using OfficeOpenXml.FormulaParsing.Excel.Functions;
using OfficeOpenXml.FormulaParsing.Excel.Functions.Math;
using OfficeOpenXml.FormulaParsing.Excel.Functions.Text;
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;
using UnityEngine.UI;

[RequireComponent(typeof(RectTransform)), ExecuteInEditMode]
public class AnnularSlider : Selectable, IDragHandler, ICanvasElement
{
    [Serializable]
    public class DragEvent : UnityEvent
    {
    }

    [Serializable]
    public class DragValueEvent : UnityEvent<float>
    {
    }

    [SerializeField] private Image _fillImage;
    [SerializeField] private Image.Origin360 _fillOrigin;
    [SerializeField] private bool _clockwise;
    [SerializeField] private bool _wholeNumbers;
    [SerializeField] private float _minValue;
    [SerializeField] private float _maxValue = 1f;
    [SerializeField] private float _maxAngle = 360f;
    [SerializeField] private float _value;

    [SerializeField] private RectTransform _handleRect;
    [SerializeField] private float _radius = 10f;
    [SerializeField] private bool _towardCenter;

    [SerializeField] private DragValueEvent _onValueChanged = new DragValueEvent();
    [SerializeField] private DragEvent _onBeginDragged = new DragEvent();
    [SerializeField] private DragEvent _onDragging = new DragEvent();
    [SerializeField] private DragEvent _onEndDragged = new DragEvent();

    private bool _delayedUpdateVisuals;

    public Image FillImage
    {
        get { return _fillImage; }
        set
        {
            if (SetClass(ref _fillImage, value))
            {
                UpdateCachedReferences();
                UpdateVisuals();
            }
        }
    }

    public Image.Origin360 FillOrigin
    {
        get { return _fillOrigin; }
        set
        {
            if (SetStruct(ref _fillOrigin, value))
            {
                UpdateVisuals();
            }
        }
    }

    public bool Clockwise
    {
        get { return _clockwise; }
        set
        {
            if (SetStruct(ref _clockwise, value))
            {
                UpdateVisuals();
            }
        }
    }

    public bool WholeNumbers
    {
        get { return _wholeNumbers; }
        set
        {
            if (SetStruct(ref _wholeNumbers, value))
            {
                UpdateValue(_value);
                UpdateVisuals();
            }
        }
    }

    public float MinValue
    {
        get { return _minValue; }
        set
        {
            if (SetStruct(ref _minValue, value))
            {
                UpdateValue(_value);
                UpdateVisuals();
            }
        }
    }

    public float MaxValue
    {
        get { return _maxValue; }
        set
        {
            if (SetStruct(ref _maxValue, value))
            {
                UpdateValue(_value);
                UpdateVisuals();
            }
        }
    }

    public float MaxAngle
    {
        get { return _maxAngle; }
        set
        {
            if (SetStruct(ref _maxAngle, value))
            {
                UpdateVisuals();
            }
        }
    }

    public float Value
    {
        get
        {
            if (_wholeNumbers) return Mathf.Round(_value);
            return _value;
        }

        set { UpdateValue(value); }
    }

    public RectTransform HandleRect
    {
        get { return _handleRect; }
        set
        {
            if (SetClass(ref _handleRect, value))
            {
                UpdateVisuals();
            }
        }
    }

    public float Radius
    {
        get { return _radius; }
        set
        {
            if (SetStruct(ref _radius, value))
            {
                UpdateVisuals();
            }
        }
    }

    public bool TowardCenter
    {
        get { return _towardCenter; }
        set
        {
            if (SetStruct(ref _towardCenter, value))
            {
                UpdateVisuals();
            }
        }
    }

    public DragValueEvent OnValueChanged
    {
        get { return _onValueChanged; }
        set { _onValueChanged = value; }
    }

    public DragEvent OnBeginDragged
    {
        get { return _onBeginDragged; }
        set { _onBeginDragged = value; }
    }

    public DragEvent OnDragging
    {
        get { return _onDragging; }
        set { _onDragging = value; }
    }

    public DragEvent OnEndDragged
    {
        get { return _onEndDragged; }
        set { _onEndDragged = value; }
    }

    public float NormalizedValue
    {
        get
        {
            if (Mathf.Approximately(_minValue, _maxValue)) return 0;
            return Mathf.InverseLerp(_minValue, _maxValue, Value);
        }
        set { 
            Value = Mathf.Lerp(_minValue, _maxValue, value);
        }
    }

    protected override void OnEnable()
    {
        base.OnEnable();
        UpdateCachedReferences();
        UpdateValue(_value, false);
        UpdateVisuals();
    }

#if UNITY_EDITOR
    protected override void OnValidate()
    {
        base.OnValidate();

        if (WholeNumbers)
        {
            _minValue = Mathf.Round(_minValue);
            _maxValue = Mathf.Round(_maxValue);
        }

        //Onvalidate is called before OnEnabled. We need to make sure not to touch any other objects before OnEnable is run.
        if (IsActive())
        {
            UpdateCachedReferences();
            UpdateValue(_value, false);
            _delayedUpdateVisuals = true;
        }


        //if (!UnityEditor.PrefabUtility.IsComponentAddedToPrefabInstance(this) && !Application.isPlaying)
        //    CanvasUpdateRegistry.RegisterCanvasElementForLayoutRebuild(this);
    }
#endif

    protected virtual void Update()
    {
        if (_delayedUpdateVisuals)
        {
            _delayedUpdateVisuals = false;
            UpdateVisuals();
        }


    }

    public override void OnPointerDown(PointerEventData eventData)
    {
        if (MayEvent(eventData))
        {
            OnBeginDragged.Invoke();
        }
    }
    public double degValue;//存储
    public void OnDrag(PointerEventData eventData)
    {
        if (!MayEvent(eventData)) return;
        _onDragging.Invoke();

        Vector2 localPoint;//鼠标在ui中的位置
        if (RectTransformUtility.ScreenPointToLocalPointInRectangle(_fillImage.rectTransform, eventData.position, eventData.pressEventCamera, out localPoint))
        {

            var deg = XYToDeg(localPoint.x, localPoint.y);//获取角度（用弧度制π来表示）
            double min = 0, max = 0;//滑块起点位置区间

            //根据起点位置进行换算
            switch (_fillOrigin)
            {
                case Image.Origin360.Bottom:
                    //第四象限 起点为270°终点为360 即：[3π/2, 2π]
                    min = Math.PI * 1.5;
                    max = Math.PI * 2;

                    break;
                case Image.Origin360.Right:
                    //deg = deg;//在第一象限为起点不换算
                    min =max =0;
                    break;
                case Image.Origin360.Top:

                    //第二象限为起点 区间[π/2,π]=>[90,180]
                    min = Math.PI * 0.5;
                    max = Math.PI * 2;

                    break;
                case Image.Origin360.Left:

                    //第三象限为起点 区间[π,2π]=>[180,360]
                    min = Math.PI;
                    max = Math.PI * 2;

                    break;
                default:
                    break;
            }

            //起点位置差值换算
            if (deg >= min && deg <= max)
                deg -= min;
            else
                deg += (max - min);

            deg = Clockwise ? Math.PI * 2 - deg :  deg; //顺、逆时针方向
            var constMaxAngle = MaxAngle / 180;//圆的最大弧度常数
            var radian = deg / Math.PI; //除π得到常数值 [0,2π]/π=[0,2]
            var ratio = (radian / constMaxAngle) * 100;//鼠标移动的角度在圆的最大角度中的占比

            //限制value的最大最小值
            var maxValue = constMaxAngle * 100; //最大value值
            if (ratio > maxValue || ratio < 0)return; 
            if (ratio >= maxValue) ratio = maxValue;
            if (ratio <= 0) ratio = 0;


            /*在圆中360°和0°是首尾相连的，为了防止鼠标滑动到360在往前滑动变成0的问题，需要进行一个计算判断。
             * 举例当鼠标滑动到360度时ratio和degValue值都为100，此时鼠标再往上滑动ratio值就会从0开始。
             * 在赋值degValue时使用Math.Abs(ratio - degValue)求两个数的绝对值，然后在设置一个最大阈值10。即可解决问题
             * Math.Abs(100 - 0)得出结果为100。我们设置的最大阈值为10，当鼠标再往上滑动时超出最大阈值不在赋值
             */
            if (Math.Abs(ratio - degValue) > 10) return;

            //给value赋值
            if (degValue != Math.Round(ratio))
            {
                degValue = Math.Round(ratio);
                NormalizedValue = (float)degValue / 100;
                UpdateVisuals();
            }


        }
    }
    #region 获取角度（用弧度制π来表示）
    double XYToDeg(float lx, float ly)
    {
        /* 这里的lx和ly已经换算过的代表了鼠标以圆中心点为原点的坐标向量，
         * 连接原点和鼠标坐标位置形成一个直角三角形

                    |y轴
                    |
                * * | * *
             *      |      *
           *        |   。   *
          *         |  /|     *
    ------------------------|--------------------------->
          *         |         *     x轴
           *        |        *
             *      |      *
                * * | * *
                    |
                    |    
 */

        /* 1.获取角度（用弧度制π来表示）
         * 利用反三角函数Math.Atan（tanθ）来获取角度
         * 在三角函数中 lx代表邻边，ly代表对边。根据三角函数可以得出 tanθ=ly/lx （关于直角的绘制看上方例图）
         * 反三角函数Arctan（ly/lx）可得出角度
         */
        double adeg = Math.Atan(ly / lx);

        /* 2.将角度限制在[0 , 2π]区间。
         * 已知Math.Atan函数 返回的数值在[-π/2 , π/2] 换成角度是[-90,90]，
         * 但我们需要获取[0 , 2π]即：[0,360]区间的实际值用于计算
         * 所以需要通过lx和ly的正负判断所在象限用于换算成[0 , 2π]区间的值
         */
        double deg = 0;

        if (lx >= 0 && ly >= 0)
        {
            /*第一象限: 
             * 得到的角度在[0,90]区间，即：[0,π/2]
             * 不换算
             */
            deg = adeg;
        }
        if (lx <= 0 && ly >= 0) 
        {
            /*第二象限:
             * 得到的角度在[-90,0]区间，即：[-π/2, 0]
             * 需要换算为[90,180]区间 所以要+π。（在角度制中π为180）
             */
            deg = adeg + Math.PI;
        }
        if (lx <= 0 && ly <= 0)
        {
            /*第三象限:
             * 得到的角度在[0,90]区间，即：[0,π/2]
             * 需要换算为[180,270]区间 所以要+π。（在角度制中π为180）
             */
            deg = adeg + Math.PI;
        }
        if (lx > 0 && ly < 0) 
        {
            /*第四象限:
             * 得到的角度在[-90,00]区间，即：[-π/2, 0]
             * 需要换算为[270,360]区间 所以要+2π。（在角度制中π为180）
             */
            deg = adeg + Math.PI * 2;
        }

        return deg;
    }

    #endregion

    public override void OnPointerUp(PointerEventData eventData)
    {
        if (MayEvent(eventData))
        {
            OnEndDragged.Invoke();
            //Debug.Log("OnEndDragged");
        }
    }

    public void Rebuild(CanvasUpdate executing)
    {
    }

    public void LayoutComplete()
    {
    }

    public void GraphicUpdateComplete()
    {
    }

    /// <summary>
    /// 返回是否可交互
    /// </summary>
    /// <returns></returns>
    private bool MayEvent(PointerEventData eventData)
    {
        return IsActive() && IsInteractable() && eventData.button == PointerEventData.InputButton.Left;
    }

    /// <summary>
    /// 更新缓存引用
    /// </summary>
    private void UpdateCachedReferences()
    {
        if (_fillImage)
        {
            _fillImage.type = Image.Type.Filled;
            _fillImage.fillMethod = Image.FillMethod.Radial360;
            _fillImage.fillOrigin = (int)_fillOrigin;
            _fillImage.fillClockwise = _clockwise;
        }
    }

    /// <summary>
    /// 更新视觉效果
    /// </summary>
    private void UpdateVisuals()
    {
#if UNITY_EDITOR
        if (!Application.isPlaying)
            UpdateCachedReferences();
#endif

        var angle = NormalizedValue * _maxAngle;

        if (_fillImage)
        {
            _fillImage.fillAmount = angle / 360f;
        }

        if (_handleRect)
        {
            _handleRect.transform.localPosition = GetPointFromFillOrigin(ref angle);
            if (_towardCenter)
            {
                _handleRect.transform.localEulerAngles = new Vector3(0f, 0f, angle);
            }
        }
    }

    /// <summary>
    /// 更新Value
    /// </summary>
    /// <param name="value"></param>
    /// <param name="sendCallback"></param>
    private void UpdateValue(float value, bool sendCallback = true)
    {
        value = Mathf.Clamp(value, _minValue, _maxValue);
        if (_wholeNumbers) value = Mathf.Round(value);
        if (_value.Equals(value)) return;
        _value = value;

        UpdateVisuals();
        if (sendCallback)
        {
            _onValueChanged.Invoke(_value);
            //Debug.Log("OnValueChanged" + _value);
        }
    }

    /// <summary>
    /// 返回基于起始点的角度（0°~360°）
    /// </summary>
    /// <param name="point"></param>
    /// <returns></returns>
    /// <exception cref="ArgumentOutOfRangeException"></exception>
    private float GetAngleFromFillOrigin(Vector2 point)
    {
        var angle = Mathf.Atan2(point.y, point.x) * Mathf.Rad2Deg; //相对于X轴右侧（FillOrigin.Right）的角度
        //转换为相对于起始点的角度
        switch (_fillOrigin)
        {
            case Image.Origin360.Bottom:
                angle = _clockwise ? 270 - angle : 90 + angle;
                break;
            case Image.Origin360.Right:
                angle = _clockwise ? -angle : angle;
                break;
            case Image.Origin360.Top:
                angle = _clockwise ? 90 - angle : 270 + angle;
                break;
            case Image.Origin360.Left:
                angle = _clockwise ? 180 - angle : 180 + angle;
                break;
            default:
                throw new ArgumentOutOfRangeException();
        }

        转 360 °表示
        //if (angle > 360)
        //{
        //    angle -= 360;
        //}

        //if (angle < 0)
        //{
        //    angle += 360;
        //}

        return angle;
    }

    /// <summary>
    /// 返回基于起始点、角度、半径的位置
    /// </summary>
    /// <param name="angle"></param>
    /// <returns></returns>
    /// <exception cref="ArgumentOutOfRangeException"></exception>
    private Vector2 GetPointFromFillOrigin(ref float angle)
    {
        //转化为相对于X轴右侧（FillOrigin.Right）的角度
        switch (_fillOrigin)
        {
            case Image.Origin360.Bottom:
                angle = _clockwise ? 270 - angle : angle - 90;
                break;
            case Image.Origin360.Right:
                angle = _clockwise ? -angle : angle;
                break;
            case Image.Origin360.Top:
                angle = _clockwise ? 90 - angle : 90 + angle;
                break;
            case Image.Origin360.Left:
                angle = _clockwise ? 180 - angle : 180 + angle;
                break;
            default:
                throw new ArgumentOutOfRangeException();
        }

        var radian = angle * Mathf.Deg2Rad;
        return new Vector2(Mathf.Cos(radian) * _radius, Mathf.Sin(radian) * _radius);
    }

    //设置结构
    private static bool SetStruct<T>(ref T setValue, T value) where T : struct
    {
        if (EqualityComparer<T>.Default.Equals(setValue, value)) return false;
        setValue = value;
        return true;
    }

    private static bool SetClass<T>(ref T setValue, T value) where T : class
    {
        if (setValue == null && value == null || setValue != null && setValue.Equals(value)) return false;
        setValue = value;
        return true;
    }
}

三、使用方法