目錄

【iVX 初級工程師培訓教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級工程師培訓教程 10篇文拿證】02 數值綁定及自適應網站制作
【iVX 初級工程師培訓教程 10篇文拿證】03 事件及猜數字小游戲
【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級工程師培訓教程 10篇文拿證】05 畫布及飛機大戰游戲制作
【iVX 初級工程師培訓教程 10篇文拿證】06 數據庫及服務
【iVX 初級工程師培訓教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級工程師培訓教程 10篇文拿證】09 聊天室制作

高分提升請查看專欄：
iVX入門到精通
大話 IVX 實戰到精通

一、畫布和圖片序列

在 iVX 中，畫布是用于對圖像進行靈活編輯的組件，若你需要對圖片進行融合，那么使用畫布是你最優的選擇。

圖片序列在 iVX 中可以當做是跟輪播圖類似的組件，不過和輪播圖有很大差別；輪播圖可以更加靈活的對圖片文本進行操作，而圖片序列只能對多張圖片進行播放。

1.1 圖片序列

圖片序列位于組件面板中圖片右側：

以相對定位應用為例，創建相對定位應用，在應用中添加一個頁面，在頁面中點擊圖片序列即可添加；當點擊圖片序列后將會彈出資源選擇窗口，只需要選擇多張圖片即可創建一個圖片序列，當然也可以選擇一張 gif 動圖：

選擇多張圖片后點擊確定即可：

此時在對象樹中點擊該圖片序列，在屬性中點擊圖片列表可以更改圖片位置：

在圖片位置中可以更改器播放時長等：

二、動畫和時間軸

動畫在iVX中是比較有特色的，支持用戶自己定義動畫路徑以及動畫樣式。現在以一個絕對定位的文本為例：

點擊文本，可以在文本左側看到一個組件——軌跡，軌跡可以讓我們為該組件創建幀動畫：

為該文本添加軌跡屬性后，在底部可以看到有一個時間軸，咱們可以對這個時間軸在對應的時間秒數打上關鍵幀，在這些關鍵幀中為其制作動畫：

接著可拖動時間軸為其添加關鍵幀：

在不同的時間點打上關鍵幀后，如下圖所示：

接著點擊那些打上的關鍵幀改動其文本的位置或其他屬性，以位置為例：

接下來在多個時間軸改變其文本位置：

最后點擊軌跡，在屬性中打開自動播放即可：

預覽后文本將會根據關鍵幀信息播放動畫。

三、我和iVX的合照

在第一點中介紹了畫布的作用，接下來咱們使用畫布合成一張圖片，并且下載到本地。

3.1 頁面繪制

以下是頁面繪制示例，其中需要注意，在畫布中繪制圖片是絕對定位環境，若想要一張圖片覆蓋于另外一張圖片之上，需要一張圖片在對象樹中位于另外一張圖片之上。

以上對象樹中我們發現有一個文件接口組件，文件接口組件是用于圖片資源獲取及上傳。

3.2 功能制作

需要自由的對圖片進行合成，咱們對畫布添加點擊事件，點擊畫布即可選擇本地支資源圖片，咱們首先對畫布添加事件：

以上事件中，回調是指“某動作做完之后”需要做的事情，在以上示例中，讀取完圖片后，指定畫布中的一個對象更改圖片為選擇的圖片。

接著對合成按鈕添加事件，點擊按鈕后使用畫布對圖片進行輸出，輸出到畫布外圖片即可：

最后預覽如下：