【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡
目錄
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】02 數(shù)值綁定及自適應(yīng)網(wǎng)站制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】03 事件及猜數(shù)字小游戲
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】05 畫布及飛機(jī)大戰(zhàn)游戲制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】06 數(shù)據(jù)庫及服務(wù)
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級(jí)工程師培訓(xùn)教程 10篇文拿證】09 聊天室制作
高分提升請(qǐng)查看專欄：
iVX入門到精通
大話 IVX 實(shí)戰(zhàn)到精通
一、了解 iVX
iVX 是一門編程語言，但與常規(guī)的編程不同，iVX是一款無代碼的開發(fā)語言，對(duì)于不懂開發(fā)的初學(xué)者來說，拋棄了常規(guī)編程語言中的代碼，使開發(fā)更加簡(jiǎn)單并高效；iVX 在開發(fā)某些功能時(shí)自帶了對(duì)應(yīng)的模塊，開發(fā)起來更加高效，并且對(duì)于程序員來說可以導(dǎo)出其代碼進(jìn)行二次開發(fā)，極大的增加了開發(fā)效率且不失靈活。
iVX不僅是一門編程語言，還是一個(gè)IDE；開發(fā)者不需要下載對(duì)應(yīng)的環(huán)境就可以在線的進(jìn)行開發(fā)，在發(fā)布項(xiàng)目時(shí)還可以直接進(jìn)行部署，并支持域名的解析；在這一方面，iVX 減省了對(duì)應(yīng)的運(yùn)維成本，開發(fā)者只需要關(guān)注應(yīng)用功能，維護(hù)不再成為開發(fā)者頭疼的事情。
二、項(xiàng)目創(chuàng)建
我們可以通過 iVX 的IDE鏈接進(jìn)入開發(fā)界面：https://editor.ivx.cn/
點(diǎn)擊鏈接進(jìn)入到IDE頁面后將會(huì)出現(xiàn)如下窗口，根據(jù)個(gè)人需要選擇不同的類型進(jìn)行開發(fā)。
在選擇項(xiàng)目創(chuàng)建時(shí)，將會(huì)看到有 絕對(duì)定位 應(yīng)用和 相對(duì)定位 應(yīng)用，這兩者的區(qū)別分別如下：
- 絕對(duì)定位：使用絕對(duì)的 xy 坐標(biāo)繪制應(yīng)用元素（例如圖片所在位置根據(jù) xy 確定），之后將會(huì)通過示例詳細(xì)講解；
- 相對(duì)定位：根據(jù)元素的相對(duì)位置在界面中進(jìn)行定位，相對(duì)定位不會(huì)存在 xy 值（除非相對(duì)定位中存在一個(gè)絕對(duì)定位組件，例如畫布）。
本次項(xiàng)目以絕對(duì)定位為例，選擇絕對(duì)定位類型的 webApp項(xiàng)目，點(diǎn)擊創(chuàng)建即可進(jìn)入該項(xiàng)目的編輯界面：
點(diǎn)擊創(chuàng)建后將會(huì)看到一個(gè)IDE界面如下：
在以上圖片示例中可以看到幾個(gè)常用區(qū)域：
- 組件面板：在以上界面中，左側(cè)為組件面板，組件面板是 iVX 中的可添加元素區(qū)域，在組件欄中可以找到你想要的元素添加至項(xiàng)目中，開發(fā)簡(jiǎn)單點(diǎn)擊即可添加；
- 屬性面板：屬性面板可以更改組件的屬性，例如文本的顏色、大小，圖片的來源、邊框等；
- 預(yù)覽工具：預(yù)覽區(qū)域可以對(duì)項(xiàng)目進(jìn)行配置、發(fā)布以及獲取預(yù)覽地址；
- 對(duì)象樹：該項(xiàng)目中所有添加的元素在對(duì)象樹中都可以找得到；
- 事件及其他工具：添加事件、服務(wù)等內(nèi)容； 舞臺(tái)區(qū)：項(xiàng)目編輯、即時(shí)顯示窗口；
三、常用組件
iVX 的組件一般是常規(guī) Web、App 等開發(fā)中的常見元素，例如以下截圖中所示：
特殊一點(diǎn)的組件還有變量組件：
在 iVX 中組件大體可以分為 可視組件、功能組件、容器組件，其中可視組件就是圖片、文本這類；功能組件就是 for 組件、if 組件 、表格組件等這一類；容器組件可以理解為是 行列、變量等組件。
這些組件咱們將會(huì)在接下來的章節(jié)中進(jìn)行講解說明。
四、絕對(duì)定位與賀卡制作
4.1 絕對(duì)定位
絕對(duì)定位在 iVX 中指使用絕對(duì)的 xy 坐標(biāo)對(duì)某一個(gè)元素進(jìn)行位置上的定位。
首先我們選擇前臺(tái)表示在前臺(tái)下添加組件，隨后點(diǎn)擊頁面，接下來咱們?cè)陧撁嫔线M(jìn)行組件的添加。
添加后的元素將會(huì)在對(duì)象樹中進(jìn)行顯示：
接下來鼠標(biāo)點(diǎn)擊頁面1，即可在左側(cè)的組件面板中找到對(duì)應(yīng)的內(nèi)容進(jìn)行添加。以文本為例，點(diǎn)擊文本組件，鼠標(biāo)將會(huì)變成一個(gè)十字可繪制的樣式，點(diǎn)擊后在舞臺(tái)區(qū)進(jìn)行繪制：
繪制完畢后得到一個(gè)文本，在對(duì)象樹中點(diǎn)擊添加的文本組件，可在屬性面板中更改對(duì)應(yīng)的文本內(nèi)容：
更改完文本后即可在舞臺(tái)區(qū)中看到對(duì)應(yīng)更改的內(nèi)容：
此時(shí)咱們可以看到這個(gè)元素的屬性面板中有 xy 值，這個(gè) xy 值是以舞臺(tái)區(qū)左上角為原點(diǎn)，越往右 x 值越大，越往下 y 值越大，更改 xy 值可以更改此元素在界面中的位置：
4.2 賀卡制作
明白了基本的絕對(duì)定位內(nèi)容后，咱們通過圖片和文本繪制一個(gè)基本的賀卡界面，并在最后添加動(dòng)態(tài)效果讓其更加精美。
4.2.1 賀卡界面繪制
首先在對(duì)象樹中刪除之前添加的元素內(nèi)容，可以右鍵點(diǎn)擊刪除，也可以選擇組件后再 delete：
刪除完畢后，在組件面板中找到圖片，并且在舞臺(tái)區(qū)進(jìn)行繪制：
隨后在彈出的資源選擇器中選擇對(duì)應(yīng)的圖片進(jìn)行上傳即可：
此時(shí)圖片將會(huì)在舞臺(tái)區(qū)域中進(jìn)行顯示，并且可以拖動(dòng)小點(diǎn)更改大小，或者直接拖動(dòng)圖片更改位置：
更改圖片位置大小，并且拖動(dòng)到合適位置：
接著右鍵圖片可復(fù)制圖片：
再選擇頁面進(jìn)行黏貼：
選中其中一漲圖片，并且在對(duì)應(yīng)屬性中找到 y 軸旋轉(zhuǎn)，輸入 180 使其與 y 軸進(jìn)行水平翻轉(zhuǎn)：
此時(shí)將會(huì)得到一張完全翻轉(zhuǎn)的圖片：
最后再把這個(gè)圖片移動(dòng)至合適的位置即可：
接著添加一張門的圖片：
若你想這個(gè)圖片完全居中，那么可以在屬性中找到 x 軸原點(diǎn)，將其置于 50% 處；因?yàn)樵?ivx 中，圖片的左上角為起始點(diǎn)，需要將圖片的x原點(diǎn)置于中間，給予屏幕寬度大小的一半，即可完成居中：
接著更改 x 坐標(biāo)為屏幕的一半即可，屏幕寬度尺寸可以在對(duì)象樹之上進(jìn)行更改或查看：
接著把圖片 x 坐標(biāo)改成 375 的一半 187 即可使其圖片居中：
咱們接下來繼續(xù)添加其他圖片直到界面繪制成以下：
若你想將梅花放置于其他圖片之下，你只需要將圖片在對(duì)象樹中的位置至于那張圖片之下，這樣就可以是其他圖片覆蓋這張圖片。
接下來使用中文文本繪制出文本區(qū)域，使用中文文本的好處是可以使字體有中文文本樣式：
在文本中輸入新年快樂，并更改其顏色、字體、大小：
最后我們點(diǎn)擊預(yù)覽查看效果：
我們可以按F12更改當(dāng)前瀏覽器為手機(jī) Web 樣式：
此時(shí)我們發(fā)現(xiàn)頁面太死板并不是特別好看，我們點(diǎn)擊頂部云朵圖片，左側(cè)的組件欄將會(huì)發(fā)現(xiàn)更變，選擇出現(xiàn)的動(dòng)效組件可以添加動(dòng)態(tài)效果：
接著在動(dòng)效組件中咱們可以選擇某一個(gè)動(dòng)效類型，接著選擇預(yù)覽即可進(jìn)行查看效果，若覺得動(dòng)效時(shí)間太長(zhǎng)，可以增加動(dòng)畫時(shí)長(zhǎng)，此時(shí)動(dòng)畫播放就會(huì)變慢，最后打開循環(huán)播放即可：
隨后我們右鍵復(fù)制這個(gè)動(dòng)態(tài)效果，復(fù)制到其他圖片之中將會(huì)是頁面更加生動(dòng)：
隨后我們預(yù)覽發(fā)現(xiàn)，更改手機(jī)屏幕尺寸將會(huì)有部分內(nèi)容留白，因?yàn)槭謾C(jī)長(zhǎng)度不一樣：
此時(shí)我們只需要在頁面中添加一個(gè)橫幅組件，并且設(shè)置這個(gè)橫幅用于居于屏幕底部，再將需要居于屏幕底部的組件添加到橫幅之中即可：
此時(shí)可以看到，頁面之上有一個(gè)補(bǔ)丁，這個(gè)補(bǔ)丁就是橫幅的位置，在橫幅的屬性中選擇橫幅的位置為左下：
接下來把橫幅的背景色改為透明、長(zhǎng)寬改為0：
接下來將底部的元素在對(duì)象樹中拖拽至橫幅之中，此時(shí)發(fā)現(xiàn)狗和云朵都不在頁面之上，這是因?yàn)闄M幅之中是有自己的 xy 值，狗和云朵有之前的 xy 值，此時(shí)將會(huì)根據(jù)坐標(biāo)值顯示：
接下來只需要把元素拖拉上來即可，隨后更改頁面的背景色為紅色，點(diǎn)擊預(yù)覽即可完成：
總結(jié)
以上是生活随笔為你收集整理的【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【iVX 初级工程师培训教程 10篇文拿
- 下一篇： 【前端就业课 第一阶段】HTML5 零基