用户界面拖动探测器

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。然而，您可能想在构建不同的 UI 组件时更改 ReferenceUIInstance 或 DragAxis。

对动作的响应

UIDragDetector.ResponseStyle 属性指定了对象的位置值如何通过提议的运动而更改。自定义响应风格允许您使用结果的 UIDragDetector.DragUDim2 和 UIDragDetector.DragRotation 值按需使用，而不需要检测器的父执行提出的运动。

翻译和旋转限制

默认情况下，没有 2D 运动的限制在 DragStyle 的内在限制之后。如果需要，可以使用以下属性来宣言最小和最大翻译和旋转的限制。此外，您可以定义拖动对象如何在指定的 GuiObject 范围内受限，例如 Frame 。

速度调整

通过 SelectionModeDragSpeed 和 SelectionModeRotateSpeed , 您可以精确调整探测器的最大拖动/旋转速度。此外，通过 UIDragSpeedAxisMapping , 您可以根据检测器的 **** 调整 X / SelectionModeDragSpeed 维度拖动速度。

脚本对单击和拖动的响应

通过事件信号、属性更改、Scriptable和自定义函数，脚本可以回应拖动到的用户界面元素的操作，驱动各种设置或做出逻辑决定，例如调整音乐和音效音量单独的滑块。

事件信号

通过以下事件信号，您可以检测用户是否开始、继续和结束拖动对象。

以下滑块将其容器指定为 BoundingUI 来限制其在容器区域内的移动，允许基于缩放的 TranslateLine 拖动被限制到容器全宽而不需要额外的脚本。

UIDragDetector - 事件信号透明度更改
-- 层次是 SliderContainer ⟩ 处理 ⟩ 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  -- 可拖动的 UI 元素
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 (位置) 和一个浮点(旋转)。探测器将更新对象到计算位置/旋转，根据返回、》属性和》属性计算。

默认情况下，返回的 和漂浮将是检测器父元素舱的本地空间中的最终位置/旋转。现有的翻译/旋转限制仍然适用，也会受到指定的 BoundingUI 实例设置的边界限制。

以下示例拖动一个由更改 X 坐标输入计算的弦波后的 UI 元素。请注意，检测器的 DragSpace 设置为 Enum.UIDragDetectorDragSpace.Relative 。

UIDragDetector - 拖动跟随弧波
local frame = script.Parent  -- 可拖动的 UI 元素
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  Delta 以便它在屏幕上显示正 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")  -- 可拖动的 UI 元素
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)