返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Unity UI实现拖拽旋转
  • 493
分享到

Unity UI实现拖拽旋转

2024-04-02 19:04:59 493人浏览 八月长安
摘要

本文实例为大家分享了Unity UI实现拖拽旋转的具体代码,供大家参考,具体内容如下 跟随鼠标旋转 第一种效果是跟随鼠标旋转,原理是计算下鼠标位置与拖拽物体的相对位移 旋转方向即可

本文实例为大家分享了Unity UI实现拖拽旋转的具体代码,供大家参考,具体内容如下

跟随鼠标旋转

第一种效果是跟随鼠标旋转,原理是计算下鼠标位置与拖拽物体的相对位移

旋转方向即可

注意转换对应空间坐标

新建脚本mono类继承 IBeginDragHandler, IDragHandler, IEndDragHandler 接口


[SerializeField] private canvas m_Canvas;
    
    private Vector3? CalculateWorldToScreenPos(Vector3 worldPos)
    {
        if (m_Canvas.renderMode == RenderMode.ScreenSpaceCamera)
        {
            return m_Canvas.worldCamera.WorldToScreenPoint(worldPos);
        }
        else if (m_Canvas.renderMode == RenderMode.ScreenSpaceOverlay)
        {
            Vector3 screenPos = m_Canvas.transfORM.InverseTransformPoint(worldPos);
            var rectTrans = m_Canvas.transform as RectTransform;
            screenPos.x += rectTrans.rect.width * 0.5f * rectTrans.localScale.x;
            screenPos.y += rectTrans.rect.height * 0.5f * rectTrans.localScale.y;
            return screenPos;
        }

        return null;
    }
    
    public void OnDrag(PointerEventData eventData)
    {
        if (eventData.button != PointerEventData.InputButton.Left) return;
        
        //计算当前物体距离画布左下角位置
        Vector3? curScreenPos = CalculateWorldToScreenPos(transform.position);
        if (curScreenPos == null) return;
        //鼠标位置偏移量
        Vector2 offset = eventData.position - (Vector2)curScreenPos.Value;
        if (offset != Vector2.zero)
        {
            transform.rotation = QuaterNIOn.FromToRotation(Vector3.up, offset);
        }
    }

设置下箭头锚点

效果如下:

手指拖拽旋转

第二种是根据旋转速度来旋转UI 可以实现一些齿轮交互滚动和车把方向盘交互滚动


//旋转速度
[SerializeField] private float m_RotateSpeed;
    
    public void OnDrag(PointerEventData eventData)
    {
        if (eventData.button != PointerEventData.InputButton.Left) return;

        //手指滑动偏移量
        Vector2 mouseXY = eventData.delta;
        mouseXY *= m_RotateSpeed;

        //计算当前物体距离画布左下角位置
        Vector3? curScreenPos = CalculateWorldToScreenPos(transform.position);
        if (curScreenPos == null) return;
        //手指位置偏移量
        Vector2 offset = eventData.position - (Vector2)curScreenPos.Value;

        float value;
        if (Mathf.Abs(mouseXY.x) > Mathf.Abs(mouseXY.y)) // 判断水平滑动还是垂直滑动
        {
            //手指往水平滑动   下面旋转跟随偏移参数  上面与偏移参数相反
            value = mouseXY.x * Mathf.Sign(-offset.y);
        }
        else
        {
            //手指垂直滑动    右边跟随偏移参数    左边与偏移参数相反
            value = mouseXY.y * Mathf.Sign(offset.x);
        }

        transform.Rotate(Vector3.forward, value, Space.Self);

    }

效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Unity UI实现拖拽旋转

本文链接: https://lsjlt.com/news/127657.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Unity UI实现拖拽旋转
    本文实例为大家分享了Unity UI实现拖拽旋转的具体代码,供大家参考,具体内容如下 跟随鼠标旋转 第一种效果是跟随鼠标旋转,原理是计算下鼠标位置与拖拽物体的相对位移 旋转方向即可 ...
    99+
    2024-04-02
  • Unity 从UI中拖拽对象放置并拖动效果 附demo
    需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置。做了一个小Demo,如下图所示: 实现大致思路: 射线碰撞检测 对象空间...
    99+
    2024-04-02
  • Unity如何从UI中拖拽对象放置并拖动效果
    这篇文章主要介绍Unity如何从UI中拖拽对象放置并拖动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置。做了一个小Demo,...
    99+
    2023-06-15
  • JS前端canvas交互实现拖拽旋转及缩放示例
    目录正文拖拽旋转缩放小结正文 到目前为止,我们已经能够对物体进行点选和框选的操作了,但是这还不够,因为并没有什么实际性的改变,并且画布看起来也有点呆板,所以这个章节的主要目的就是让画...
    99+
    2022-11-13
    JS前端canvas交互 JS前端拖拽旋转缩放
  • vue+element-ui+sortable.js实现表格拖拽功能
    本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下 效果如下: 1.vue使用cli创建项目就不说了,本人使用...
    99+
    2024-04-02
  • 小程序的拖拽、缩放和旋转手势功能怎么实现
    这篇文章主要介绍“小程序的拖拽、缩放和旋转手势功能怎么实现”,在日常操作中,相信很多人在小程序的拖拽、缩放和旋转手势功能怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序的拖拽、缩放和旋转手势功能怎...
    99+
    2023-06-26
  • jquery ui sortable如何实现拖拽后保存位置
    这篇文章主要介绍了jquery ui sortable如何实现拖拽后保存位置,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。jqueryUI ...
    99+
    2024-04-02
  • element UI中el-dialog实现拖拽功能示例代码
    element UI中dialog组件经常会用到,如果能让其任意拖拽放到不同的位置就更好了,实现方法如下: dialogDraggable.js代码: import Vue from...
    99+
    2022-12-29
    elementui dialog可拖拽 el-dialog el-dialog可拖动拖拽功能
  • vue2结合element-ui的gantt图实现可拖拽甘特图
    目录一、前言二、主要功能三、功能实现四、实现效果 总结一、前言   接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看...
    99+
    2022-11-16
    vue2 可拖拽甘特图 Vue 甘特图 甘特图vue控件
  • vuedraggable实现拖拽功能
    本文实例为大家分享了vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 项目需求 简单实现一个vue拖拽小案例,右侧选项区拖拽到左侧目标区域,拖动成功的不能再...
    99+
    2024-04-02
  • html5如何实现拖拽
    这篇文章主要介绍了html5如何实现拖拽,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html5实现拖拽的方法:首先新建一个空的HTML5结构;然后在body元素中放置一个d...
    99+
    2023-06-15
  • 拖拽插件sortable.js实现el-table表格拖拽效果
    目录问题描述案例一 简单拖拽代码附上案例二 el-table表格拖拽效果图代码附上问题描述 Sortable.js是一款优秀的js拖拽库,因为是原生js写的,所以性能不错,也支持移动...
    99+
    2024-04-02
  • unity 实现摄像机绕某点旋转一周
    在Update函数中执行: if (turnAround) { playerCamera.RotateAround(transform.localPosition, ...
    99+
    2024-04-02
  • Vue实用功能之实现拖拽元素、列表拖拽排序
    目录Vue实现拖拽元素、列表拖拽排序组件使用补充:排序动画总结Vue实现拖拽元素、列表拖拽排序 需求:    1、左右两个容器,左边和右边的元素可以拖动...
    99+
    2022-11-13
    vue列表拖拽排序 vue实现拖拽功能 vue实现组件拖拽
  • Android UI之ImageView实现图片旋转和缩放
    这一篇,给大家介绍一下ImageView控件的使用,ImageView主要是用来显示图片,可以对图片进行放大、缩小、旋转的功能。 android:sacleType属性指定Im...
    99+
    2022-06-06
    图片 Android
  • vue实现拖拽小图标
    如何给vue项目里面写拖拽悬浮小图标呢,供大家参考,具体内容如下 首先 1、html文件 一定要给父盒子一个ID <div       class="xuanfu"      ...
    99+
    2024-04-02
  • react-dnd如何实现拖拽
    这篇文章主要介绍了react-dnd如何实现拖拽的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react-dnd如何实现拖拽文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • 怎么实现react拖拽hooks
    这篇文章主要介绍了怎么实现react拖拽hooks,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言源码总共也就一百多行,看完这个大致可以理解一些成熟的react拖拽库的实现...
    99+
    2023-06-14
  • js实现模态框拖拽
    本文实例为大家分享了js实现模态框拖拽的具体代码,供大家参考,具体内容如下 效果展示和需求分析 效果展示 需求分析 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏。输入密码时可以...
    99+
    2024-04-02
  • javascript实现登录框拖拽
    本文实例为大家分享了javascript实现登录框拖拽的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> ...
    99+
    2022-11-13
    js登录框拖拽 js登录框 js拖拽
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作