ImageLabel

Tampilkan yang Tidak Digunakan Lagi

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Sebuah ImageLabel menampilkan sebuah segi empat, seperti yang dilakukan oleh Frame dengan aset gambar.Tampilan gambar dapat dimanipulasi melalui properti ImageColor3 dan ImageTransparency.Untuk menampilkan hanya gambar dan menyembunyikan kotak, atur GuiObject.BackgroundTransparency ke 1 .

Penggunaan lanjutan ImageLabel termasuk:

  • Gambar berbatas bisa dibuat dengan menetapkan ScaleType ke Enum.ScaleType.Tile , lalu TileSize ke ukuran ubin yang drender.

  • gambar 9-potong dapat dibuat dengan menetapkan ke , kemudian ke area tengah gambar 9-potong.

  • Halaman sprite dapat diterapkan melalui penggunaan ImageRectOffset dan ImageRectSize .Memasukkan banyak gambar ke dalam satu dan menggunakan properti ini dapat membuat aset gambar pengalaman Anda dimuat lebih cepat, terutama jika Anda menggunakan banyak ikon kecil di GUI Anda.

Rangkuman

Properti

Properti diwarisi dari GuiObjectProperti diwarisi dari GuiBase2d
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Metode

Metode diwarisi dari GuiObject
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Acara

Acara diwarisi dari GuiObjectAcara diwarisi dari GuiBase2d
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Properti

Image

ContentId
Baca Paralel

Properti ini adalah properti jenis konten yang harus menyimpan ID aset decal atau gambar yang diunggah ke Roblox.Ini berfungsi persis sama dengan Decal.Texture terkait dengan memuat gambar dari Roblox.Gambar yang drender dapat dimodifikasi menggunakan ImageColor3 dan ImageTransparency .

ImageColor3

Color3
Baca Paralel

Properti ini menentukan bagaimana sebuah gambar diwarnai.Ketika diatur ke putih, tidak ada kolorisasi terjadi.Properti ini sangat berguna untuk menggunakan kembali aset gambar; jika sumber gambar sepenuhnya putih dengan transparansi, Anda dapat mengatur seluruh warna gambar sekaligus dengan properti ini.

ImageContent

Content
Baca Paralel

Properti ini harus menyimpan URI aset atau referensi ke objek EditableImage.

URI aset dapat merujuk pada decal atau gambar yang diunggah ke Roblox. Fungsinya sama dengan Decal.Texture dalam hal memuat gambar.

Gambar yang drender akan diwarnai menggunakan ImageButton.ImageColor3 .Dimungkinkan untuk menampilkan gambar sebagai terpisah, diukur untuk sesuai, atau dipotong menjadi 9 bagian, dengan menyesuaikan properti ImageButton.ScaleType.

ImageRectOffset

Vector2
Baca Paralel

Memungkinkan tampilan parsial dari gambar bersama dengan ImageRectSize .Properti ini menentukan offset piksel (dari kiri atas) dari area gambar yang akan ditampilkan.

ImageRectSize

Vector2
Baca Paralel

Memungkinkan tampilan parsial dari gambar bersama dengan ImageRectOffset .Properti ini menentukan ukuran piksel area gambar yang akan ditampilkan.Jika dimensi mana pun ditetapkan ke 0, seluruh gambar ditampilkan sebagai gantinya.

ImageTransparency

number
Baca Paralel

Properti ini menentukan alfa gambar yang ditampilkan dari elemen UI.Nilai 0 adalah benar-benar opak dan nilai 1 adalah benar-benar transparan (tidak terlihat).

Contoh Kode

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
Hanya Baca
Tidak Direplikasi
Baca Paralel

Properti ini menunjukkan apakah properti ImageLabel.Image telah selesai dimuat dari Roblox. Gambar yang ditolak oleh moderasi tidak akan pernah load.

Contoh Kode

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
Baca Paralel

Menentukan bagaimana tampilan gambar saat diubah skalanya.Secara default, gambar menyamarkan teks saat ditampilkan di layar yang lebih besar atau lebih kecil dari ukurannya di memori tekstur.Saat ditetapkan ke Enum.ResamplerMode.Pixelated, gambar mempertahankan tepi tajam piksel.

ScaleType

Enum.ScaleType
Baca Paralel

Properti ini menentukan dengan cara apa sebuah ImageLabel.Image dihasilkan ketika ukuran elemen UI berbeda dari ukuran gambar sumber.

Secara default, properti ini adalah Enum.ScaleType.Stretch yang hanya akan meregangkan/kompakkan dimensi gambar sehingga sesuai dengan ruang elemen UI dengan tepat.Karena piksel transparan diatur menjadi hitam saat diunggah ke Roblox, gambar transparan harus menerapkan blending alfa untuk menghindari garis hitam di sekitar gambar skala.

Untuk Enum.ScaleType.Slice , properti SliceCenter akan terungkap di jendela Properti.Ini untuk UI sembilan bagian: saat meningkatkan skala, sudut akan tetap menjadi ukuran gambar sumber.Pinggiran gambar akan memperluas ke lebar/tinggi gambar.Akhirnya, pusat gambar akan memperluas untuk mengisi area pusat gambar.

Akhirnya, untuk Enum.ScaleType.Tile , properti TileSize akan diungkapkan di jendela Properti.Ini untuk gambar berujung, di mana ukuran setiap ubin gambar ditentukan oleh properti TileSize.

SliceCenter

Rect
Baca Paralel

Properti ini menetapkan batas potong dari gambar berukuran 9 saat ScaleType diatur ke Enum.ScaleType.Slice.Harap dicatat bahwa properti ini hanya terlihat di jendela Properti di bawah kondisi ini.

Untuk mempelajari lebih lanjut tentang gambar 9-potong, lihat Desain UI 9 Slice.

SliceScale

number
Baca Paralel

Skala ujung 9 bagian dengan rasio yang ditentukan.Ini berarti bahwa tepi di sekitar 9-potong akan tumbuh seolah-olah Anda telah mengunggah versi baru dari tekstur yang diperbesar.Default ke 1.0.

Lihat juga ScaleType , SliceCenter , dan SliceScale .

TileSize

UDim2
Baca Paralel

Properti ini mengatur ukuran ubin dari ImageLabel dengan default UDim2.new(1, 0, 1, 0) .Pemformatan dimulai di sudut kiri atas gambar.Properti ini hanya aktif jika ScaleType untuk ImageLabel diatur ke Enum.ScaleType.Tile .

Contoh Kode

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
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Metode

Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Acara

Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object