uGUI练习(五) Draggable Object

简介:



练习目标

学习制作一个可拖动的UI

一、步骤

监听UI的Drag事件,需要我们写一点点的代码。

1、创建一个Panel ,设置size为(100,100)

2、创建DraggableObjectScene.cs脚本

3、把脚本绑定在Panel上

image

4、脚本内容如下:

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

public class DraggableObjectScene : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler
{
    //Drag事件,设置目标的位置为鼠标的位置
    public void OnDrag(PointerEventData eventData)
    {
        GetComponent<RectTransform>().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);
    }
}

Class DraggableObjectScene 继承了IDragHandler,IPointerDownHandler,IPointerUpHandler三个接口,从而可以接受到 OnDrag(PointerEventData eventData)  ,OnPointerDown(PointerEventData eventData)   ,OnPointerUp(PointerEventData eventData)  三个事件

二、事件系统

Namespace:UnityEngine.EventSystems

IDragHandler (MouseDrag)

Interface to implement if you wish to receive OnDrag callbacks.

IPointerDownHandler (MouseDown)

Interface to implement if you wish to receive OnPointerDown callbacks.

IPointerUpHandler (MouseUp)

Interface to implement if you wish to receive OnPointerUp callbacks.

三、Drag 效果

Drag UI

本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/3972923.html,如需转载请自行联系原作者


相关文章
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
68 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
349 1
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
489 0
|
JavaScript 容器
Element UI - v-infinite-scroll无限滚动组件
Element UI - v-infinite-scroll无限滚动组件
657 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
321 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui:el-dialog遮罩层变黑
element-ui:el-dialog遮罩层变黑
526 0
|
前端开发 JavaScript
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
ab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
|
定位技术 前端开发
openlayers4、5之卷帘地图SWIPE MAP
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82753937 openlayers之卷帘地图SWIPE MAP 功能说明 **卷帘指,同一屏幕,左右或者上下同时看到两个图层,可以直观的进行对比。
1942 0
|
前端开发 JavaScript
jquery + Bootstrap : data-toggle="popover"鼠标放上去显示悬浮层 Tips
image.png jquery鼠标放上去显示悬浮层 Tips html js $(() => { var tip = $('#time_range_fa'); $(tip).
2169 0