Image 圖像元件介紹
圖像元件用於承載圖像,提供使用者豐富版面編排的內容呈現
*目前尚未支援動態的PNG格式,要實現動態圖檔請使用 Lottie 元件
圖像元件在畫布上的各種呈現樣貌
Frame 區塊
Frame 基本屬性和 Rect 方塊元件相同,詳細可參考方塊元件 Frame 區塊解說
Properties 區塊
圖像元件的 Properties 基本屬性繼承方塊元件,詳細可參考方塊元件 Properties 區塊解說。
其他屬性解說如下:
Property Name 屬性名稱 | Property Type 屬性形態 | Description 說明 |
Resize Mode | One Of 清單 | The resize methods that will be applied when the image's dimensions differ from the image brick's (the container's) dimensions.
設定圖片在圖像元件中的呈現模式,一共有以下幾種模式可選擇
|
Path | String (File/ URL) 字串 (檔案路徑/ 網址) | The file path of the image (URL or image files from Media Box). 設定圖片的連結路徑,可選擇使用 Media Box 中上傳的圖檔。 |
MD5 | String 字串 (128位元的散列值) | The checksum of the file. 自動生成的雜湊值,用於確保檔案在傳輸中的一致性及正確性。 |
Tint Color | String 字串 | To change the color of all non-transparent pixels of the image to the tint color. 設定圖像中所有非透明的像素指定一個顏色覆蓋,使其原像素色彩變成指定顏色。 |
Fade Duration | ms 毫秒 | The fade-in duration of the image. 設定圖像元件淡入的動畫持續時間。 |
Avatar | Boolean 布林值 Yes / No | To set the image as avatar (profile picture) mode. It rounds the corners of the image. 設定圖像為頭像模式,四個邊角會自動導角成圓弧性。 |
Width | Number 數值 | The width of the avatar. Setting this value to be equal to the image's height will make the image avatar circular. 設定 Avatar 的圖像元件寬度,將寬度設定為和高度一致時會使 Avatar 頭像呈現圓形。 |
Properties - Border
基本邊框屬性和 Rect 方塊元件相同,詳細可參考方塊元件 Border 區塊解說
Animations
基本動畫事件屬性和 Rect 方塊元件相同,詳細可參考方塊元件 Animation 區塊解說。
其他動畫事件屬性解說如下:
On Load | Animation that will be triggered when the image is loaded. 當 Image 圖像元件讀取完成觸發的動畫事件。 |
Events
基本事件屬性和 Rect 方塊元件相同,詳細可參考方塊元件 Event 區塊解說。
其他事件屬性解說如下:
On Load | Event that will be triggered when the image is loaded. 當 Image 圖像元件讀取完成觸發的事件。 |