Realize the reset function of steering wheel UI with touch rotation and finger departure in unity

      The need is Steering wheel simulation UI, Rotation is to press and hold the steering wheel to rotate , The limit is only one and a half turns left and one and a half turns right , The steering wheel resets automatically when you let go .

      First on the final rendering ：

      

      Let's talk about the specific implementation process . The first is to realize that the steering wheel rotates with the position of the mouse . The idea is to record the pressed point followed by the steering wheel at each frame after pressing the mouse 0 The center is the coordinate origin y The angle of the coordinate axis , As shown in the figure below, yellow ∠1 Shown （ The black dot is the position of one frame on the mouse , The red dot is the current frame position of the mouse ）

     

      Then use the current frame angle blue ∠2 Keep up with the frame angle yellow ∠1 Compare , Get a difference black ∠3. use transform.Rotate() Method rotate the difference to make the steering wheel rotate with the mouse .

      The second requirement is to make the steering wheel rotate left and right no more than one and a half turns , That is to say 450°. The implementation of this requirement is to customize a float Field , Used to record the total rotation angle , use ∠1 and ∠2 The difference between positive and negative determines whether the current mouse is turning clockwise or counterclockwise , Determine whether the current angle is plus or minus the total angle .

      Let's talk about it here unity The two methods that come with it ：

      Vector3.Angle(Vector3 from,Vector3 to) This method is used to calculate the relative coordinates of two positions （0,0,0） The angle between , The value returned is always [0,180] Between .

      Vector3.Cross(Vector3 lhs,Vector3 rhs) This method is used to calculate the cross product of two positions , Return to one Vector3 v3, The calculation is carried out clockwise and counterclockwise in the plane , Ignore y Axis , be v3.z>0,rhs stay lhs In a clockwise direction ;v3.z = 0,rhs Follow lhs parallel ;v3.z<0,rhs stay lhs In the counter clockwise direction of .

      （ A more detailed introduction to dot and cross products ： http://blog.csdn.net/liqiangeastsun/article/details/50331933）

      Reset is simple , It is to monitor that when the mouse releases the steering wheel, the total rotation angle of the previous record is increased or decreased to 0, Just make the steering wheel angle equal to this total angle .

      Here's the code ：

public Canvas CanvasRoot;// canvas  
    private RectTransform m_RectTransform;// coordinate 

    private bool m_IsFirst = true;           // Used to record the position of the mouse when the mouse is pressed in the first frame , Easy to calculate 
    private Vector3 m_CurrentPos;            // Record the position of the mouse in the current frame 
    private bool m_IsClockwise;              // Is it clockwise 
    private float m_RoundValue = 0;          // Record the total rotation angle   Use this value to control one and a half circles 
    private bool m_IsTuringSteeringWheel;    // Are you turning the steering wheel   Reset with this judgment 

    void Start()
    {
        CanvasRoot = GameObject.Find("Canvas").GetComponent<Canvas>();
        m_RectTransform = CanvasRoot.transform as RectTransform;
    }


    void Update()
    {

        if (Input.GetMouseButton(0) && EventSystem.current.currentSelectedGameObject == gameObject)                 // When the mouse clicks on the steering wheel 
        {
            m_IsTuringSteeringWheel = true;
            Vector2 pos;
            if (RectTransformUtility.ScreenPointToLocalPointInRectangle(m_RectTransform, Input.mousePosition, CanvasRoot.worldCamera, out pos))    // Get the mouse click position 
            {

                pos.x = pos.x + (Screen.width / 2) - GetComponent<RectTransform>().position.x;
                pos.y = pos.y + (Screen.height / 2) - GetComponent<RectTransform>().position.y;

                Vector3 pos3 = new Vector3(pos.x, pos.y, 0);                           // Calculate the coordinate position of the mouse with the center of the steering wheel as the coordinate origin 

                if (m_IsFirst)
                {
                    m_CurrentPos = pos3;
                    m_IsFirst = false;
                }

                Vector3 currentPos = Vector3.Cross(pos3, m_CurrentPos);             // Calculate the finger position of the current frame and the previous frame   Used to judge the direction of rotation 
                if (currentPos.z > 0)
                {
                    m_IsClockwise = true;
                }
                else if (currentPos.z < 0)
                {
                    m_IsClockwise = false;
                }

                if(m_CurrentPos != pos3)                                 // Turn the steering wheel with your fingers within the range 
                {
                    if(m_IsClockwise)
                    {
                        if (m_RoundValue <= 540)
                        {
                            m_RoundValue += Vector3.Angle(m_CurrentPos, pos3);

                            transform.Rotate(new Vector3(0, 0, -Vector3.Angle(m_CurrentPos, pos3)));
                        }
                    }

                    else
                    {
                        if (m_RoundValue >= -540)
                        {
                            m_RoundValue -= Vector3.Angle(m_CurrentPos, pos3);

                            transform.Rotate(new Vector3(0, 0, Vector3.Angle(m_CurrentPos, pos3)));
                        }
                    }

                }
                m_CurrentPos = pos3;

            }

        }
        if (Input.GetMouseButtonUp(0))
        {
            m_IsFirst = true;
            m_IsTuringSteeringWheel = false;
        }

        if (!m_IsTuringSteeringWheel && m_RoundValue != 0)               // Reset 
        {
            if (m_RoundValue >= 0)
            {
                m_RoundValue -= 8f;               // Reset speed 
                if (m_RoundValue < 0)
                    m_RoundValue = 0;
                transform.rotation = Quaternion.Euler(new Vector3(0, 0, -m_RoundValue));
            }
            else
            {

                m_RoundValue += 8f;
                if (m_RoundValue > 0)
                    m_RoundValue = 0;
                transform.rotation = Quaternion.Euler(new Vector3(0, 0, -m_RoundValue));

            }
        }
    }
}