填入圖片
1、拖拽部件庫(kù)中的image到頁(yè)面編輯框,填入圖片時(shí)虹统,顯示“自動(dòng)調(diào)整選框”
是:保持原圖片大小
否:將圖片變形為圖片框大小
為了方便顯示,將圖片位置設(shè)置為x:300?y:100
2隧甚、在填入某些圖片的時(shí)候车荔,圖片太大太高清,顯示警告框如下戚扳,選擇“是”即可
快捷鍵
1忧便、ctr+鼠標(biāo)滾輪放大縮小
2、Space+鼠標(biāo)左鍵手型
3帽借、shift+變形箭頭<->等比例縮放
4珠增、ctr+shift+拖拽復(fù)制粘貼
幾何圖形
1、控制圓角
·拖拽小三角形左右滑動(dòng)改變圓角大小宜雀。
2切平、改變幾何圖形
打組:相對(duì)位置保持不變的做好的部件可以先打組。(左邊組合辐董,右邊取消組合)
要選擇組合中的部件不必取消組合悴品,先擊部件組合,再點(diǎn)擊要目標(biāo)部件即可
左對(duì)齊、水平居中苔严、右對(duì)齊定枷、頂端對(duì)齊、垂直居中届氢、底端對(duì)齊
注意:先選中參考部件欠窒,再選中對(duì)齊部件。
例如:要保持背景圖像不動(dòng)退子,小圖標(biāo)在背景圖像中水平居中顯示
先選中背景圖像岖妄,再選中小圖標(biāo),然后再點(diǎn)擊水平居中寂祥。
置于頂層荐虐,置于底層,上移一層丸凭,下移一層
注意:后面置于頂層的要比前面的更高一層
動(dòng)態(tài)面板中置于頂層只能動(dòng)態(tài)面板中的頂部福扬。
交互
一、動(dòng)態(tài)面板交互
1惜犀、交互目標(biāo)頁(yè)面和目標(biāo)動(dòng)態(tài)面板必須命名便于區(qū)別铛碑,點(diǎn)擊部件管理中的漏斗符號(hào)
?2、點(diǎn)擊部件交互和注釋中的交互事件虽界,編輯交互效果汽烦。
先選擇交互動(dòng)作,再配置動(dòng)作浓恳。
3刹缝、動(dòng)態(tài)面板
a、記得右擊兩下部件管理中的動(dòng)態(tài)面板及state1更改名字颈将,單擊State1微信主界面進(jìn)入動(dòng)態(tài)面板編輯梢夯。
動(dòng)態(tài)面板:相當(dāng)于一個(gè)什么也沒(méi)有的線(xiàn)框容器
動(dòng)態(tài)面板可以有很多種狀態(tài)State,通過(guò)部件交互來(lái)切換狀態(tài)
b晴圾、進(jìn)入動(dòng)態(tài)面板:雙擊狀態(tài)
隱藏動(dòng)態(tài)面板:?jiǎn)螕魟?dòng)態(tài)面板旁邊的按鈕
c颂砸、新增狀態(tài)
新增和復(fù)制
d、可選中部分控件死姚,將它轉(zhuǎn)化為動(dòng)態(tài)面板人乓,并且可以修改動(dòng)態(tài)面板的大小
4、熱區(qū)hot?spot
熱區(qū)框選范圍都毒,將范圍內(nèi)部件組合成為共有一個(gè)交互的部件
5色罚、部件簡(jiǎn)單交互:右擊部件->交互樣式
二、交互動(dòng)作詳解
案例一:沿y軸拖動(dòng)動(dòng)態(tài)面板
1账劲、選中動(dòng)態(tài)面板的交互:拖動(dòng)動(dòng)態(tài)面板時(shí)
選擇動(dòng)作為:移動(dòng)
選擇目標(biāo)動(dòng)態(tài)面板:微信內(nèi)容面板
配置移動(dòng)動(dòng)作:y軸移動(dòng)
2戳护、設(shè)置彈回金抡。
? ? ?利用rectangle建立頂端參考線(xiàn)(位于面板最頂部)和底端參考線(xiàn)(底部)。
選中觸發(fā)動(dòng)態(tài)面板:結(jié)束拖放動(dòng)態(tài)面板時(shí)
新增條件:選擇部件范圍-頂部參考線(xiàn)
選擇交互動(dòng)作:部件-移動(dòng)
選擇目標(biāo)動(dòng)態(tài)面板:微信內(nèi)容面板
配置移動(dòng)動(dòng)作:移動(dòng)到絕對(duì)位置(動(dòng)態(tài)面板的初始位置)
3腌且、設(shè)置ELSE?IF-IF
類(lèi)似2梗肝,雙擊結(jié)束拖動(dòng)動(dòng)態(tài)面板時(shí)建立用例2,設(shè)置當(dāng)動(dòng)態(tài)面板觸發(fā)到底部參考線(xiàn)時(shí)的交互效果铺董。
最后巫击,注意,建立完用例2后精续,右擊用例2坝锰,將ELSE?IF切換為IF
4、動(dòng)作也可以復(fù)制粘貼
直接右擊用例中的動(dòng)作-復(fù)制重付,然后粘貼到其他用例中什黑,不要復(fù)制用例。
5堪夭、母版:常常用到的部件組合模塊可以轉(zhuǎn)化為母版(右擊,轉(zhuǎn)換為母版)
要用的時(shí)候拣凹,直接從母版管理框中拖拽到頁(yè)面森爽,然后從母版中脫離即可
6、分割圖像:右擊嚣镜,分割圖像爬迟,刀子一下,選中不要的區(qū)域菊匿,delete