依據?Unity插件之NGUI學習（2），創建一個UI Root，在UI Root下創建一個Texture作為背景圖，并設置圖片，在Wiget下調整大小；然后在UI Root下再創建一個Panel。

在Hierarchy窗體選中Panel，然后選擇菜單Component->NGUI->Interaction->Table，查看Inspector窗體，在Panel的屬性中添加了UITable。

Columns 表示每行有幾個元素

Direction 表示超過每列的元素后加入元素的方向

Sorting 元素排序的方式

Hide Inactive 默認勾選，全部看不到的子節點在排列時被忽略

Padding x,y方向的間隔，這里的值是基于NGUI的

創建一個Level的Prefab，在Hierarchy窗體下，加入多個Level，然后選中Panel，在Inspector中，用鼠標右擊UITable，并運行Execute，就能夠在預覽窗體看到排列好的Table界面了。

由于Panel在Inspector窗體的坐標是能夠調整的，可是它的大小也是基于NGUI的，為了能使整個Tabel界面居中放置，我必須計算其大小，然后將調整整個Panel的位置。

這里遇到一個問題，Level是用UISprite創建的，所以獲得的高度和寬度也是基于NGUI的，并不是是基于世界坐標系的，UITable的Padding也相同是。

問題的關鍵在于，全部的NGUI控件都是基于UIWidget的，所以從源代碼入手，會發現：

public override Vector3[] worldCorners
{
get
{
Vector2 offset = pivotOffset;


float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight;


Transform wt = cachedTransform;


mCorners[0] = wt.TransformPoint(x0, y0, 0f);
mCorners[1] = wt.TransformPoint(x0, y1, 0f);
mCorners[2] = wt.TransformPoint(x1, y1, 0f);
mCorners[3] = wt.TransformPoint(x1, y0, 0f);


return mCorners;
}
}

其坐標和尺寸都是通過Transform.TransformPoint()方法轉換的——變換位置從自身坐標到世界坐標。好了，以下就是我創建的TableTest 腳本，是掛在Panel上面的。

using UnityEngine;
using System.Collections;


public class TableTest : MonoBehaviour {

private UISprite level;
private UITable table;
private float tableWidth, tableHeight;


// Use this for initialization
void Start () {
table = GetComponent<UITable>();
level = GetComponentInChildren<UISprite>();
int columns = table.columns;

// 計算Table的row
int count = transform.childCount;
int rows = count % columns == 0 ? count / columns : count / columns + 1;

// 計算Table的寬度和高度，基于NGUI也就是自身原本的尺寸
tableWidth = columns * (level.width + 2 * table.padding.x);
tableHeight = rows * (level.height + 2 * table.padding.y);
Debug.Log("level width=" + level.width + ", height=" + level.height);
Debug.Log("table width=" + tableWidth + ", height=" + tableHeight);

// 將Table的寬度高度轉換到世界坐標系的偏移
Vector3 delta = transform.TransformPoint(new Vector3(-tableWidth / 2, tableHeight / 2, 0));
transform.Translate(delta);
}

// Update is called once per frame
void Update () {

}

}

這樣再執行游戲的話，就能看到整個Table會居中在整個預覽窗體。

總結

以上是生活随笔為你收集整理的Unity插件之NGUI学习（8）—— Table和NGUI尺寸转换为世界坐标系尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。