Unity3d realizes object dragging + picture overlay filling reality

    First of all, if you want to achieve the drag effect, you must understand that Unity3d has its own drag interface IBeginDragHandler, IDragHandler, IEndDragHandler. The three interfaces are start dragging, dragging and end dragging.

    This article takes the street to achieve two effects, one is to drag and follow the mouse, and the other is to achieve the effect of overlaying and filling the picture.

Achieving this effect is actually very simple, but requires a little simple calculation

The display method of Unity3d pictures provides a display method Filled filling method

After selection, 360-degree filling, horizontal or vertical filling can be performed. Vertical filling is selected here, and the initial position of Fill Origin filling is the right

Then go directly to the code

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;


public class DrageshowPicture: MonoBehavior, IBeginDragHandler, IDragHandler, IEndDragHandler {


    // start position
    public Vector3 startPosition;
    //Position difference, used to ensure the position difference with the mouse
    Vector3 deltaPosiiton;
    //Need to fill the realistic picture
    public Image BGimage;
    // start dragging
    public void OnBeginDrag(PointerEventData eventData)
    {
        startPosition = eventData.position;
        deltaPosiiton = transform.position - (Vector3)eventData.position;
    }
    // dragging


    public void OnDrag(PointerEventData eventData)
    {
        Vector3 change = (Vector3) eventData.position + deltaPosiiton;
        Vector3 v3 = Vector3.zero;
        v3.x = change.x;
        v3.y = transform.position.y;
        v3.z = transform.position.z;
        //After obtaining the width of the filled image, obtain the position of the edge on the screen, which is used to fix the drag button not to exceed
        float xmin = BGimage.transform.position.x - BGimage.GetComponent<RectTransform>().sizeDelta.x / 2;
        float xmax = BGimage.transform.position.x + BGimage.GetComponent<RectTransform>().sizeDelta.x / 2;
        Debug.Log(xmin);
        if (v3.x< xmin)
        {
            v3.x = xmin;
        }
        else if (v3.x > xmax)
        {
            v3.x = xmax;
        }


        
        transform.position = v3;
        //According to the distance from the edge of the button box screen, find the percentage and give the fill value
        BGimage.fillAmount = (xmax - v3.x) / (xmax - xmin);
    }
    //end dragging
    public void OnEndDrag(PointerEventData eventData)
    {
    }


}

In summary, the effect is achieved