博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
uGUI练习(七) Drag And Drop
阅读量:6874 次
发布时间:2019-06-26

本文共 2643 字,大约阅读时间需要 8 分钟。

练习目标

练习UI的拖放操作

一、相关组件

  • EventTrigger
  • Canvas Group
  • ScrollRect
  • Mask
  • Scrollbar

二、拖放练习

1、创建一个Panel,命名Panel1,添加EventTrigger组件,稍稍改一下Panel的颜色

2、Panel1下创建一个Text,输入”Test Draggable\n       object”,设置字体颜色及Text超出处理

DragDropScene.cs代码

3、在 一文中,已经大概了解uGUI的EventSystem,需要继承三个事件接口,接下来我们创建一个DragDropScene.cs,代码如下

using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;public class DragDropScene : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler {    public void OnDrag(PointerEventData eventData)    {        GetComponent
().pivot.Set(0,0); transform.position=Input.mousePosition; } public void OnPointerDown(PointerEventData eventData) { transform.localScale=new Vector3(0.7f,0.7f,0.7f); } public void OnPointerUp(PointerEventData eventData) { transform.localScale=new Vector3(1f,1f,1f); }}

4、上面的代码就是 按下,拖动,抬起 这三个事件的处理.把这个脚本绑定在Panel1,按Ctrl+P 运行游戏,在Game视图我们就可以拖动Panel1了.

5、选中创建好的Panel1,按Ctrl+D Copy 几个Panel,更改成不同的颜色,如下图所示:

6、在上面的步骤中,我们创建了几个Panel1,并且给它们都绑定了DragDropScene.cs,但还没有实现Drop的事件;

接下来,我们创建一个Panel,命名DropPanel,用来作停放Panel的容器

7、在DropPanel下创建一个Panel,命名Grid,并给它添加Grid Layout Group和Canvas Group组件

8、为了让我们知道Drop是可以停放的,我们在Grid下创建两个Panel,同样的给它们绑定DragDropScene.cs,如下图:

9、接下来就是把Panel,拖动并停放在DropPanel下,如下图所示

 

修改事件代码

10、打开DragDropScene.cs脚本,添加一行,并修改OnPointerDown(),OnPointUp( )

[SerializeField] GameObject grid=null,rootCanvas=null;
public void OnPointerDown(PointerEventData eventData){    transform.localScale=new Vector3(0.7f,0.7f,0.7f);    transform.parent=rootCanvas.transform;}

 

public void OnPointerUp(PointerEventData eventData){    transform.localScale=new Vector3(1f,1f,1f);    RaycastHit2D hit = Physics2D.Raycast(Input.mousePosition,-Vector2.up);    if (hit.collider != null) {        //如果射线检测到的gameobject为grid,就把当前Panel放在grid节点下        if(hit.collider.gameObject.name=="Grid")            transform.parent=grid.transform;    }}

上面的代码,当鼠标抬起时,如果是在Grid的上方,就把当前Panel设置在Grid下,鼠标按下时,设置当前Panel的Parent为rootCanvas11、为DragDropScene设置参数值:

 

12、到这一步,我们就可以拖动Panel放到Grid下了,为了避免Grid下的Panel超出,在一文中我们使用了SrollRect和Mask。所以现在我们就给DropPanel添加上这两个组件,当然最后也可以给DropPanel添加Scrollbar

组件代码

拖拽组件,修改部分代码,更符合实际项目中使用

仓库中搜索:DragDropTrigger

三、CanvasGroup

CanvasGroup是一个容器,可以用来改变child的Alpha,Raycasting,Enable state.

可以用来改变child元素的state.

比如:在一段时间内window变淡,在同一个group里的child元素的alpha值也会受到影响,alpha 值=任何嵌套的group相乘。乘以canvas元素的alpha值.

CanvasGroup 可以配置为不遮挡 射线(在这个group里的任何物件都不用为图形射线考虑) ,并且元素是否相互作用.

四、EventTrigger

从事件系统接收事件并调用每一个已注册的事件.

在每一个特殊的函数中,都可以使用EventTrigger,你可以在一个事件上注册多个函数,当EventTrigger接收事件时,将按提供的顺序调用.

注意:将EventTrigger组件绑定在任何Gameobject上之后,它将拦截一切事件,并在这个对象上没有冒泡事件出现.

五、Drag && Drop 效果

转载地址:http://zpofl.baihongyu.com/

你可能感兴趣的文章
执行计划小总结
查看>>
egg(114)--egg之订单详情
查看>>
关于区块链那些事(用Python3体现)
查看>>
我从编程教室毕业
查看>>
使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design
查看>>
Laravel+Dingo/Api 自定义响应
查看>>
【PHP 每日函数】第 01 周期
查看>>
SpiderData 2019年2月18日 DApp数据排行榜
查看>>
第十二天-《企业应用架构模式》-对象-关系结构模式
查看>>
这40款优质APP大合集,总有一个适合你!
查看>>
从理论到实践 全面理解HTTP/2
查看>>
JavaScript五十问——对比来说CSS的Grid与FlexBox(上篇)
查看>>
使用音频转换器怎么转换电影的格式?
查看>>
35. Search Insert Position
查看>>
webpack—url-loader 解决项目中图片打包路径问题
查看>>
thinkphp源码分析(四)—错误及异常处理篇
查看>>
Vue实现类似Spring官网图片滑动效果
查看>>
前嗅ForeSpider教程:数据浏览与可视化
查看>>
js 读取 input[type=file] 内容,直接显示文本 | 图片
查看>>
软件开发学习的5大技巧,你知道吗?
查看>>