EditableImage
*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่
EditableImage สามารถสร้างและจัดการรูปภาพระหว่างการทำงานได้
เพื่อสร้างว่างเปล่า EditableImage ใช้ AssetService:CreateEditableImage() เพื่อสร้าง EditableImage จากภาพที่มีอยู่ใช้ AssetService:CreateEditableImageAsync()
สามารถใช้ในคุณสมบัติใดก็ได้ที่มีภาพ เช่น หรือ สิ่งนี้ทำได้โดยการตั้งค่าคุณสมบัติเนื้อหาเป็น Content.fromObject(editableImage)
ระบบการจัดเวลา EditableImage เป็นระบบที่เกี่ยวข้องกับด้านบนซ้ายของภาพ:
- ด้านบนซ้าย: (0, 0)
- ด้านล่างขวา: (Size.X - 1, Size.Y - 1)
เมื่อคุณใช้ AssetService:PromptCreateAssetAsync() เพื่อเผยแพร่วัตถุที่มีคุณสมบัติ Content ซึ่งอ้างอิงถึง EditableImage รูปภาพที่แก้ไขได้จะถูกเผยแพร่เป็นรูปภาพและคุณสมบัติจะถูกตั้งเป็น ID สินทรัพย์ใหม่
อัปเดตข้อจํากัด
เฉพาะเดียว EditableImage สามารถอัปเดตต่อเฟรมได้บนด้านจอแสดงผลตัวอย่างเช่น หากคุณอัปเดตสามวัตถุ EditableImage ที่กําลังแสดงอยู่ในปัจจุบัน จะใช้เวลาสามเฟรมสําหรับทั้งหมดที่จะได้รับการอัปเดต
เปิดใช้งานภาพที่แก้ไขได้สำหรับประสบการณ์ที่เผยแพร่
เพื่อวัตถุประสงค์ด้านความปลอดภัยการใช้ EditableImage ตรวจสอบยืนยันตัวตนEditableImage คุณต้องมีอายุ 13+ และตรวจสอบไอดีแล้วหลังจากที่คุณได้รับการยืนยันแล้ว เปิด Studio เลือก ไฟล์ > การตั้งค่าเกม > ความปลอดภัย และเปิดใช้งานสวิตช์ อนุญาตให้ใช้ API เมชและภาพ อย่าลืมตรวจสอบเงื่อนไขการใช้งานก่อนเปิดใช้งานสลับ
สิทธิ์
เพื่อป้องกันการใช้งานผิดพลาด AssetService:CreateEditableImageAsync() อนุญาตให้คุณโหลดและแก้ไขทรัพยากรรูปภาพเท่านั้น:
- ที่เป็นเจ้าของโดยผู้สร้างประสบการณ์ (ถ้าประสบการณ์เป็นของบุคคล)
- ที่เป็นเจ้าของโดยกลุ่ม (หากประสบการณ์เป็นเจ้าของโดยกลุ่ม)
- ที่เป็นเจ้าของโดยผู้ใช้ Studio ที่ล็อกอินแล้ว (หากไฟล์สถานที่ยังไม่ถูกบันทึกหรือเผยแพร่ไปยัง Roblox)
API จะโยนข้อผิดพลาดหากใช้เพื่อโหลดสินทรัพย์ที่ไม่ตรงตามเกณฑ์ด้านบน
สรุป
วิธีการ
- DrawCircle(center : Vector2,radius : number,color : Color3,transparency : number,combineType : Enum.ImageCombineType):()
วาดวงกลมที่จุดที่ระบุ
วาดอีก EditableImage ในตําแหน่งนี้ EditableImage ที่กำหนด
โครงการอื่นอีก EditableImage ใน EditableMesh และจัดเก็บผลลัพธ์ใน EditableImage นี้
- DrawImageTransformed(position : Vector2,scale : Vector2,rotation : number,image : EditableImage,options : Dictionary?):()
วาดภาพเข้าสู่สิ่งนี้ EditableImage ด้วยการเปลี่ยนแปลงรวมถึงการปรับขนาดและการหมุน วางไว้ในตำแหน่งที่ระบุ
วาดเส้นระหว่างจุดที่ให้มาสองจุด
- DrawRectangle(position : Vector2,size : Vector2,color : Color3,transparency : number,combineType : Enum.ImageCombineType):()
วาดรูปสี่เหลี่ยมขนาดที่กำหนดไว้ในตำแหน่งด้านบนซ้ายที่กำหนด
อ่านภูมิภาคสี่เหลี่ยมของพิกเซลเป็นบัฟ
เขียนภูมิภาคสี่เหลี่ยมของพิกเซลล์ลงในภาพ
คุณสมบัติ
Size
ขนาดของ EditableImage ในพิกเซลขนาดสูงสุดคือ 1024×1024ไม่สามารถปรับขนาด EditableImage ได้; คุณสมบัตินี้ไม่สามารถอ่านได้เพื่อปรับขนาดหรือตัดภาพให้เหมาะสม สร้าง EditableImage ใหม่และใช้ DrawImageTransformed() เพื่อโอนเนื้อหา จากนั้นโทร Destroy()
วิธีการ
Destroy
ทำลายเนื้อหาของภาพโดยทันที และเรียกคืนหน่วยความจําที่ใช้แล้วทันที
ส่งค่ากลับ
DrawCircle
วาดวงกลมที่จุดที่ระบุบน EditableImageหากวงกลมเป็นครึ่งโปร่งใส มันจะถูกผสมกับพิกเซลที่อยู่เบื้องหลังโดยใช้การบล็อกแหล่งที่มา
พารามิเตอร์
ศูนย์กลางของวงกลม เมื่อเทียบกับมุมซ้ายบนของ EditableImage ตำแหน่งนอกขอบแคนวาสจะได้รับอนุญาต
รัศมีของวงกลมในพิกเซล
สีของวงกลม
ความโปร่งใสของวงกลมที่ 0 เป็นโปร่งใสสมบูรณ์และ 1 เป็นโปร่งใสสมบูรณ์
วิธีที่พิกเซลของภาพที่มาจากแหล่งจะผสมกับพิกเซลของภาพที่เพิ่มเข้ามา
ส่งค่ากลับ
DrawImage
วาดอีก EditableImage ในตําแหน่งนี้ EditableImage ที่กำหนดตำแหน่งนอกขอบเขตภาพวาดสามารถอนุญาตได้เพื่อให้วาดเฉพาะส่วนหนึ่งของภาพใหม่เท่านั้น
พารามิเตอร์
ตำแหน่งที่มุมด้านบนซ้ายของภาพที่เพิ่มมาจะถูกวาด
The EditableImage เพื่อวาดเข้าสู่สิ่งนี้ EditableImage .
วิธีที่พิกเซลของภาพที่มาจากแหล่งจะต้องผสมกับพิกเซลของภาพที่เพิ่มเข้ามา
ส่งค่ากลับ
DrawImageProjected
โครงการอื่นอีก EditableImage ใน EditableMesh และบันทึกผลลัพธ์บนนี้ EditableImage โดยใช้การกำหนดค่าโครงการและแปรงที่ระบุ
พารามิเตอร์
The EditableMesh ที่ใช้โครงการเข้าไป
คู่คีย์-ค่าที่เกี่ยวข้องกับคำอธิบายการโปรเจครวมถึงคู่ต่อไปนี้:
สารานุกรมการกำหนดค่าแปรงรวมถึงคู่คีย์-ค่าต่อไปนี้:
- AlphaBlendType ( Enum.ImageAlphaType ) ซึ่งกำหนดวิธีที่การฉายภาพนี้จะผสมผสานค่าอัลฟา
- ColorBlendType ( Enum.ImageCombineType ) ซึ่งกำหนดวิธีที่การฉายภาพนี้จะผสมผสานค่าสี
- Decal ( EditableImage ) เป็นภาพที่ใช้สำหรับการฉาย
- FadeAngle (จํานวน) ในฐานะมุมในองศาสําหรับขอบการฉายที่จะล้มลง
- BlendIntensity (จํานวน) เป็นค่าระหว่าง 0 และ 1 ซึ่งควบคุมจํานวนของการฉายภาพที่จะผสมผสานเข้ากับภาพที่ได้รับ
ส่งค่ากลับ
DrawImageTransformed
วิธีนี้ช่วยให้คุณวาด EditableImage ในสิ่งนี้ EditableImage ด้วยการเปลี่ยนแปลงที่ใช้ เช่น การปรับขนาดและการหมุนพารามิเตอร์ตำแหน่งระบุว่าจุดศูนย์กลางของภาพที่มาจะถูกวางบนภาพนี้หลังการแปลงแล้วตำแหน่งนอกขอบเขตภาพวาดสามารถอนุญาตได้เพื่อให้วาดเฉพาะส่วนหนึ่งของภาพใหม่เท่านั้น
พารามิเตอร์
ตำแหน่งในพิกเซลที่จุดหมุนของภาพที่มาจากแหล่งภาพจะถูกวางบนภาพนี้
ตัวคูณสำหรับภาพที่มาจากแกน X และ Y
มุมการหมุนในองศาที่ใช้รอบจุดศูนย์กลางของภาพที่เป็นแหล่ง
ที่มา EditableImage ที่จะถูกวาดเข้าไปในภาพนี้
สารานุกรมทางเลือกสำหรับการกำหนดค่าเพิ่มเติม:
- CombineType : กำหนดวิธีที่พิกเซลของภาพที่มาบล็อกกับพิกเซลของเป้าหมาย ค่าเริ่มต้นคือ Enum.ImageCombineType.AlphaBlend
- SamplingMode : กำหนดวิธีการสุ่มตัวอย่าง (เช่น Default สำหรับบิลิเนียร์หรือ Pixelated สำหรับเพื่อนบ้านที่ใกล้ที่สุด) ค่าเริ่มต้นคือ Enum.ResamplerMode.Default
- PivotPoint : กำหนดจุดศูนย์กลางภายในภาพที่มาเพื่อการขยายและหมุน ค่าเริ่มต้นคือศูนย์กลางของภาพที่มา (เช่น Image.Size / 2 )
ส่งค่ากลับ
ตัวอย่างโค้ด
The following code draws a rotated and scaled image onto another.
local AssetService = game:GetService("AssetService")
-- Example of drawing a rotated and scaled image onto another EditableImage
local srcImage = AssetService:CreateEditableImage({ Size = Vector2.new(256, 256) })
local dstImage = AssetService:CreateEditableImage({ Size = Vector2.new(512, 512) })
-- Drawing with a rotation of 45 degrees, scaling by 2x, and placing at (100, 100)
dstImage:DrawImageTransformed(
Vector2.new(100, 100), -- Position
Vector2.new(2, 2), -- Scale
45, -- Rotation (degrees)
srcImage, -- Source image
{
CombineType = Enum.ImageCombineType.AlphaBlend, -- Optional, default is AlphaBlend
SamplingMode = Enum.ResamplerMode.Default, -- Optional, default is Default
PivotPoint = srcImage.Size / 2, -- Optional, default is center of the source image
}
)
The following code shows how cropping an image can be done using the EditableImage:DrawImageTransformed() method.
local AssetService = game:GetService("AssetService")
-- Source image
local srcImage = AssetService:CreateEditableImageAsync(Content.fromUri(assetUri))
-- Crop area defined by offset and size
local cropOffset = Vector2.new(50, 50)
local cropSize = Vector2.new(100, 100)
-- Destination image with size of the crop area
local dstImage = AssetService:CreateEditableImage({ Size = cropSize })
-- Position (top-left corner)
local position = Vector2.new(0, 0)
-- Scale factors (no scaling)
local scale = Vector2.new(1, 1)
-- Rotation angle (no rotation)
local rotation = 0
-- Draw the source image onto the destination image with adjusted pivot to crop the image
dstImage:DrawImageTransformed(position, scale, rotation, srcImage, {
CombineType = Enum.ImageCombineType.Overwrite,
PivotPoint = cropOffset, -- Set pivot point to cropOffset to start drawing from there
})
DrawLine
วาดเส้นป้องกันบน EditableImage หนึ่งพิกเซลระหว่างจุดที่ให้ไว้สองจุด
พารามิเตอร์
จุดเริ่มต้นของเส้น
จุดสิ้นสุดของเส้น
สีของเส้น
ความโปร่งใสของสาย
วิธีที่พิกเซลของภาพที่มาจากแหล่งจะผสมกับพิกเซลของภาพที่เพิ่มเข้ามา
ส่งค่ากลับ
DrawRectangle
วาดรูปสี่เหลี่ยมบน EditableImage ของขนาดที่กำหนดที่ตำแหน่งด้านบนซ้าย
พารามิเตอร์
ตำแหน่งด้านบนซ้ายของสี่เหลี่ยม ไม่เหมือนวิธีการวาดภาพอื่นๆ สิ่งนี้ไม่สามารถอยู่นอกขอบเขตของแคนวาสของ EditableImage
ขนาดของสี่เหลี่ยมที่จะวาดในพิกเซล
สีของสี่เหลี่ยม
ความโปร่งใสของสี่เหลี่ยม
วิธีที่พิกเซลของภาพที่มาจากแหล่งจะผสมกับพิกเซลของภาพที่เพิ่มเข้ามา
ส่งค่ากลับ
ReadPixelsBuffer
อ่านภูมิภาคสี่เหลี่ยมของพิกเซลจาก EditableImage และส่งคืนเป็นบัฟแต่ละหมายเลขในบัฟเฟอร์เป็นไบต์เดียวที่มีพิกเซลที่เก็บไว้ในลำดับสี่ไบต์ (สีแดง สีเขียว สีฟ้า และสีอัลฟา)
โปรดทราบว่าวิธีนี้ใช้อัลฟาแทนความโปร่งใส ไม่เหมือนกับวิธีวาดภาพ EditableImage
พารามิเตอร์
อ่านแล้ว
ขนาดของภูมิภาคสี่เหลี่ยมของพิกเซลที่จะอ่าน
ส่งค่ากลับ
บัฟที่แต่ละพิกเซลจะถูกแทนที่ด้วยสี่ไบต์ (สีแดง สีเขียว สีฟ้า และสีอัลฟาตามลําดับ)ความยาวของบัฟสามารถคำนวณได้เป็น Size.X * Size.Y * 4 ไบต์
ตัวอย่างโค้ด
The following code reads two pixels from a EditableImage and creates a part with the average color between them.
local AssetService = game:GetService("AssetService")
local options = { Size = Vector2.new(32, 32) }
local editableImage = AssetService:CreateEditableImage(options)
local pixelsBuffer = editableImage:ReadPixelsBuffer(Vector2.zero, Vector2.new(2, 1))
local color1 =
Color3.fromRGB(buffer.readu8(pixelsBuffer, 0), buffer.readu8(pixelsBuffer, 1), buffer.readu8(pixelsBuffer, 2))
local transparency1 = (255 - buffer.readu8(pixelsBuffer, 3)) / 255
local color2 =
Color3.fromRGB(buffer.readu8(pixelsBuffer, 4), buffer.readu8(pixelsBuffer, 5), buffer.readu8(pixelsBuffer, 6))
local transparency2 = (255 - buffer.readu8(pixelsBuffer, 7)) / 255
local averageColor = color1:Lerp(color2, 0.5)
local averageTransparency = (transparency1 + transparency2) / 2
local part = Instance.new("Part")
part.Color = averageColor
part.Transparency = averageTransparency
part.Parent = workspace
WritePixelsBuffer
เขียนภูมิภาคสี่เหลี่ยมของพิกเซลไปยัง EditableImage จากบัฟแต่ละหมายเลขในบัฟเฟอร์เป็นไบต์เดียวที่มีพิกเซลที่เก็บไว้ในลำดับสี่ไบต์ (สีแดง สีเขียว สีฟ้า และสีอัลฟา)
โปรดทราบว่าวิธีนี้ใช้อัลฟาแทนความโปร่งใส ไม่เหมือนกับวิธีวาดภาพ EditableImage
พารามิเตอร์
มุมซ้ายบนของภูมิภาคสี่เหลี่ยมเพื่อวาดพิกเซล
ขนาดของภูมิภาคสี่เหลี่ยมของพิกเซลที่จะเขียน
บัฟที่แต่ละพิกเซลจะถูกแทนที่ด้วยสี่ไบต์ (สีแดง สีเขียว สีฟ้า และสีอัลฟาตามลําดับ)ความยาวของบัฟควรเป็น Size.X * Size.Y * 4 ไบต์
ส่งค่ากลับ
ตัวอย่างโค้ด
The following code reads the pixels of a EditableImage and writes back the inverted color values of those pixels.
local AssetService = game:GetService("AssetService")
local options = { Size = Vector2.new(32, 32) }
local editableImage = AssetService:CreateEditableImage(options)
local pixelsBuffer = editableImage:ReadPixelsBuffer(Vector2.zero, editableImage.Size)
for i = 1, editableImage.Size.X * editableImage.Size.Y do
local pixelIndex = (i - 1) * 4
buffer.writeu8(pixelsBuffer, pixelIndex, 255 - buffer.readu8(pixelsBuffer, pixelIndex))
buffer.writeu8(pixelsBuffer, pixelIndex + 1, 255 - buffer.readu8(pixelsBuffer, pixelIndex + 1))
buffer.writeu8(pixelsBuffer, pixelIndex + 2, 255 - buffer.readu8(pixelsBuffer, pixelIndex + 2))
-- Set alpha to 255 to make all pixels fully opaque.
buffer.writeu8(pixelsBuffer, pixelIndex + 3, 255)
end
editableImage:WritePixelsBuffer(Vector2.zero, editableImage.Size, pixelsBuffer)