EditableImage 允許運行時創建和操作圖像。
要創建空白的 EditableImage ,請使用 AssetService:CreateEditableImage() 。要從現有圖像創建 EditableImage ,請使用 AssetService:CreateEditableImageAsync() 。
EditableImage 可以用於任何含有圖像的 Content 屬性,例如 ImageLabel.ImageContent 或 MeshPart.TextureContent 。這可以通過將內容屬性設置為 Content.fromObject(editableImage) 來實現。
EditableImage 坐標系統相對於圖像的左上角:
- 左上:(0, 0)
- 右下:(Size.X - 1, Size.Y - 1)
當您使用 AssetService:PromptCreateAssetAsync() 來發布具有 Content 屬性的對象,該屬性會引用 EditableImage 時,編輯圖像會發布為圖像,屬性將設為新的資產ID。
更新限制
只能在顯示側每框更新一個 EditableImage 。例如,如果您更新目前正在顯示的三個 EditableImage 對象,將需要三個框架來更新所有對象。
啟用已發布的體驗
為了安全目的,使用 EditableImage 對發布的體驗會預設失敗。要啟用使用,您必須年滿 13 歲且身份驗證通過。驗證通過後,開啟 Studio的遊戲設定,選擇 安全 ,並啟用 允許網格/圖像API 切換。
許可
為了防止濫用,AssetService:CreateEditableImageAsync()只允許您載入和編輯圖像資產:
- 這些是屬於體驗創作者的(如果體驗屬於個人)。
- 屬於群組所有的(如果體驗屬於群組)。
- 屬於登入的工作室用戶所擁有(如果位置檔案尚未儲存或發布到 Roblox)。
如果使用 API 載入不符合上述條件的資產,它們將發出錯誤。
記憶限制
可編輯的資產目前對記憶使用成本高昂。為了減少對客戶端性能的影響,EditableImage 有嚴格的客戶端記憶預算,雖然伺服器、Studio 和插件都使用無限記憶。將一個 EditableImage 鏈接到多個圖像相關的 Content 數據類型(多次參考)可以幫助優化記憶。
概要
方法
- 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 。允許超出畫布邊界的位置,只繪製新圖像的一部分。
參數
添加的圖像左上角的位置,將被繪製。
這個 EditableImage 要繪製到這個 EditableImage 。
來源圖像的畫素應與添加的圖像的畫素融合的方式。
返回
DrawImageProjected
將另一個 EditableImage 轉換為 EditableMesh 並將結果存儲在此 EditableImage 使用指定的投影和刷子配置。
參數
用於投射的 EditableMesh。
包括以下鑰匙值對的刷子配置辭典:
- AlphaBlendType (Enum.ImageAlphaType)決定這個投影將如何融合 alpha 值。
- ColorBlendType (Enum.ImageCombineType)決定這個投影將如何融合顏色值。
- Decal (EditableImage)作為投影使用的圖像。
- FadeAngle (數字)作為投影邊緣脫落的角度,以度為單位。
- BlendIntensity (數字)作為在 0 和 1 之間的值,控制投影是否融入到最終圖像中的多少。
返回
DrawImageTransformed
這個方法讓你能夠在此 EditableImage 繪製包含變形的 EditableImage 圖像,例如縮放和旋轉。位置參數指定來源圖像的旋轉點將在變換後放置在此圖像上的位置。允許超出畫布邊界的位置,只繪製新圖像的一部分。
參數
在像素中的位置,源圖像的旋轉點將放置在此圖像上。
沿 X 和 Y 軸的來源圖像縮放因子。
旋轉角度以度,應用於來源圖像的旋轉點。
要被此圖像拖入的來源 EditableImage 。
額外配置的可選辭典:
- CombineType : 指定來源圖像的畫素與目的地圖像融合的方式。默認值為 Enum.ImageCombineType.AlphaBlend 。
- 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
}
)
下面的代碼顯示使用 EditableImage:DrawImageTransformed() 方法來裁剪圖像的方法。
local AssetService = game:GetService("AssetService")
-- 來源圖像
local srcImage = AssetService:CreateEditableImageAsync(Content.fromUri(assetUri))
-- 由偏移和尺寸定義的縮放區域
local cropOffset = Vector2.new(50, 50)
local cropSize = Vector2.new(100, 100)
-- 作物區域尺寸的目標圖像
local dstImage = AssetService:CreateEditableImage({ Size = cropSize })
-- 位置 (左上角)
local position = Vector2.new(0, 0)
-- 比例因子(無縮放)
local scale = Vector2.new(1, 1)
-- 旋轉角度(無旋轉)
local rotation = 0
-- 將來源圖像繪製到目標圖像上,調整軸心以裁剪圖像
dstImage:DrawImageTransformed(position, scale, rotation, srcImage, {
CombineType = Enum.ImageCombineType.Overwrite,
PivotPoint = cropOffset, -- 將旋轉點設為 cropOffset 以從那裡開始繪製
})
DrawLine
在兩個提供的點之間繪製一條反折線,寬度為一像素的 EditableImage 線。
參數
線的起點。
線的末端點。
線的顏色。
線的透明度。
來源圖像的畫素與添加圖像的畫素如何融合。
返回
DrawRectangle
在給定的左上角位置繪製一個長方形,尺寸為給定的尺寸。
參數
長方形的左上角位置。與其他繪圖方法不同,此不能超出 EditableImage 畫布邊界。
要繪製的長方形大小,以像素為單位。
長方形的顏色。
長方形的透明度。
來源圖像的畫素與添加圖像的畫素如何融合。
返回
ReadPixelsBuffer
從 EditableImage 閱讀長方形的像素區域,並將其返回為緩存。緩存中的每個數字都是單一位元,與像素存儲在四個字元順序(紅色、綠色、藍色和Alpha)中。
請注意,此方法使用 alpha 而不是透明度,與 EditableImage 繪圖方法不同。
參數
返回
每個畫素由四個字元表示的緩存(分別為紅色、綠色、藍色和Alpha)。緩衝區的長度可以計算為 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 。緩存中的每個數字都是單一位元,與像素存儲在四個字元順序(紅色、綠色、藍色和Alpha)中。
請注意,此方法使用 alpha 而不是透明度,與 EditableImage 繪圖方法不同。
參數
長方形區域的左上角,用於將像素繪入。
要寫入的像素長方形區域的大小。
每個像素由四個字元 (分別為紅色、綠色、藍色和Alpha) 來表示的緩存。緩存的長度應為 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)