ImageLabel

显示已弃用

*此内容使用人工智能(Beta)翻译,可能包含错误。若要查看英文页面,请点按 此处

一个 ImageLabel 渲染一个长方形,像 Frame 一样,带有图像素材。图像的显示可以通过 ImageColor3ImageTransparency 属性进行操纵。要仅显示图像并隐藏长方形,将 GuiObject.BackgroundTransparency 设置为 1

高级ImageLabel

概要

属性

继承自GuiObject属性继承自GuiBase2d属性

方法

继承自GuiObject方法

活动

继承自GuiObject活动继承自GuiBase2d活动

属性

Image

ContentId
读取并联

该属性是一种内容类型属性,应该保存 Roblox 上上传的贴花或图像的资产 ID。它与 Roblox 中加载图像相关的功能与 Decal.Texture 相同。渲染的图像可以使用 ImageColor3ImageTransparency 进行修改。

ImageColor3

读取并联

该属性决定图像是如何被着色的。当设置为白色时,不会发生颜色化。该属性对于重复使用图像资产非常有用;如果源图像完全透明且完全白色,您可以一次设置图像的整个颜色与此属性。

ImageContent

读取并联

该属性应持有 资产 URI 或对 EditableImage 对象的引用。

资产 URI 可以引用到 Roblox 上上传的图标或图像。它在加载图像方面与 Decal.Texture 相同。

渲染的图像将使用 ImageButton.ImageColor3 进行颜色化。通过调整 ImageButton.ScaleType 属性,可以使图像渲染为瓷砖、适应缩放或 9 切片来显示,从而实现图像叠加、缩放或切割。

ImageRectOffset

读取并联

允许图像的部分显示与 ImageRectSize 结合。该属性决定图像区域的像素偏移(从左上角开始)以显示。

ImageRectSize

读取并联

允许图像的部分显示与 ImageRectOffset 结合。该属性决定要显示的图像区域的像素大小。如果任何维度设置为 0,整个图像将显示而不是设置为 。

ImageTransparency

读取并联

该属性决定了 UI 元素渲染图像的阿尔法。一个值 0 是完全不透明的,而另一个值 1 是完全透明的(隐形)。

代码示例

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

只读
未复制
读取并联

此属性表示 ImageLabel.Image 属性是否已从 Roblox 完全加载。被审核人拒绝的图像永远不会加载。

代码示例

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.Pixelated 时,图像保留像素的锋利边缘。

读取并联

该属性决定在 UI 元素的绝对尺寸与源图像的尺寸不同时,ImageLabel.Image 是如何渲染的。

默认情况下,这个属性是 Enum.ScaleType.Stretch ,这将简单地伸展/压缩图像尺寸,使其完全适合 UI 元素的空间。因为透明像素在上传到 Roblox 时设置为黑色,透明图像应该应用阿尔法混合以避免缩放图像周围的黑色轮廓。

对于 Enum.ScaleType.Slice , SliceCenter 属性将在 属性窗口 中显示。这是为了九层分割用户界面:当缩放时,角仍然是源图像尺寸。图像的边缘将延伸到图像的宽度/高度。最后,图像中心将伸展以填充图像的中心区域。

最后,对于 Enum.ScaleType.Tile , TileSize 属性将在 属性窗口 中显示。这是用于地砖图像,其每个图像瓷砖的大小由 TileSize 属性决定。

SliceCenter

读取并联

该属性设置 9 切割图像的边界时 ScaleType 设置为 Enum.ScaleType.Slice 。请注意,此属性只在此条件下才能在 属性 窗口中显示。

了解有关9片图像的更多信息,请参阅UI 9片设计

SliceScale

读取并联

将 9 片边按指定比率缩放。这意味着 9 片边缘会像你上传了新版本的纹理扩展一样增长。默认为 1.0 .

还见 ScaleType , SliceCenter , 以及 SliceScale

TileSize

读取并联

此属性设置了 ImageLabel 的瓷砖尺寸默认为 UDim2.new(1, 0, 1, 0) 。地砖从图像的左上角开始。此属性只有在 ScaleTypeImageLabel 设置为 Enum.ScaleType.Tile 时才会激活。

代码示例

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

方法

活动