Con đường 2D

Cú ví dụ / trường hợptên Path2D đi kèm với các phương pháp và thuộc tính API của nó cho phép bạn tích hợp các đường cong và đường cong 2D, hữu ích cho các hiệu ứng UI như hoạt họa dựa trên con đường và chỉnh sửa người dùng.

Tạo một con đường 2D

Để thêm một Path2D vào màn hình hoặc một đối tượng trong kinh nghiệm:

1. Trong cửa sổ Explorer, hãy nhúc một Path2D instance dưới một Class.ScreenGui hoặc Class.SurfaceGui (nó không cần phải là một con cháu trực tiếp).

   

2. Chọn mới Path2D để tiết lộ các thành phần công cụ trong cảnh nhìn. Bởi mặc định, công cụ Thêm Điểm được chọn.

   

3. Bắt đầu nhấp vào màn hình để thêm một loạt các điểm điều khiển </điều khiển</điều khiển</điều khiển> để tạo thành một con đường. Con đường ban đầu có thể không chính xác nhưng bạn có thể tùy chỉnh vị trí của bất kỳ điểm điều khiển nào sau

   

   Nếu bạn kéo chuột sau khi nhấp chuột, tangents sẽ được tạo ở điểm đó. Tangents cũng có thể được thêm định dạng bằng cách thủ tục đến bất kỳ điểm điều khiển nào.

4. Khi hoàn thành, nhấp vào nút Hoàn thành của widget hoặc nhấn Nhập.

Điều chỉnh Điểm điều khiển

Với một Path2D được chọn trong lớp Explorer , bạn có thể điều chỉnh các điểm kiểm soát của mình một cách riêng lẻ và các tangents của nó.

Điểm di chuyển

Để di chuyển một điểm kiểm soát cụ thể trên một con đường, hãy bật công cụ Chọn ( V ) và sau đó nhấp chuột và kéo nó đến vị trí mới.

Đối với vị trí cụ thể, hãy chọn điểu khiển và sau đó, trong cửa sổ Thuộc tính, hãy cài đặt một vị trí mới cho vị trí SelectedControlPointData của thuộc tính UDim2 .

Lưu ý rằng vị trí của một điểm không phải là tuyệt đối, nhưng là tương đối đối với container con của con đường. Ví dụ, so sánh một điểm kiểm tra 30% bên trái và 20% b

Thêm Điểm

Các điểm điều khiển mới có thể được thêm vào một Path2D giữa hai điểm hiện tại hoặc từ một điểm cuối bằng cách sử dụng công cụ Thêm Điểm ( P ).

Xóa Điểm

Để xóa điểu khiển, hover over and right click it, then select Delete Point from the contextual popup menu.

Điều khiển điểm tangents

Điểu khiển tangents cho phép bạn tạo và điều chỉnh các con đường trên một con đường.

Thêm tangents

Để thêm tangents đến bất kỳ điểm điều khiển nào mà không có tangents:

1. Kích hoạt công cụ Thêm vào Tangent trong trang bị công cụ.

   

2. Hover over the desired control point, then click to add two mirrored tangents (optionally drag after clicking to ajust the new tangents).

   

Điều chỉnh tangents

Để điều chỉnh các tangents hiện tại cho một điểm điều khiển cụ thể:

1. Kích hoạt công cụ Chọn ( V ).

   

2. Chuột qua một thẻ tang (không phải điểm điều khiển), sau đó nhấp chuột và kéo nó đến vị trí mới. Nếu các tangents được gương bóng, điểm tang cặp sẽ di chuyển trong unison.

   

Để thiết lập một vị trí cụ thể UDim2 cho một tangent:

1. Mở công cụ Chọn ( V ) và chọn điểm kiểm tra. Trong cửa sổ Thông tin cấu hình, mở trang 1> Class.Path2D.SelectedControlPointData|SelectedControlPointData1> đ

   

2. Đặt vị trí cho LeftTangent và/hoặc RightTangent . Ghi chú rằng điều này sẽ phá vỡ hành vi mirrored của các tangents .

Xóa tangents

Để xóa cả hai tangents từ một điểm điều khiển, hover over và right-click điểm đó, then select Xóa tangents from the contextual popup menu.

Để xóa chỉ một trong những tangents (bên trái hoặc bên phải), hover over and right-click vào và nhấp chuột vào người đóng dấu của tangents đó, then select Delete Tangent .

Phá vỡ và sao chép

Mặc định, tangents phản chiếu nhau. Khi bạn kéo để điều chỉnh một người bộ định tangent, điểm tangent đôi sẽ di chuyển theo cùng một chuỗi.

Để "phá vỡ" các tangents để mỗi người có thể được di chuyển độc lập với nhau, hover over and right-click the associat control point, then select Break Tangents từ menu ng上下文. Sau khi bị "phá vỡ", bạn có thể di chuyển mỗi thẻ tangents mà không ảnh hưởng đến người khác.

Thuộc tính Visuals Đường

Bạn có thể tùy chỉnh diện mạo thị giác của một Path2D với các thuộc tính sau đây:

Tạo mục đường dẫn

Lập trình là hữu ích cho một số workflow liên quan đến con đường. Các ví dụ sau đây sử dụng các mét phương tiện như Class.Path2D:GetControlPoints()|

Sắp xếp Objet UI trên Path
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

-- Đầu tiên sắp xếp các đối tượng UI con trên con đường
arrangeChildren()

-- Lắng nghe trẻ em được thêm/xóa để điều chỉnh bố trí
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

Anime UI Object Ngang Đường
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()