关于Unity中UGUI图片Image实现仿视频播放窗口的四角缩放功能

Posted 魔卡先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于Unity中UGUI图片Image实现仿视频播放窗口的四角缩放功能相关的知识,希望对你有一定的参考价值。

应用方法:将下面脚本挂载在需要实现四角缩放功能的UI图片上即可.

自定义拖拽精度(与边界距离多少内触发)m_validityWidth.

 

  1 /*************************************************
  2  * 项目名称:UGUI通用
  3  * 脚本创建人:魔卡
  4  * 脚本创建时间:2017.12.14
  5  * 脚本功能:UI图片仿视频窗口缩放
  6  * ***********************************************/
  7 using UnityEngine;
  8 using System.Collections;
  9 using System.Diagnostics;
 10 using UnityEngine.EventSystems;
 11 using Debug = UnityEngine.Debug;
 12 
 13 //图片仿视频窗口缩放类
 14 public class UIDragResizeByMocha : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
 15 {
 16     [Header( "有效检测的边缘宽度")]
 17     public float m_validityWidth = 10f;
 18 
 19     //存储操作的拖拽方向(默认为无操作)
 20     private DragDirection m_direction = DragDirection.None;
 21 
 22     //1.上方  //5.左上角
 23     //2.下方  //6.左下角
 24     //3.左方  //7.右上角
 25     //4.右方  //8.右下角
 26 
 27     //存储当前操作图片位置
 28     private Vector3 tTargetPos;
 29     //存储鼠标位置
 30     private Vector3 tMousePos;
 31     //存储当前图片宽度
 32     private float tWidth;
 33     //存储当前图片高度
 34     private float tHeight;
 35 
 36     //存储不动点位置坐标
 37     //解释一下:当我们拖动每个边界时至少有一个点时应该不动的,我们就以该点为基准点,当拖动单面有两点不动时我们取两点的中间点为基准点
 38     private Vector3 m_basePoint;
 39 
 40     /// <summary>
 41     /// 拖拽时刷新数据
 42     /// </summary>
 43     /// <param name="eventData"></param>
 44     void DoRefresh(PointerEventData eventData)
 45     {
 46         //刷新鼠标位置
 47         tMousePos = eventData.position;
 48         //刷新图片位置
 49         tTargetPos = transform.position;
 50         //刷新图片宽度
 51         tWidth = GetComponent<RectTransform>().sizeDelta.x;
 52         //刷新图片高度
 53         tHeight = GetComponent<RectTransform>().sizeDelta.y;
 54     }
 55 
 56     //拖动开始触发
 57     public void OnBeginDrag(PointerEventData eventData)
 58     {
 59         //刷新数据方法
 60         DoRefresh(eventData);
 61        
 62     }
 63     //拖动进行中触发
 64     public void OnDrag(PointerEventData eventData)
 65     {
 66         //刷新数据方法
 67         DoRefresh(eventData);
 68 
 69         #region 判定拖动方向
 70         //如果鼠标位置离左侧边界的限定距离内,设置对应的方向
 71         if (tMousePos.x < (tTargetPos.x - tWidth/2.0f + m_validityWidth))
 72         {
 73             m_direction = DragDirection.Left;
 74             //
 75             if (tMousePos.y > (tTargetPos.y + tHeight/2.0f - m_validityWidth))
 76             {
 77                 m_direction = DragDirection.LeftUp;
 78             }
 79                 //
 80             else if ((tMousePos.y < (tTargetPos.y - tHeight / 2.0f + m_validityWidth)))
 81             {
 82                 m_direction = DragDirection.LeftDown;
 83             }
 84            
 85         }
 86         //如果鼠标位置离右侧边界的限定距离内
 87         else if(tMousePos.x > (tTargetPos.x + tWidth/2.0f - m_validityWidth))
 88         {
 89             m_direction = DragDirection.Right;
 90             //
 91             if (tMousePos.y > (tTargetPos.y + tHeight / 2.0f - m_validityWidth))
 92             {
 93                 m_direction = DragDirection.RightUp;
 94             }
 95             //
 96             else if ((tMousePos.y < (tTargetPos.y - tHeight / 2.0f + m_validityWidth)))
 97             {
 98                 m_direction = DragDirection.RightDown;
 99             }
100         }
101         //如果鼠标位置离上侧边界的限定距离内
102         else if (tMousePos.y > (tTargetPos.y + tHeight / 2.0f - m_validityWidth))
103         {
104             m_direction = DragDirection.Up;
105             //
106             if (tMousePos.x < (tTargetPos.x - tWidth/2.0f + m_validityWidth))
107             {
108                 m_direction = DragDirection.LeftUp;
109             }
110             //
111             else if (tMousePos.x > (tTargetPos.x + tWidth/2.0f - m_validityWidth))
112             {
113                 m_direction = DragDirection.RightUp;
114             }
115         }
116         //如果鼠标位置离下侧边界的限定距离内
117         else if ((tMousePos.y < (tTargetPos.y - tHeight/2.0f + m_validityWidth)))
118         {
119             m_direction = DragDirection.Down;
120             //
121             if (tMousePos.x < (tTargetPos.x - tWidth/2.0f + m_validityWidth))
122             {
123                 m_direction = DragDirection.LeftDown;
124             }
125             //
126             else if (tMousePos.x > (tTargetPos.x + tWidth/2.0f - m_validityWidth))
127             {
128                 m_direction = DragDirection.RightDown;
129             }
130         }
131         else
132         {
133             m_direction = DragDirection.None;
134         }
135 
136 
137     #endregion
138 
139         //根据当前判定的方向做出相应的仿视频窗口缩放
140         switch (m_direction)
141         {
142             case DragDirection.Left :
143                 DoLeft();
144                 break;
145             case DragDirection.Right :
146                 DoRight();
147                 break;
148             case DragDirection.Up:
149                 DoUp();
150                 break;
151             case DragDirection.Down :
152                 DoDown();
153                 break;
154             case DragDirection.LeftUp :
155                 DoLeftUp();
156                 break;
157             case DragDirection.LeftDown :
158                 DoLeftDown();
159                 break;
160             case DragDirection.RightUp:
161                 DoRightUp();
162                 break;
163             case DragDirection.RightDown :
164                 DoRightDown();
165                 break;
166             default :
167                 Debug.Assert(false);
168                 break;
169         }
170             
171     }
172 
173     #region 各个方向对应的调整方法
174     /// <summary>
175     /// 左拖动改变图片横向大小
176     /// </summary>
177     void DoLeft()
178     {
179         //设定基准点坐标
180         m_basePoint = tTargetPos + new Vector3(tWidth/2.0f,0,0);
181         //设定图片宽度
182         float ttWidth = Mathf.Abs(m_basePoint.x - tMousePos.x);
183         GetComponent<RectTransform>().sizeDelta = new Vector2(ttWidth, tHeight);
184         //设置图片位置
185         transform.position = m_basePoint - new Vector3(ttWidth/2.0f, 0, 0);
186     }
187     /// <summary>
188     /// 右拖动改变图片横向大小
189     /// </summary>
190     void DoRight()
191     {
192         //设定基准点坐标
193         m_basePoint = tTargetPos - new Vector3(tWidth / 2.0f, 0, 0);
194         //设定图片宽度
195         float ttWidth = Mathf.Abs(m_basePoint.x - tMousePos.x);
196         GetComponent<RectTransform>().sizeDelta = new Vector2(ttWidth, tHeight);
197         //设置图片位置
198         transform.position = m_basePoint + new Vector3(ttWidth / 2.0f, 0, 0);
199     }
200     /// <summary>
201     /// 上拖动改变图片横向大小
202     /// </summary>
203     void DoUp()
204     {
205         //设定基准点坐标
206         m_basePoint = tTargetPos - new Vector3(0, tHeight /2.0f, 0);
207         //设定图片高度
208         float ttHeight = Mathf.Abs(m_basePoint.y - tMousePos.y);
209         GetComponent<RectTransform>().sizeDelta = new Vector2(tWidth, ttHeight);
210         //设置图片位置
211         transform.position = m_basePoint + new Vector3(0, ttHeight/2.0f, 0);
212     }
213     /// <summary>
214     /// 下拖动改变图片横向大小
215     /// </summary>
216     void DoDown()
217     {
218         //设定基准点坐标
219         m_basePoint = tTargetPos + new Vector3(0, tHeight / 2.0f, 0);
220         //设定图片高度
221         float ttHeight = Mathf.Abs(m_basePoint.y - tMousePos.y);
222         GetComponent<RectTransform>().sizeDelta = new Vector2(tWidth, ttHeight);
223         //设置图片位置
224         transform.position = m_basePoint - new Vector3(0, ttHeight / 2.0f, 0);
225     }
226     /// <summary>
227     /// 左上拖动改变图片横向大小
228     /// </summary>
229     void DoLeftUp()
230     {
231         //设定基准点坐标
232         m_basePoint = tTargetPos + new Vector3(tWidth / 2.0f, -tHeight /2.0f, 0);
233         //设定图片宽度
234         float ttWidth = Mathf.Abs(m_basePoint.x - tMousePos.x);
235         //设定图片高度
236         float ttHeight = Mathf.Abs(m_basePoint.y - tMousePos.y);
237         GetComponent<RectTransform>().sizeDelta = new Vector2(ttWidth, ttHeight);
238         //设置图片位置
239         transform.position = m_basePoint + new Vector3(-ttWidth / 2.0f, ttHeight / 2.0f, 0);
240     }
241     /// <summary>
242     /// 左下拖动改变图片横向大小
243     /// </summary>
244     void DoLeftDown()
245     {
246         //设定基准点坐标
247         m_basePoint = tTargetPos + new Vector3(tWidth / 2.0f, tHeight / 2.0f, 0);
248         //设定图片宽度
249         float ttWidth = Mathf.Abs(m_basePoint.x - tMousePos.x);
250         //设定图片高度
251         float ttHeight = Mathf.Abs(m_basePoint.y - tMousePos.y);
252         GetComponent<RectTransform>().sizeDelta = new Vector2(ttWidth, ttHeight);
253         //设置图片位置
254         transform.position = m_basePoint + new Vector3(-ttWidth / 2.0f, -ttHeight / 2.0f, 0);
255     }
256     /// <summary>
257     /// 右上拖动改变图片横向大小
258     /// </summary>
259     void DoRightUp()
260     {
261         //设定基准点坐标
262         m_basePoint = tTargetPos + new Vector3(-tWidth / 2.0f, -tHeight / 2.0f, 0);
263         //设定图片宽度
264         float ttWidth = Mathf.Abs(m_basePoint.x - tMousePos.x);
265         //设定图片高度
266         float ttHeight = Mathf.Abs(m_basePoint.y - tMousePos.y);
267         GetComponent<RectTransform>().sizeDelta = new Vector2(ttWidth, ttHeight);
268         //设置图片位置
269         transform.position = m_basePoint + new Vector3(ttWidth / 2.0f, ttHeight / 2.0f, 0);
270     }
271     /// <summary>
272     /// 右下拖动改变图片横向大小
273     /// </summary>
274     void DoRightDown()
275     {
276         //设定基准点坐标
277         m_basePoint = tTargetPos + new Vector3(-tWidth / 2.0f, tHeight / 2.0f, 0);
278         //设定图片宽度
279         float ttWidth = Mathf.Abs(m_basePoint.x - tMousePos.x);
280         //设定图片高度
281         float ttHeight = Mathf.Abs(m_basePoint.y - tMousePos.y);
282         GetComponent<RectTransform>().sizeDelta = new Vector2(ttWidth, ttHeight);
283         //设置图片位置
284         transform.position = m_basePoint + new Vector3(ttWidth / 2.0f, -ttHeight / 2.0f, 0);
285     }
286     #endregion 
287     
288     //拖动结束触发
289     public void OnEndDrag(PointerEventData eventData)
290     {
291         //重置拖动方向
292         m_direction = DragDirection.None;
293     }
294 
295 }
296 
297 /// <summary>
298 /// 拖拽方向枚举
299 /// </summary>
300 public enum DragDirection
301 {
302     None,       //
303     Up,         //
304     Down,       //
305     Left,       //
306     Right,      //
307     LeftUp,     //左上
308     RightUp,    //右上
309     LeftDown,   //左下
310     RightDown   //右下
311 }

 

以上是关于关于Unity中UGUI图片Image实现仿视频播放窗口的四角缩放功能的主要内容,如果未能解决你的问题,请参考以下文章

关于Unity中UGUI 图片实现拖拽功能

Unity技术手册-UGUI零基础详细教程-Image图片

unity 怎样程序读一个图片(Texture)把他赋值给ugui的image.sprite

Unity笔记UGUI的ImageRawImage控件

Unity中为UGUI中的Image置空

unity ugui图片自适应文字内容大小