使用者介面拖動偵測器

UIDragDetector 實例可以協助和鼓勵與體驗中的 2D 用戶介面元素的互動，例如滑塊、旋轉器和更多。關鍵功能包括：

• 在任何 GuiObject 實例下放置 UIDragDetector 來使其可以通過所有使用者輸入拖曳而不需要一行代碼。

• 從多個 DragStyle 選項中選擇，定義對象如何通過 ResponseStyle 回應運動，並可選擇應用軸、移動限制或拖動邊界。

• 腳本可以回應拖曳對象的操作來驅動邏輯回應，例如調整設置。

• 在 Studio 的編輯和播放模式工作，直到你不使用 選擇 , 移動 , 縮放 或 旋轉 工具，或某些插件或 Studio 的 UI 編輯工具。

讓介面元素可拖曳

要使任何 GuiObject 實例可拖曳，只需添加一個 UIDragDetector 作為直接後代。

1. 在 勘探者 視窗中，將鼠標懸停在 GuiObject 實例上，然後點擊 ⊕ 按鈕。一個上下文菜單顯示。

2. 從選單中插入 UIDragDetector 。

   

3. 預設情況下，對象現在將在 LayerCollector 介面上可拖曳。

自訂介面拖動偵測器

拖式風格

UIDragDetectors 將鼠標移動轉換為計算建議的2D運動和/或旋轉。通過 DragStyle 屬性，您可以從不同的映射中選擇滿足您需求的一個。例如， Enum.UIDragDetectorDragStyle.TranslatePlane 在 LayerCollector 的 2D 平面產生翻譯，而 Enum.UIDragDetectorDragStyle.Rotate 通常會產生旋轉而不是翻譯。

拖動方向

預設情況下，2D運動和相關的DragStyle地圖到祖先的空間LayerCollector。然而，您可能想在建立不同的使用者介面組件時變更 ReferenceUIInstance 或 DragAxis 。

回應動作

UIDragDetector.ResponseStyle 屬性指定對物件的位置值如何被提出的動作所更改。自訂回應風格讓您可以使用結果的 UIDragDetector.DragUDim2 和 UIDragDetector.DragRotation 值，無需讓偵測器的父執行提出的動作。

翻譯與旋轉限制

預設情況下，DragStyle 的內在限制後面的 2D 運動沒有限制。若需要，可以使用以下屬性來宣言最小和最大翻譯和旋轉限制。此外，您可以定義拖曳對象如何在指定的 GuiObject 範圍內受限，例如 Frame 。

速度調整

通過 SelectionModeDragSpeed 和 SelectionModeRotateSpeed , 您可以調整偵測器的最大拖動/旋轉速度。此外，通過 UIDragSpeedAxisMapping , 您可以根據偵測器的 **** 調整 X / SelectionModeDragSpeed 維度拖動速度。

點擊和拖動的腳本回應

通過 事件信號、屬性變更、Scriptable和自訂函數，腳本可以回應拖動到的用戶介面元素的操作來驅動各種設置或做出邏輯決定，例如調整音樂和音效音量獨立的滑塊。

事件信號

透過以下事件訊號，您可以偵測使用者開始、繼續和結束拖曳物件的時間。

下列滑塊將容器指定為 BoundingUI 來限制其在容器區域內的移動，允許基於比例的 TranslateLine 拖動被限制到容器全寬度，而無需額外的編寫腳本。

UIDragDetector - 事件訊號透明變更
-- 層級是滑塊容器 > 處理 > UIDragDetector > (此指令碼)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- 以比例設定拖動
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine  -- 限制拖曳到線
uiDragDetector.BoundingUI = sliderContainer

-- 初始設定容器透明度為手把理器的 X 縮放值
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale

-- 擴展手柄邊緣以指示抓取啟動
uiDragDetector.DragStart:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)

-- 透明度變更由拖入的比例決定
uiDragDetector.DragContinue:Connect(function(inputPosition)
	sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)

-- 將手柄邊界返回以指示抓取結束
uiDragDetector.DragEnd:Connect(function(inputPosition)
	handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

位置與旋轉變更

除了 事件信號 外，您還可以直接監控偵測器的 DragUDim2 和/或 DragRotation 屬性變更。

下列偵測器將其 DragStyle 設置為 Rotate ,允許使用者拖動手柄在色度旋轉環上移動,同時偵測拖動旋轉通過 Instance:GetPropertyChangedSignal() 。

UIDragDetector - 拖動旋轉變更
local handle = script.Parent.Parent  -- 可拖曳的介面元素
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate  -- 設置拖動風格以旋轉

local function changeHue()
	local currAngle = (math.fmod(handle.Rotation, 360)) / 360
	if currAngle < 0 then
		currAngle += 1
	end
	handle.BackgroundColor3 = Color3.fromHSV(currAngle, 1, 1)
end

-- 初始設定顏色來處理旋轉
changeHue()

-- 將連接功能連接到偵測器的拖動旋轉的 GetPropertyChangedSignal()
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

腳本拖式風格

如果您將偵測器的 UIDragDetector.DragStyle 設為 Enum.UIDragDetectorDragStyle.Scriptable ,您可以提供自己的功能，該功能會接收輸入位置的 Vector2 並返回一個 UDim2 (位置) 和一個浮點(旋轉)。偵測器會將對象更新到計算位置/旋轉，取決於返回值、DragSpace 屬性和 DragRelativity 屬性。

預設情況下，返回的 和漂浮將是偵測器父元素空間的本地位置/旋轉的最終位置/旋轉。現有的翻譯/旋轉限制仍然適用，也會受到指定的 BoundingUI 個體、實例例設置的邊界限制。

下面的例子拖動一個用於跟隨變化 X 坐標輸入計算的三角波後的 UI 元素。請注意，偵測器的 DragSpace 設為 Enum.UIDragDetectorDragSpace.Relative 。

UIDragDetector - 拖動跟隨的三角波
local frame = script.Parent  -- 可拖曳的介面元素
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")

local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75  -- 降低此值以增加頻率

uiDragDetector.DragStart:Connect(function(inputPosition)
	initialXValue = inputPosition.X
end)

local function computeSinWaveCoordinate(inputPosition)
	local deltaX = inputPosition.X - initialXValue
	-- 負 Y 刪除以便它在屏幕上上升「正 Y」變更
	local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
	return UDim2.fromOffset(deltaX, deltaY)
end

uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

自訂約束功能

UIDragDetectors 沒有內置網格和捕捉規則，但您可以註冊自定義約束函數來編輯偵測器的 UIDragDetector.DragUDim2 和 UIDragDetector.DragRotation ，在它們被應用之前。例如，您可以將位置回合到特定增量來保持網格上的運動，或定義允許的運動區域。請注意，此操作 在 任何現有翻譯/旋轉限制之前進行。

下面的例子使用一個限制函數，將平面拖動限制到 X / Y 網格，根據行和列的數量。請注意，偵測器的 ResponseStyle 設為 Enum.UIDragDetectorResponseStyle.Scale ，其 BoundingUI 設為網格容器。

UIDragDetector - 在網格上拖動，抓住瓷磚
-- 層級是 GridContainer ⟩ 處理 ⟩ UIDragDetector ⟩ (此指令碼)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle")  -- 可拖曳的介面元素
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")

uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale  -- 以比例設定拖動
uiDragDetector.DragRelativity = Enum.UIDragDetectorDragRelativity.Relative
uiDragDetector.BoundingUI = gridContainer

local NUM_COLUMNS = 10
local NUM_ROWS = 5

local xScaleIncrement = 1 / NUM_COLUMNS
local yScaleIncrement = 1 / NUM_ROWS
local initialParentPosition = uiDragDetector.Parent.Position

uiDragDetector.DragStart:Connect(function()
	initialParentPosition = uiDragDetector.Parent.Position
end)

local function dragToGridOnly(proposedPosition, proposedRotation)
	local griddedXScale = math.round(proposedPosition.X.Scale / xScaleIncrement) * xScaleIncrement
	local griddedYScale = math.round(proposedPosition.Y.Scale / yScaleIncrement) * yScaleIncrement

	return UDim2.fromScale(griddedXScale, griddedYScale), proposedRotation
end

uiDragDetector:AddConstraintFunction(1, dragToGridOnly)