[Unity] Circular progress bar (Progress)/drag bar (Slider) production

First, the renderings:

---

The demonstration effect in the above picture can be used to load the circular progress bar, or to implement the drag and drop verification code. The principle is the same (the coordinates obtained by all the following algorithms are the formulas when fillorign is top ).

The position of the dragged object: Get the local coordinates under the current Rect by clicking and dragging, then normalize this coordinate, and then multiply this vector by the center radius of the circle to get the coordinates of the dragged object.

code show as below:

    //拖拽物坐标
    Vector2 local_pos = Vector2.zero;
    //m_fill_rec 拖拽物父物体
    RectTransformUtility.ScreenPointToLocalPointInRectangle(m_fill_rec,                 
                                                            eventData.position,                 
                                                            Camera.main,     
                                                            out local_pos);
    local_pos = local_pos.normalized * m_radius;
    //拖拽物位置赋值
    m_drag_rec.anchoredPosition = local_pos;

fillAmount: Obtain the current coordinates by clicking and dragging, then obtain the current angle through trigonometric functions, then convert the angle into radians, and then use the radian ratio (360°) to obtain the value of fillAmount . Thanks to the netizen for correcting me. Mathematics has been returned to the teacher. In short, it is just going around like this. .

code show as below:

    fill_amount = (Mathf.Atan2(-local_pos.x, -local_pos.y) * 180.0f / Mathf.PI + 180.0f) / 360.0f;
    m_fill_bar.fillAmount = fill_amount;

It should be noted that you need to determine whether the current drag is clockwise or counterclockwise, and use this to determine when you can drag counterclockwise and when you cannot (for example, when fillAmount is 0).

The code for judging clockwise and counterclockwise is as follows:

    private void JudgeDragDir()
    {
        if (m_cur_drag_pos.x > 0)
        {
            //第一象限 第四象限
            if (m_cur_drag_pos.y > 0)
            {
                if (m_cur_drag_pos.y > m_last_drag_pos.y)
                {
                    m_cur_drag_dir = EDRAGDIR.anticlockwise;
                }
                else
                {
                    m_cur_drag_dir = EDRAGDIR.clockwise;
                }
            }
        }
        else
        {
            //第二象限 第三象限
            if (m_cur_drag_pos.y > 0)
            {
                if (m_cur_drag_pos.y > m_last_drag_pos.y)
                {
                    m_cur_drag_dir = EDRAGDIR.clockwise;
                }
                else
                {
                    m_cur_drag_dir = EDRAGDIR.anticlockwise;
                }
            }
        }
    }

Full demo link:

Unity+UGUI circular progress bar-Unity3D document resources-CSDN download