ImageButton

Artık kullanılmayanları göster

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

Bir ImageButton , görüntüleme konusunda bir ImageLabel ile benzer şekilde davranır, bir GuiButton 'in ek davranışlarıyla.

Özet

Özellikler

Şuradan alınan Özellikler: GuiButtonŞuradan alınan Özellikler: GuiObjectŞuradan alınan Özellikler: GuiBase2d

Yöntemler

Şuradan alınan Yöntemler: GuiObject

Etkinlikler

Şuradan alınan Etkinlikler: GuiButtonŞuradan alınan Etkinlikler: GuiObjectŞuradan alınan Etkinlikler: GuiBase2d

Özellikler

HoverImage

ContentId
Paralel oku

ImageButton gezdirildiğinde kullanılacak bir doküman ID'si.

HoverImageContent

Paralel oku

Image

ContentId
Paralel oku

Bu özellik, Roblox'a yüklenen bir rozet veya görüntünün ID'sini tutan bir içerik türü özelliğidir.Roblox'tan görüntü yükleme konusunda aynı şekilde çalışır Decal.Texture .Kararlı görüntü, ImageColor3 kullanarak renklendirilecektir.

Görüntünün kare hale getirilmesinin, ölçeklendirilmesinin veya ScaleType.

Kod Örnekleri

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

Paralel oku

Bu özellik, bir görüntünün nasıl renklendirileceğini belirler.Beyaz olarak ayarlanırsa, renklendirme gerçekleşmez.Bu özellik, görüntü varlıklarını yeniden kullanmak için çok yararlıdır: Kaynak görüntü transparanlıkla tamamen beyazsa, tüm görüntünün rengini bu özellikle bir kerede ayarlayabilirsiniz.

Kod Örnekleri

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

Paralel oku

Bu özellik bir varlık URI'si veya bir EditableImage referans tutmalıdır.Varlık URI'si, Roblox'a yüklenen bir rozet veya görüntü referans edebilir.Görüntü yükleme konusunda aynı şekilde çalışır Decal.Texture .

Kararlı görüntü, ImageColor3 kullanarak renklendirilecektir.Resmin kare hale getirilmesi, ölçeklendirilmesi veya ScaleType özelliğini ayarlayarak 9 parçaya bölünmesi mümkündür.

ImageRectOffset

Paralel oku

Bu özellik, görüntü alanının görüntülenmesi gereken piksel ofsetini (üst soldan) belirler, böylece bir görüntünün kısmi görüntülenmesine izin verir ImageRectSize .

Kod Örnekleri

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

Paralel oku

Bu özellik, görüntü alanında görüntülenmesi gereken piksel boyutunu belirler, böylece bir görüntünün kısmi görüntülenmesine izin verir ImageRectOffset .Her iki boyut da 0 olarak ayarlanırsa, tüm görüntü yerine gösterilir.

Kod Örnekleri

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

Paralel oku

Bu özellik, elemanın görüntülenen görüntüsünün alfa değerini belirler.Bir değer 0 bütünüyle opaktır ve bir değer 1 bütünüyle şeffaftır (görünmez).Bu özellik GuiObject.BackgroundTransparency veya BasePart.Transparency ile benzer şekilde davranır.

Resim görüntülemeyi devre dışı bırakmak için ImageTransparency ı 1 olarak ayarlarsanız, bir düğme olarak kullanılabilecek basit bir dikdörtgen elde edilir.Ancak, boş bir TextButton yerine kullanmak daha iyi olabilir.

IsLoaded

Salt Okunur
Çoğaltılmamış
Paralel oku

Bu özellik, Image özelliğinin Roblox'tan yüklenmesinin bitip bitmediğini gösterir. Moderasyon tarafından reddedilen görüntüler asla yüklenmez.

Kod Örnekleri

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

Bir ImageButton özellik olarak ayarlanabilen bir doküman kimliği. Düğme basıldığında, bu görüntüyü renderlayacaktır.

PressedImageContent

Paralel oku

ResampleMode

Paralel oku

Resmin ölçeklendirildiğinde nasıl göründüğünü belirler.Varsayılan olarak, görüntü, dokunma hafızasındaki boyutundan daha büyük veya daha küçük gösterildiğinde dokuyu düzleştirir.Buna karşılık, Enum.ResamplerMode.Pixelated görüntü pikselerinin keskin kenarlarını korur.

Paralel oku

Bu özellik, UI öğesinin mutlak boyutu kaynağın görüntü boyutundan farklı olduğunda Image özelliğinin nasıl görüntüleneceğini belirler.

Varsayılan olarak, bu özellik Enum.ScaleType.Stretch dir, ki bu sadece görüntü boyutlarını genişletir/kompaktlaştırır ve böylece UI öğesinin alanına uyar.Transparan pikseller Roblox'a yüklendiğinde siyaha ayarlandığından, transparan görüntüler ölçekli görüntülerin etrafında koyu bir çizgi önlemek için alfa karışımı uygulamalıdır.

For Enum.ScaleType.Slice , yükseltirken, köşeler kaynak görüntü boyutu olarak kalacaktır.Görüntünün kenarları görüntünün genişliğine/yüksekliğine uzanacaktır.Son olarak, görüntünün merkezi, görüntünün merkezi alanını doldurmak için genişleyecektir.9 dilimli görüntüler hakkında daha fazla bilgi edinmek için, UI 9‑Slice Tasarımı'a bakın.

For Enum.ScaleType.Tile için, her görüntü aracının boyutu TileSize özelliği tarafından belirlenir.

SliceCenter

Paralel oku

Bu özellik, Class.ImageButton.ScaleType|ScaleType``Enum.ScaleType.Slice|Enum.ScaleType.Slice >.

9 dilimli görüntüler hakkında daha fazla bilgi edinmek için, UI 9-Dilim Tasarımı'a bakın.

SliceScale

Paralel oku

9 dilim kenarlarını belirtilen oranla ölçeklendirir.Bu, 9 dilimin kenarlarının, yüksek çözünürlüklü dokunun yeni bir versiyonunu yüklemiş gibi büyüyeceği anlamına gelir.Varsayılan değeri 1.0 dir.

Bir 9 dilimin sınırları için çarpan olarak, çoklu yayınlar için bir kenar kare görüntüsünü yeniden kullanmak için yararlıdır.

Ayrıca bakın ScaleType , bir görüntünün kaynağından farklı bir boyuta sahip bir UI öğesinde görüntülenirse nasıl ölçeceğini belirleyen.

TileSize

Paralel oku

Resmin üst sol köşesinden başlayarak ImageButton döşeme boyutunu ayarlar.Varsayılan değerleri ; ölçek bileşenleri boyutuna göre kaydırırken, ofset bileşenleri ham piksellerde olacaktır.Örneğin, 0.5 ölçeği, karelin eşdeğer eksendeki ImageButton büyüklüğünün yarısı olacağını gösterir.

Bu özellik yalnızca ScaleType özelliği Enum.ScaleType.Tile olarak ayarlanırsa aktiftir.

Yöntemler

Etkinlikler