2D路径

该 Path2D 实例，以及其 API 方法和属性，让你实现 2D 曲线和 2D 弯曲线，这些都有助于实现路径基于动画和图形编辑器等用于用户界面效果的效果。

创建 2D 路径

要将 Path2D 添加到屏幕或体验对象：

在浏览器窗口中，插入一个 Path2D 实例在可见的 ScreenGui 或 SurfaceGui 下（它不需要是直接子）。
选择新的 Path2D 以显示在控件中的工具 widget。默认情况下，选择添加点工具。
开始单击屏幕以添加一系列控制点以形成路径。初始路径可能不精确，但您可以在稍后精确任何控制点的位置。

如果您在单击后拖动鼠标，枢角将在该点上创建。斜角也可以通过程序添加到任何控制点。
完成后，单击 widget 的完成按钮或按下 Enter .

修改控制点

在 Explorer 层次中选择》，您可以修改其个人控制点以及其 tangents 。

移动点

要移动路径上的单个控制点，请启用选择工具(V，然后单击并拖动到新位置。

Select tool indicated in the 2D path editor widget.

Diagram illustrating how a path control point is moved to a new position by clicking and dragging with the Select tool enabled.

对于非常特定的定位，请选择控制点，然后在属性窗口中设置点的 SelectedControlPointData 属性新位置（UDim2）。

SelectedControlPointData property of a Path2D instance indicated in the Properties window.

请注意，一个点的位置不是绝对的，而是相对于路径的父容器相对。例如，比较左侧的控制点 30% 与顶部的控制点 20% 对于位于内的路径，与位于右上角的中的相同路径相比。

Diagram illustrating how the positions of path control points are relative to their parent container.

添加点数

新的控制点可以添加到 Path2D 两个现有点之间或使用添加点工具从任意一端点到另一端点 ( P )。

Add Point tool indicated in the 2D path editor widget.

Diagram illustrating how a control point is added between two existing points using the Add Point tool. — 悬停在路径上的任何位置，然后单击以在两个现有点之间添加控制点

Diagram illustrating how a control point is added to the end of a path using the Add Point tool. — 单击终点，然后再次单击以从那个终点添加控制点

请记住，如果你在单击后拖动鼠标以添加新控制点，那么在该点上将创建切角。

删除点

要删除控制点，将鼠标悬停在它上面并单击右键，然后从上下文弹出菜单中选择删除点。

Diagram illustrating how a path control point is deleted by right-clicking it and selecting Delete Point.

控制点斜角

控制点斜角让你在路径上创建和调整曲线。

Diagram illustrating a curved path with several tangent control points.

添加斜角

要将枢角添加到任何尚未拥有枢角的控制点：

在工具控件中启用添加切角工具。
将鼠标悬停在所需控制点上，然后单击以添加两个镜像斜角（可选择在单击后拖动以调整新斜角）。

调整切角

要调整现有的斜角为单个控制点：

启用选择工具(V).
将鼠标悬停在渐变标记上（不是控制点），然后单击并拖动到新位置。如果斜角被反映，匹配的斜角点将一致移动。

要手动设置特定 UDim2 位置以用于切角：

启用选择工具(V)并选择控制点。在属性窗口中，扩展 SelectedControlPointData 字段以暴露 LeftTangent 和 RightTangent 属性。
设置 LeftTangent 和/或 RightTangent 的位置。请注意，这将会破坏棱角的反射行为。

删除斜角

要删除控制点的两个斜角，将鼠标悬停在该点上，然后单击该点，然后从上下文弹出菜单中选择清除斜角。

Diagram illustrating how both tangents of a control point are cleared by right-clicking it and selecting Clear Tangents.

要删除仅一个切角（左侧或右侧），将鼠标悬停在该切角标记上，然后单击右键，然后选择删除切角。

Diagram illustrating how one tangent of a control point is deleted by right-clicking it and selecting Delete Tangent.

拆分和镜像

默认情况下，斜角镜相互镜像。当你拖动调整一根斜角标记时，匹配的斜角点会一起移动。

Diagram illustrating how the tangents of a control point are adjusted with the Select tool enabled.

为了“打破”斜角，使每个都能独立于另一个，将鼠标悬停在并右键单击相关的控制点，然后从上下文菜单中选择打破斜角。一旦破碎，您可以移动每个斜角标记，而不会影响其他标记。

Diagram illustrating how the tangents of a control point are broken by right-clicking it and selecting Break Tangents.

要重新确立镜像行为，将鼠标悬停在相关控制点上，然后从上下文菜单中选择镜像斜角。请注意，在恢复镜像行为后，您将无法看到路径上的即时变化，因为系统无法预测您想要开始镜像的楔点。镜像行为只会在你拖动调整一个切角标记后恢复。

路径视觉属性

您可以使用以下属性来自定义 Path2D 的视觉外观：

属性	描述
Color3	设置路径线的颜色。
Thickness	设置路径线的厚度，以像素为单位。
Visible	使路径在编辑和执行时间时都可见或不可见。
ZIndex	路径在其他图形用户界面中相对的顺序。

Diagram illustrating a path with Thickness of 2 and Color3 of (125, 125, 125). — 厚度 = 2Color3 = (125, 125, 125)

Diagram illustrating a path with Thickness of 10 and Color3 of (225, 0, 50). — 厚度 = 10Color3 = (225, 0, 50)

Diagram illustrating a path layered in front of another using the ZIndex property. — ZIndex 堆栈

路径脚本

脚本对几个与路径相关的工作流程有用。以下例子使用方法如 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()

在此页面