關於Unity中UGUI圖片Image實現仿視頻播放窗口的四角縮放功能
阿新 • • 發佈：2017-12-15
重置 assert clas () strong unity 操作 寬度 腳本
應用方法：將下面腳本掛載在需要實現四角縮放功能的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實現仿視頻播放窗口的四角縮放功能