ImageLabel
*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่
การเรนเดอร์ ImageLabel สร้างรูปสี่เหลี่ยมเช่นเดียวกับที่ Frame ทำด้วยสินทรัพย์รูปภาพการแสดงภาพสามารถปรับเปลี่ยนได้ผ่านคุณสมบัติ ImageColor3 และ ImageTransparencyเพื่อแสดงเฉพาะภาพและซ่อนสี่เหลี่ยม ตั้ง GuiObject.BackgroundTransparency เป็น 1
การใช้งานขั้นสูง ImageLabel รวมถึง:
ภาพปูพื้นสามารถสร้างได้โดยการตั้งค่า ScaleType เป็น Enum.ScaleType.Tile จากนั้น TileSize เป็นขนาดของกระเบื้องที่เรนเดอร์ได้รับ
ภาพแบบ 9 ชิ้นสามารถสร้างได้โดยการตั้ง ScaleType เป็น Enum.ScaleType.Slice จากนั้น SliceCenter ไปยังพื้นที่กลางของภาพแบบ 9 ชิ้น
แผ่นสปรายต์สามารถดำเนินการได้โดยใช้ ImageRectOffset และ ImageRectSizeบรรจุภาพหลายภาพเป็นหนึ่งและใช้คุณสมบัตินี้สามารถทำให้ทรัพยากรภาพของประสบการณ์ของคุณโหลดเร็วขึ้นมาก โดยเฉพาะอย่างยิ่งถ้าคุณใช้ไอคอนขนาดเล็กจำนวนมากใน GUI ของคุณ
สรุป
คุณสมบัติ
เนื้อหาภาพที่แสดงโดยองค์ประกอบ UI อ่านและเขียนไปที่ ImageContent
กำหนดวิธีที่ภาพที่เรนเดอร์จะถูกสีได้
เนื้อหาภาพที่แสดงโดยองค์ประกอบ UI สนับสนุน ทรัพยากร URI และ EditableImage
ค่าออฟเซ็ตในพิกเซลของพื้นที่ย่อยของภาพที่จะแสดง
กำหนดขนาดในพิกเซลของพื้นที่ย่อยของภาพที่จะแสดง
กำหนดความโปร่งใสของภาพที่แสดงผล
บ่งบอกว่าภาพเสร็จสิ้นการโหลดจาก Roblox หรือไม่
เลือกโหมดการขยายภาพสำหรับฉลาก
กำหนดวิธีที่ภาพจะขยายได้หากแสดงในองค์ประกอบ UI ที่มีขนาดแตกต่างจากภาพที่มา
ตั้งขอบเขตชิ้นส่วนของภาพที่ตัด 9 ชิ้น
ขยายขอบ 9 ส่วนตามอัตราส่วนที่กำหนด
ตั้งขนาดการจัดเรียงของ ImageLabel .
กำหนดว่าองค์ประกอบ UI นี้จะรับอินพุตหรือไม่
กำหนดจุดต้นกำเนิดของ GuiObject เมื่อเทียบกับขนาดสัมบูรณ์ของมัน
กำหนดว่าการปรับขนาดจะเกิดขึ้นตามเนื้อหาลูกหรือไม่
กำหนดสีพื้นหลัง GuiObject
กำหนดความโปร่งใสของพื้นหลังและขอบ GuiObject
กำหนดสีขอบ GuiObject ได้
กำหนดวิธีที่ขอบ GuiObject ถูกวางในลักษณะที่เกี่ยวข้องกับขนาด
กำหนดความกว้างของพิกเซลของขอบ GuiObject
กำหนดว่าถ้าลูกหลาน GuiObjects นอกขอบเขตขององค์ประกอบ GUI พ่อจะต้องแสดงผลหรือไม่
กำหนดว่าเมาส์ของผู้เล่นกดอยู่อย่างใดอย่างหนึ่งบน GuiObject หรือไม่
กำหนดว่า GuiButton สามารถโต้ตอบได้หรือไม่ หรือถ้า GuiState ของ GuiObject กำลังเปลี่ยนแปลงหรือไม่
ควบคุมลำดับการจัดเรียงของ GuiObject เมื่อใช้กับ UIGridStyleLayout
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกเลื่อนลง
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกย้ายไปทางซ้าย
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกย้ายไปทางขวา
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกย้ายขึ้น
กำหนดพิกเซลและตําแหน่งเวกเตอร์ของ GuiObject
กำหนดจำนวนองศาที่ GuiObject หมุนไป
ตรวจสอบว่า GuiObject สามารถเลือกได้โดยคอนโซลเกมหรือไม่
แทนที่การเลือกเริ่มต้นที่ใช้สำหรับเกมแพด
ลำดับของ GuiObjects ที่เลือกโดยการเลือก UI ของเกมแพด
กำหนดพิกเซลและขนาดสเกลาร์ของ GuiObject
ตั้งแกน Size ที่ GuiObject จะอ้างอิงจากขนาดของพ่อของมัน เมื่อเทียบกับขนาดของพ่อ
คุณสมบัติผสมของ BackgroundTransparency และ TextTransparency .
กำหนดว่า GuiObject และบรรดาลูกหลานจะถูกแสดงหรือไม่
กำหนดลำดับที่เรนเดอร์ GuiObject จะแสดงเป็นค่าสัมพันธ์กับคนอื่น
อธิบายตำแหน่งจอแสดงจริงขององค์ประกอบ GuiBase2d ในพิกเซล
อธิบายการหมุนหน้าจอที่เกิดขึ้นจริงขององค์ประกอบ GuiBase2d ในองศา
อธิบายขนาดหน้าจอที่เป็นจริงขององค์ประกอบ GuiBase2d ในพิกเซล
เมื่อตั้งค่าเป็น true การแปลท้องถิ่นจะถูกใช้กับ GuiBase2d และบรรดาลูกหลานของมัน
การอ้างอิงถึง LocalizationTable ที่จะใช้เพื่อใช้การแปลงภาษาท้องถิ่นอัตโนมัติกับ GuiBase2d และบรรดาลูกหลานของมัน
ปรับพฤติกรรมการเลือกเกมแพดในทิศทางลง
ปรับพฤติกรรมการเลือกเกมแพดในทิศทางซ้าย
ปรับพฤติกรรมการเลือก gamepad ในทิศทางที่ถูกต้อง
ปรับพฤติกรรมการเลือกเกมแพดในทิศทางขึ้น
อนุญาตให้ปรับแต่งการเคลื่อนไหวการเลือกเกมแพดได้
วิธีการ
วิธีการรับทอดมาจากGuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
เคลื่อน GUI ไปยังใหม่ UDim2 อย่างราบรื่น
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
เคลื่อน GUI ไปยังขนาดและตำแหน่งใหม่อย่างราบรื่น
อีเวนต์
อีเวนต์รับทอดมาจากGuiObjectยิงเมื่อผู้ใช้เริ่มโต้ตอบผ่านอุปกรณ์อินเทอร์เฟซมนุษย์-คอมพิวเตอร์ (ปุ่มเมาส์ลง, แตะเริ่ม, ปุ่มแป้นพิมพ์ลง, เป็นต้น)
ยิงเมื่อผู้ใช้เปลี่ยนวิธีการโต้ตอบผ่านอุปกรณ์อินเทอร์เฟซมนุษย์-คอมพิวเตอร์ (ปุ่มเมาส์ลง, แตะเริ่ม, ปุ่มแป้นพิมพ์ลง, เป็นต้น)
ยิงเมื่อผู้ใช้หยุดโต้ตอบผ่านอุปกรณ์อินเทอร์เฟซมนุษย์-คอมพิวเตอร์ (ปุ่มเมาส์ลง, แตะเริ่ม, ปุ่มแป้นพิมพ์ลง, เป็นต้น)
เกิดไฟไหม้เมื่อผู้ใช้ย้ายเมาส์ไปยังองค์ประกอบ GUI
เกิดไฟไหม้เมื่อผู้ใช้ย้ายเมาส์ออกจากองค์ประกอบ GUI
เกิดไฟไหม้เมื่อผู้ใช้ย้ายเมาส์ในขณะที่อยู่ภายในองค์ประกอบ GUI ใดๆ
เกิดไฟไหม้เมื่อผู้ใช้เลื่อนล้อเมาส์กลับเมื่อเมาส์อยู่เหนือองค์ประกอบ GUI
เกิดไฟไหม้เมื่อผู้ใช้เลื่อนล้อเมาส์ไปข้างหน้าเมื่อเมาส์อยู่เหนือองค์ประกอบ GUI
ยิงเมื่อ GuiObject ได้รับการโฟกัสด้วยตัวเลือก Gamepad
ยิงเมื่อตัวเลือก Gamepad หยุดโฟกัสกับ GuiObject
เกิดไฟไหม้เมื่อผู้เล่นเริ่มต้น ดำเนินการต่อ และหยุดการกดค้างไว้นานบนองค์ประกอบ UI
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
เกิดไฟไหม้เมื่อผู้เล่นย้ายนิ้วบนองค์ประกอบ UI
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการสับหรือดึงด้วยนิ้วสองนิ้วบนองค์ประกอบ UI
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการทําท่าหมุนโดยใช้นิ้วสองนิ้วบนองค์ประกอบ UI
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการสับข้อมูลบนองค์ประกอบ UI
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการสัมผัสท่าทางบนองค์ประกอบ UI
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
ไฟเมื่อการเลือกเกมแพดย้ายไปที่ ออก หรือเปลี่ยนภายในเชื่อมต่อ GuiBase2d หรือทายาทใดๆ GuiObjects
คุณสมบัติ
Image
คุณสมบัตินี้เป็นคุณสมบัติประเภทเนื้อหาที่ควรมีรหัสทรัพย์สินของภาพหรือภาพที่อัปโหลดไปยัง Robloxมันทำงานเหมือนกับ Decal.Texture ในเรื่องของการโหลดภาพจาก Robloxภาพที่เรนเดอร์สามารถแก้ไขได้โดยใช้ ImageColor3 และ ImageTransparency
ImageColor3
คุณสมบัตินี้กำหนดวิธีที่ภาพถูกสีได้เมื่อตั้งค่าเป็นขาวไม่มีการแยกสีเกิดขึ้นคุณสมบัตินี้มีประโยชน์มากสำหรับการใช้ซ้ำทรัพยากรภาพ; หากภาพที่มาเป็นสีขาวสมบูรณ์พร้อมความโปร่งใส คุณสามารถตั้งสีทั้งหมดของภาพได้ในครั้งเดียวด้วยคุณสมบัตินี้
ImageContent
คุณสมบัตินี้ควรมี URI สินทรัพย์ หรือการอ้างอิงถึงวัตถุ EditableImage
URI ของสินทรัพย์สามารถอ้างอิงถึงภาพหรือภาพที่อัปโหลดไปยัง Roblox ได้ มันทำงานเหมือนกับ Decal.Texture ในเรื่องของการโหลดภาพ
ภาพที่เรนเดอร์จะถูกสีโดยใช้ ImageButton.ImageColor3เป็นไปได้ที่จะทำให้ภาพเรนเดอร์เป็นแบบกระเบื้อง ปรับขนาดให้พอดี หรือแบ่งเป็น 9 ส่วนโดยปรับคุณสมบัติ ImageButton.ScaleType
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.
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.
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 รูปภาพจะเก็บขอบแหลมของพิกเซลไว้
ScaleType
คุณสมบัตินี้กำหนดวิธีที่ ImageLabel.Image จะแสดงเมื่อขนาดขององค์ประกอบ UI แตกต่างจากขนาดของภาพที่มาจากแหล่ง
โดยค่าเริ่มต้นคุณสมบัตินี้คือ Enum.ScaleType.Stretch ซึ่งจะยืด/บีบขนาดภาพให้พอดีกับพื้นที่ขององค์ประกอบ UI อย่างแม่นยําเนื่องจากพิกเซลโปร่งใสถูกตั้งค่าเป็นสีดำเมื่ออัปโหลดไปยัง Roblox ภาพโปร่งใสควรใช้การผสมผสานอัลฟาเพื่อหลีกเลี่ยงการเน้นสีดำรอบภาพที่ขยาย
สำหรับ Enum.ScaleType.Slice , คุณสมบัติ SliceCenter จะถูกเปิดเผยในหน้าต่าง คุณสมบัตินี่สำหรับ UI แปดชิ้น: เมื่อขยายขึ้น มุมจะยังคงเป็นขนาดภาพที่เป็นแหล่งขอบของภาพจะยืดไปตามความกว้าง/ความสูงของภาพในที่สุด ศูนย์กลางของภาพจะยืดออกเพื่อเติมพื้นที่กลางของภาพ
ในที่สุดสำหรับ Enum.ScaleType.Tile คุณสมบัติ TileSize จะถูกเปิดเผยในหน้าต่าง คุณสมบัตินี่สำหรับภาพที่มีกระเบื้อง ซึ่งขนาดของแต่ละภาพกระเบื้องจะถูกกำหนดโดยคุณสมบัติ TileSize
SliceCenter
คุณสมบัตินี้ตั้งขอบเขตสไลซ์ของภาพที่ตัดเป็น 9 ส่วนเมื่อ ScaleType ถูกตั้งค่าเป็น Enum.ScaleType.Sliceโปรดทราบว่าคุณสมบัตินี้จะปรากฏเฉพาะในหน้าต่าง คุณสมบัติ ภายใต้เงื่อนไขนี้เท่านั้น
เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับภาพ 9 สไลซ์ ดู การออกแบบ UI 9 สไลซ์
SliceScale
ขยายขอบ 9 ส่วนตามอัตราส่วนที่กำหนดซึ่งหมายความว่าขอบรอบ 9-slice จะเติบโตเหมือนกับว่าคุณอัปโหลดเวอร์ชันใหม่ของเทกเจอร์ที่ขยายขนาดแล้วค่าเริ่มต้นเป็น 1.0 .
ดูเพิ่มเติม ScaleType , SliceCenter , และ SliceScale .
TileSize
คุณสมบัตินี้ตั้งขนาดการจัดเรียงของ ImageLabel ด้วยค่าเริ่มต้นของ
ตัวอย่างโค้ด
This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.
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