ImageButton

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 ImageButton hành xử tương tự như một ImageLabel về khía cạnh hiển thị, với các hành vi bổ sung của một GuiButton .

Tóm Tắt

Thuộc Tính

  • HoverImage:ContentId
    Đọc Song Song

    Một ID kết cấu sẽ được sử dụng khi ImageButton đang được lướt.

  • HoverImageContent:Content
    Đọc Song Song
  • Image:ContentId
    Đọc Song Song

    Nội dung hình ảnh được hiển thị bởi thành phần ImageButton. Đọ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ợ các URIs 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 liệu hình ảnh đã hoàn thành tải từ trang web Roblox hay chưa.

  • PressedImage:ContentId
    Đọc Song Song

    Một ID kết cấu sẽ được sử dụng khi một ImageButton được nhấn.

  • PressedImageContent:Content
    Đọc Song Song
  • ResampleMode:Enum.ResamplerMode
    Đọc Song Song

    Chọn chế độ phóng lại hình ảnh cho nút.

  • 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 thước đo lát của Nút Hình ảnh.

Thuộc Tính kế thừa từ GuiButtonThuộ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ừ GuiButtonSự 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

HoverImage

ContentId
Đọc Song Song

Một ID kết cấu sẽ được sử dụng khi ImageButton đang được lướt.

HoverImageContent

Content
Đọc Song Song

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ị sẽ được màu hóa bằng cách sử dụng ImageColor3 .

Lưu ý rằng có thể làm cho hình ảnh được hiển thị theo kiểu lát, thay đổi kích thước phù hợp hoặc 9-sliced bằng cách điều chỉnh thuộc tính ScaleType.

Mẫu mã

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock
local imageLabel = script.Parent



-- The images in this example are 64x64

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



local function unlock()

	imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green

end



local function lock()

	imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red

end



-- Connect events; our default state is locked

imageLabel.MouseEnter:Connect(unlock)

imageLabel.MouseLeave:Connect(lock)

lock()

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.

Mẫu mã

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock
local imageLabel = script.Parent



-- The images in this example are 64x64

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



local function unlock()

	imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green

end



local function lock()

	imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red

end



-- Connect events; our default state is locked

imageLabel.MouseEnter:Connect(unlock)

imageLabel.MouseLeave:Connect(lock)

lock()

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 decal hoặc hình ảnh được tải lên Roblox.Nó hoạt động giống như Decal.Texture với 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 ImageColor3 .Bạn có thể làm cho hình ảnh được hiển thị theo cách lát, thay đổi kích thước phù hợp hoặc cắt thành 9 mảnh bằng cách điều chỉnh thuộc tính ScaleType.

ImageRectOffset

Vector2
Đọc Song Song

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ị, cho phép hiển thị một phần hình ảnh cùng với ImageRectSize .

Mẫu mã

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet
-- Place this in an ImageLabel/ImageButton with size 256x256

local imageLabel = script.Parent



-- The following image is 1024x1024 with 12 frames (256x256)

-- The frames play an animation of a man throwing a punch

imageLabel.Image = "rbxassetid://848623155"

imageLabel.ImageRectSize = Vector2.new(256, 256)



-- The order of the frames to be displayed (left-to-right, then top-to-bottom)

local frames = {

	Vector2.new(0, 0),

	Vector2.new(1, 0),

	Vector2.new(2, 0),

	Vector2.new(3, 0),

	Vector2.new(0, 1),

	Vector2.new(1, 1),

	Vector2.new(2, 1),

	Vector2.new(3, 1),

	Vector2.new(0, 2),

	Vector2.new(1, 2),

	Vector2.new(2, 2),

	Vector2.new(3, 2),

}



-- Animate the frames one at a time in a loop

while true do

	for _, frame in ipairs(frames) do

		imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize

		task.wait(0.1)

	end

end

ImageRectSize

Vector2
Đọc Song Song

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

Mẫu mã

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet
-- Place this in an ImageLabel/ImageButton with size 256x256

local imageLabel = script.Parent



-- The following image is 1024x1024 with 12 frames (256x256)

-- The frames play an animation of a man throwing a punch

imageLabel.Image = "rbxassetid://848623155"

imageLabel.ImageRectSize = Vector2.new(256, 256)



-- The order of the frames to be displayed (left-to-right, then top-to-bottom)

local frames = {

	Vector2.new(0, 0),

	Vector2.new(1, 0),

	Vector2.new(2, 0),

	Vector2.new(3, 0),

	Vector2.new(0, 1),

	Vector2.new(1, 1),

	Vector2.new(2, 1),

	Vector2.new(3, 1),

	Vector2.new(0, 2),

	Vector2.new(1, 2),

	Vector2.new(2, 2),

	Vector2.new(3, 2),

}



-- Animate the frames one at a time in a loop

while true do

	for _, frame in ipairs(frames) do

		imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize

		task.wait(0.1)

	end

end

ImageTransparency

number
Đọc Song Song

Tính chất này xác định alpha của hình ảnh được hiển thị của thành phần.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).Tính chất này hành xử tương tự như GuiObject.BackgroundTransparency hoặc BasePart.Transparency .

Nếu bạn vô hiệu hóa xử lý hình ảnh bằng cách đặt ImageTransparency đến 1, nó sẽ dẫn đến một đường vuông đơn có thể được sử dụng làm nút.Tuy nhiên, có thể tốt hơn khi sử dụng một trống TextButton thay thế.

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 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))

PressedImage

ContentId
Đọc Song Song

Một ID kết cấu có thể được đặt làm thuộc tính ImageButton. Khi nhấn nút, nó sẽ hiển thị hình ảnh này.

PressedImageContent

Content
Đọc Song Song

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ị lớn hơn hoặc nhỏ hơn kích thước trong bộ nhớ kết cấu.Ngược lại, Enum.ResamplerMode.Pixelated giữ lại các cạnh sắc nét của像素 hình ảnh.

ScaleType

Enum.ScaleType
Đọc Song Song

Tính chất này xác định theo cách mà thuộc tính 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, khi tăng quy mô, 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.Để tìm hiểu thêm về hình ảnh 9 lát, xem Thiết kế UI 9 lát .

Đối với Enum.ScaleType.Tile, 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 .

Để tìm hiểu thêm về hình ảnh 9‑sliced, hãy xem Thiết kế UI 9‑Slice .

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 .

Là một nhân cho các biên giới của một 9- slice, nó hữu ích để tái sử dụng một hình ảnh góc tròn cho nhiều bán kính.

Xem thêm ScaleType định nghĩa 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.

TileSize

UDim2
Đọc Song Song

Đặt kích thước lát của ImageButton bắt đầu từ góc trên cùng bên trái của hình ảnh.Các giá trị mặc định của UDim2 là 1, 0, 1, 0 ; các thành phần thước đo của UDim2 sẽ mở rộng kích thước theo kích thước của ImageButton trong khi các thành phần chênh lệch là trong điểm ảnh thô.Ví dụ, một phạm vi là 0.5 có nghĩa là đường viền sẽ có kích thước bằng một nửa kích thước của ImageButton trong trục tương ứng.

Tính năng này chỉ hoạt động nếu thuộc tính ScaleType được đặt thành Enum.ScaleType.Tile.

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