2D路徑

實個體、實例，以及其 API 方法和屬性，讓你能夠實現 2D 曲線和 2D 彎曲線，這些都是用於 UI 效果的，如路徑動畫和圖形編輯器。

創建2D路徑

要將 Path2D 添加到屏幕或經驗對物件：

1. 在 導航器 窗口中，插入一個 Path2D 實例在可見的 ScreenGui 或 SurfaceGui 下（它不需要是直接子）。

   

2. 選擇新的 Path2D 以顯示在小工具中的工具 widget。默認情況下，選擇 添加點數 工具。

   

3. 開始點擊屏幕以添加一系列 控制點 來形成路徑。初始路徑可能不精確，但您可以在稍後調整任何控制點的位置精確。

   

   如果您在點擊後拖動鼠標，角度將在該點創建。斜角也可以透過程序 添加 到任何控制點。

4. 完成時，單擊 widget 的 完成 按鈕或按下 Enter 。

修改控制點

在 Path2D 階層中選擇 ，您可以修改其個別控制點以及其 切角 。

移動點

若要在路徑上移動個別控制點，請啟用 選擇 工具(V)，然後點擊並拖曳到新位置。

對於非常特定的定位，請選擇控制點，然後，在 屬性 窗口中設置點的 SelectedControlPointData 屬性新位置（UDim2）。

請注意，一個點的位置不是絕對的，而是相對於路徑的父容器 相對 。例如，比較左側的控制點 30% 與頂部的控制點 20% 對於位於 內的路徑，與位於右上角的 內的相同路徑相比。

添加點數

新控制點可以添加到 Path2D 兩個現有點之間，或使用 添加點 工具從任何一端點到另一端點 ( P )。

>

>

刪除點

要刪除控制點，將鼠標懸停在上面，然後按一下右鍵，然後從上下文對話框選擇 刪除點 。

控制點斜角

控制點 切角 讓您在路徑上創建和調整曲線。

添加斜角

要將斜角添加到任何控制點，該控制點尚未有斜角：

1. 在工具箱中啟用 添加極限 工具。

   

2. 將鼠標懸停在所需的控制點上，然後單擊以添加兩個鏡像斜角(可選擇在單擊後拖動以調整新斜角)。

   

調整斜角

要調整個人控制點的現有斜角：

1. 啟用 選擇 工具(V)。

   

2. 將鼠標懸停在極限標記上(不是控制點)，然後單擊並拖動到新位置。如果極角被鏡像，則配對的極角點會一起移動。

   

要手動設置特定 UDim2 位置以用於切角：

1. 啟用 選擇 工具 ( V ) 並選擇控制點。在 屬性 窗口中，擴展 SelectedControlPointData 欄位以暴露 LeftTangent 和 RightTangent 屬性。

   

2. 設置 LeftTangent 和/或 RightTangent 的位置。請注意，這會 破壞極角的鏡像行為 。

刪除斜角

若要刪除控制點的兩個斜角，請將鼠標懸停在該點上，然後按一下右鍵，然後從上下文對話框選擇 清除斜角 。

若要刪除僅一個斜角（左或右），將鼠標懸停在該斜角標記上，然後按一下右鍵，然後選擇 刪除斜角 。

破碎和鏡像

預設情況下，斜角會相互鏡像。當您 拖曳以調整一個斜角標記時，配對的斜角點會一起移動。

要「破壞」斜角，讓每個獨立於另一個，將關聯的控制點漂移到右邊，然後從上下文選單中選擇 斷開斜角 。一旦破碎，您可以移動每個斜角標記，不會影響其他標記。

路徑視覺特性

您可以使用以下屬性自訂 Path2D 的視覺外觀：

>

>

>

路徑指令碼化

腳本對於多個路徑相關的工作流程有用。以下例子使用方法，例如 GetControlPoints() ，返回一個表 Path2DControlPoints 和 GetPositionOnCurveArcLength() 返回沿著曲線的 UDim2 位置的 t 位置。

在路徑上整理 UI 對象
local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")

local function arrangeChildren()
	local segmentCount = #path:GetControlPoints()
	local objectsToArrange = {}

	for _, child in parent:GetChildren() do
		if child:IsA("GuiObject") then
			table.insert(objectsToArrange, child)
		end
	end

	for idx, child in objectsToArrange do
		local t = idx / (#objectsToArrange + 1)
		child.Position = path:GetPositionOnCurveArcLength(t)
	end
end

-- 初始化路徑上的兒童 UI 對象
arrangeChildren()

-- 聆聽孩子被添加或移除以調整配置
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

沿路動畫使用者介面對路徑
local Tweenservice = game:GetService("TweenService")

local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")
local objectToAnimate = parent:FindFirstChildWhichIsA("GuiObject")

local TWEEN_DURATION = 4
local TWEEN_EASING_STYLE = Enum.EasingStyle.Cubic
local TWEEN_EASING_DIRECTION = Enum.EasingDirection.InOut

local pathSampleValue = Instance.new("NumberValue")
local tweenInfo = TweenInfo.new(TWEEN_DURATION, TWEEN_EASING_STYLE, TWEEN_EASING_DIRECTION, 0, true, 2)
local tween = Tweenservice:Create(pathSampleValue, tweenInfo, {Value = 1})

local function onSampleValueChanged()
	objectToAnimate.Position = path:GetPositionOnCurveArcLength(pathSampleValue.Value)
end
pathSampleValue.Changed:Connect(onSampleValueChanged)

tween:Play()