Unity - UGUI精准拖拽UI(手指控制UI放大缩小)

最近在做的一个项目里面需要鼠标拖动一张图片移动,起初就使用了Drag的三个接口去实现这个功能,当完成后去查看发现拖拽是实现了,但是每次去拖拽的时候,图片的中心点就会自动到鼠标点的位置。所以为了解决这个问题就需要使用偏移量去解决它。Just do it.

update里的方法是放大缩小的功能,请忽略。

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

public class TouchDesgin : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    public bool isPrecision = true; //是否是精准拖拽

    private RectTransform m_rect;
    private Vector3 m_offset;
    private Touch oldTouch1;  //上次触摸点1(手指1)  
    private Touch oldTouch2;  //上次触摸点2(手指2) 

    void Start()
    {
        m_rect = transform.GetComponent<RectTransform>();
    }

    void Update()
    {
        //没有触摸  
        if (Input.touchCount <= 0)
        {
            return;
        }

        //单点触摸, 水平上下旋转  
        if (1 == Input.touchCount)
        {
            //Touch touch = Input.GetTouch(0);
            //Vector2 deltaPos = touch.deltaPosition;
            //transform.Rotate(Vector3.down * deltaPos.x, Space.World);
            //transform.Rotate(Vector3.right * deltaPos.y, Space.World);
        }

        if (2 == Input.touchCount)
        {
            //多点触摸, 放大缩小  
            Touch newTouch1 = Input.GetTouch(0);
            Touch newTouch2 = Input.GetTouch(1);

            //第2点刚开始接触屏幕, 只记录,不做处理  
            if (newTouch2.phase == TouchPhase.Began)
            {
                oldTouch2 = newTouch2;
                oldTouch1 = newTouch1;
                return;
            }

            //计算老的两点距离和新的两点间距离,变大要放大模型,变小要缩放模型  
            float oldDistance = Vector2.Distance(oldTouch1.position, oldTouch2.position);
            float newDistance = Vector2.Distance(newTouch1.position, newTouch2.position);

            //两个距离之差,为正表示放大手势, 为负表示缩小手势  
            float offset = newDistance - oldDistance;

            //放大因子, 一个像素按 0.01倍来算(100可调整)  
            float scaleFactor = offset / 100f;
            Vector3 localScale = transform.localScale;
            Vector3 scale = new Vector3(localScale.x + scaleFactor,
                                        localScale.y + scaleFactor,
                                        localScale.z + scaleFactor);

            //最小缩放到 0.3 倍  
            if (scale.x > 0.3f && scale.y > 0.3f && scale.z > 0.3f)
            {
                transform.localScale = scale;
                if (scale.x > 3 && scale.y > 3 && scale.z > 3)
                {
                    transform.localScale = new Vector3(3f, 3f, 3f);
                }
            }

            //记住最新的触摸点,下次使用  
            oldTouch1 = newTouch1;
            oldTouch2 = newTouch2;
        }
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        Vector3 tWorldPos;
        if (isPrecision)
        {
            RectTransformUtility.ScreenPointToWorldPointInRectangle(m_rect, eventData.position, eventData.pressEventCamera, out tWorldPos);
            m_offset = transform.position - tWorldPos;
        }
        else
        {
            m_offset = Vector3.zero;
        }
        SetDraggedPosition(eventData);
    }

    public void OnDrag(PointerEventData eventData)
    {
        SetDraggedPosition(eventData);
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        SetDraggedPosition(eventData);
    }

    /// <summary>
    /// 设置位置
    /// </summary>
    /// <param name="eventData"></param>
    private void SetDraggedPosition(PointerEventData eventData)
    {
        //存储当前鼠标所在位置
        Vector3 globalMousePos;
        //UI屏幕坐标转换为世界坐标
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(m_rect, eventData.position, eventData.pressEventCamera, out globalMousePos))
        {
            //设置位置及偏移量
            m_rect.position = globalMousePos + m_offset;
        }
    }
}

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Unity-UGUIUnity游戏引擎中的一个UI系统,可以用来创建和管理用户界面。它提供了丰富的功能和工具,使得开发者能够轻松地制作各种表格。 使用Unity-UGUI制作表格的步骤如下: 1. 创建Canvas对象:在Unity中,首先需要创建一个Canvas对象,作为UI渲染的容器。选择GameObject -> UI -> Canvas,即可创建一个Canvas对象。 2. 添加Table组件:选择Canvas对象,在Inspector面板中点击"Add Component"按钮,然后在搜索栏中输入"Table",选择适合的Table组件,点击添加。 3. 设置表格的行列数:在Table组件的Inspector面板中,设置表格所需的行数和列数。 4. 设置表格样式:可以在Inspector面板中设置表格的颜色、大小等属性,以满足具体需求。 5. 添加表格内容:可以通过代码或者拖拽方式,向表格中添加所需的文本或图片。可以通过操作表格的行列索引,将内容放置在特定的位置。 6. 设置表格的交互性:可以为表格中的每个单元格添加点击事件或其他交互效果,提升用户体验。 7. 调整表格布局:可以通过调整Canvas的大小、位置,或者改变组件之间的层次关系,来调整表格的布局。 8. 完善表格功能:可以根据具体需求,添加更多表格的功能,比如排序、过滤、搜索等。 9. 测试和优化:在表格制作完成后,可以进行测试,查看表格的显示效果和交互效果,并进行优化。 总之,使用Unity-UGUI制作表格,只需简单的操作和设置,就能够创建出各种样式、功能丰富的表格,满足游戏或应用程序的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值