ImageLabel

Hiển Thị Bản Đã Lỗi Thời

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Một ImageLabel vẽ một hình chữ nhật, giống như một Frame làm, với một tài sản hình ảnh.Hiển thị hình ảnh có thể được thao tác thông qua các thuộc tính ImageColor3 và ImageTransparency.Để hiển thị chỉ hình ảnh và che khu vực hình chữ nhật, hãy đặt GuiObject.BackgroundTransparency đến 1 .

Sử dụng nâng cao ImageLabel bao gồm:

  • Hình ảnh có định dạng có thể được tạo bằng cách đặt ScaleType đến Enum.ScaleType.Tile , sau đó TileSize đến kích thước của các ô được hiển thị.

  • hình ảnh 9 lát có thể được tạo bằng cách đặt ScaleType đến Enum.ScaleType.Slice , sau đó SliceCenter đến khu vực trung tâm của hình ảnh 9 lát.

  • Các tờ sprite có thể được thực hiện thông qua việc sử dụng ImageRectOffset và ImageRectSize.Gói nhiều hình ảnh thành một và sử dụng tính năng này có thể làm cho tài sản hình ảnh của trải nghiệm của bạn tải nhanh hơn nhiều, đặc biệt nếu bạn sử dụng nhiều biểu tượng nhỏ trong GUI của bạn.

Tóm Tắt

Thuộc Tính

  • Image:ContentId
    Đọc Song Song

    Nội dung hình ảnh được hiển thị bởi thành phần UI. Đọc và ghi vào ImageContent .

  • ImageColor3:Color3
    Đọc Song Song

    Xác định cách một hình ảnh được xử lý màu.

  • ImageContent:Content
    Đọc Song Song

    Nội dung hình ảnh được hiển thị bởi thành phần UI. Hỗ trợ URI tài sản và EditableImage đối tượng.

  • ImageRectOffset:Vector2
    Đọc Song Song

    Offset trong pixel của khu vực thành phần của hình ảnh để hiển thị.

  • ImageRectSize:Vector2
    Đọc Song Song

    Xác định kích thước bằng pixel của khu vực phụ của hình ảnh để hiển thị.

  • ImageTransparency:number
    Đọc Song Song

    Xác định độ trong suốt của hình ảnh được hiển thị.

  • IsLoaded:boolean
    Chỉ Đọc
    Không Sao Chép
    Đọc Song Song

    Chỉ ra xem hình ảnh đã hoàn thành tải từ Roblox hay chưa.

  • ResampleMode:Enum.ResamplerMode
    Đọc Song Song

    Chọn chế độ lấy lại hình ảnh cho nhãn.

  • ScaleType:Enum.ScaleType
    Đọc Song Song

    Xác định cách một hình ảnh sẽ phóng to nếu hiển thị trong một thành phần UI có kích thước khác với hình ảnh nguồn.

  • SliceCenter:Rect
    Đọc Song Song

    Đặt ranh giới cắt của hình ảnh 9 lát nhỏ.

  • SliceScale:number
    Đọc Song Song

    Tăng các cạnh 9 lát theo tỷ lệ được định.

  • TileSize:UDim2
    Đọc Song Song

    Đặt kích thước lát của ImageLabel .

Thuộc Tính kế thừa từ GuiObjectThuộc Tính kế thừa từ GuiBase2d
Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Phương Pháp

Phương Pháp kế thừa từ GuiObject
Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Sự Kiện

Sự Kiện kế thừa từ GuiObjectSự Kiện kế thừa từ GuiBase2d
Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Thuộc Tính

Image

ContentId
Đọc Song Song

Thuộc tính này là một thuộc tính loại nội dung mà nên giữ ID tài sản của một decal hoặc hình ảnh được tải lên Roblox.Nó hoạt động tương tự như Decal.Texture với việc tải hình ảnh từ Roblox.Hình ảnh được hiển thị có thể được chỉnh sửa bằng cách sử dụng ImageColor3 và ImageTransparency.

ImageColor3

Color3
Đọc Song Song

Tính chất này xác định cách một hình ảnh được màu hóa.Khi được đặt thành trắng, không có sự phân màu xảy ra.Tính chất này rất hữu ích để tái sử dụng tài sản hình ảnh; nếu hình ảnh nguồn hoàn toàn trắng với độ trong suốt, bạn có thể đặt toàn bộ màu của hình ảnh một lần với tính chất này.

ImageContent

Content
Đọc Song Song

Thuộc tính này nên giữ một URI tài sản hoặc một tham chiếu đến một đối tượng EditableImage.

URI tài sản có thể tham chiếu đến một nhãn dán hoặc hình ảnh được tải lên Roblox. Nó hoạt động tương tự như Decal.Texture về việc tải hình ảnh.

Hình ảnh được render sẽ được màu hóa bằng cách sử dụng ImageButton.ImageColor3 .Bạn có thể làm cho hình ảnh được hiển thị theo cách lát, thay đổi kích cỡ phù hợp hoặc cắt thành 9 phần bằng cách điều chỉnh thuộc tính ImageButton.ScaleType.

ImageRectOffset

Vector2
Đọc Song Song

Cho phép hiển thị một phần hình ảnh kết hợp với ImageRectSize .Thuộc tính này xác định độ trừ bớt pixel (từ bên trái trên cùng) của khu vực hình ảnh được hiển thị.

ImageRectSize

Vector2
Đọc Song Song

Cho phép hiển thị một phần hình ảnh kết hợp với ImageRectOffset .Tính chất này xác định kích thước pixel của khu vực hình ảnh được hiển thị.Nếu cả hai chiều được đặt thành 0, toàn bộ hình ảnh sẽ được hiển thị thay thế.

ImageTransparency

number
Đọc Song Song

Tính chất này xác định hình ảnh hiển thị alpha của một thành phần UI.Một giá trị của 0 là hoàn toàn mờ nhạt và một giá trị của 1 là hoàn toàn minh bạch (vô hình).

Mẫu mã

This code sample oscillates the ImageTransparency of an ImageLabel/ImageButton from 0 to 1 using a sine wave.

Oscillate ImageTransparency
local RunService = game:GetService("RunService")



local imageLabel = script.Parent



local function onRenderStep()

	-- Oscillate ImageTransparency from 0 to 1 using a sine wave

	imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5

end



RunService.RenderStepped:Connect(onRenderStep)

IsLoaded

boolean
Chỉ Đọc
Không Sao Chép
Đọc Song Song

Thuộc tính này cho thấy nếu thuộc tính ImageLabel.Image đã hoàn thành tải từ Roblox. Hình ảnh bị từ chối bởi kiểm duyệt sẽ không bao giờ tải.

Mẫu mã

This code sample measures how long an ImageLabel or ImageButton takes to load an image. If the image was already loaded, this will be 0.

Image Load Time
local imageLabel = script.Parent



local startTime = workspace.DistributedGameTime



-- Wait for the image to load

while not imageLabel.IsLoaded do

	task.wait()

end



-- Measure and display how long it took to load

local deltaTime = workspace.DistributedGameTime - startTime

print(("Image loaded in %.3f seconds"):format(deltaTime))

ResampleMode

Enum.ResamplerMode
Đọc Song Song

Xác định cách hình ảnh trông khi nó bị thay đổi kích thước.Mặc định, hình ảnh làm mịn kết cấu khi hiển thị trên màn hình lớn hơn hoặc nhỏ hơn kích thước trong bộ nhớ kết cấu.Khi được đặt thành Enum.ResamplerMode.Pixelated, hình ảnh giữ lại các cạnh sắc nét của像素.

ScaleType

Enum.ScaleType
Đọc Song Song

Tính chất này xác định theo cách một ImageLabel.Image được hiển thị khi kích thước tuyệt đối của thành phần UI khác với kích thước nguồn hình ảnh.

Mặc định, thuộc tính này là Enum.ScaleType.Stretch mà sẽ chỉ kéo căng/thu nhỏ kích thước hình ảnh để nó phù hợp với không gian của thành phần UI chính xác.Vì các điểm ảnh trong suốt được đặt thành màu đen khi tải lên Roblox, hình ảnh trong suốt nên áp dụng kết hợp alpha để tránh viền đen xung quanh các hình ảnh được phóng to.

Đối với Enum.ScaleType.Slice , thuộc tính SliceCenter sẽ được tiết lộ trong cửa sổ Tính năng.Đây là cho UI chia chín phần: khi mở rộng, các góc sẽ vẫn là kích thước hình ảnh nguồn.Các cạnh của hình ảnh sẽ căng ra chiều rộng/chiều cao của hình ảnh.Cuối cùng, trung tâm của hình ảnh sẽ căng ra để lấp đầy khu vực trung tâm của hình ảnh.

Cuối cùng, cho Enum.ScaleType.Tile , thuộc tính TileSize sẽ được tiết lộ trong cửa sổ Tính năng.Đây là cho hình ảnh có định dạng, nơi kích thước của mỗi ô hình ảnh được xác định bởi thuộc tính TileSize.

SliceCenter

Rect
Đọc Song Song

Thuộc tính này đặt ranh giới cắt của hình ảnh 9-cắt khi ScaleType được đặt thành Enum.ScaleType.Slice .Xin lưu ý rằng tính năng này chỉ xuất hiện trong cửa sổ Tính năng dưới điều kiện này.

Để tìm hiểu thêm về ảnh 9 lát, xem Thiết kế UI 9 lát .

SliceScale

number
Đọc Song Song

Tăng các cạnh 9 lát theo tỷ lệ được định.Điều này có nghĩa là các cạnh xung quanh 9 lát sẽ phát triển như thể bạn đã tải lên một phiên bản mới của kết cấu được phóng to.Mặc định là 1.0 .

Xem thêm ScaleType , SliceCenter , và SliceScale .

TileSize

UDim2
Đọc Song Song

Thuộc tính này đặt kích thước lát của ImageLabel với một giá trị mặc định là UDim2.new(1, 0, 1, 0) .Viền bắt đầu ở góc trên cùng bên trái của hình ảnh.Tính năng này chỉ hoạt động nếu ScaleType cho ImageLabel được đặt thành Enum.ScaleType.Tile .

Mẫu mã

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo
local imageLabel = script.Parent



-- Set the source image to be a 64x64 padlock

imageLabel.Image = "rbxassetid://284402752"

imageLabel.BackgroundTransparency = 0

imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White

imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black



local function resizeInACircle()

	for theta = 0, 2, 0.02 do

		imageLabel.Size =

			UDim2.new(0, 100 + math.cos(theta * 2 * math.pi) * 50, 0, 100 + math.sin(theta * 2 * math.pi) * 50)

		task.wait()

	end

end



while true do

	-- Stretch simply stretches the source image to fit

	-- the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Stretch

	resizeInACircle()

	-- Tile will render the source image multiple times

	-- enough to fill the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Tile

	imageLabel.TileSize = UDim2.new(0, 64, 0, 64)

	resizeInACircle()

	-- Slice will turn the image into a nine-slice UI.

	imageLabel.ScaleType = Enum.ScaleType.Slice

	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)

	resizeInACircle()

end
Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Phương Pháp

Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object

Sự Kiện

Xem tất cả các mục kế thừa từ Instance
Xem tất cả các mục kế thừa từ Object