本文介紹錦鯉翻牌器列表組件的圖表樣式和各配置項的含義。
圖表樣式
錦鯉翻牌器列表用于模擬展示抽取多人獎項的組件。
配置面板
- 搜索配置:單擊配置面板右上角的搜索配置,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索資產配置。
- 圖表尺寸:包括組件的寬度和高度,單位為px。可單擊圖標鎖定組件的寬高比,等比例修改組件的寬高。再次單擊進行解鎖,解鎖后寬高比不受限制。
- 圖表位置:包括組件的橫坐標和縱坐標,單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離,縱坐標為組件左上角距離頁面上邊界的像素距離。
- 旋轉角度:以組件的中心為中心點,進行旋轉,單位為度(°)。
- 手動輸入角度值,控制組件的旋轉角度。
- 拖動圖標內的黑點,控制組件的旋轉角度。
- 單擊圖標,控制組件左右翻轉樣式。
- 單擊圖標,控制組件上下翻轉樣式。
- 不透明度:取值范圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。默認為1。
全局配置:錦鯉翻牌器列表全局布局配置樣式,包括水平和垂直布局數量和每一行之間的距離,單位px。
前綴:錦鯉翻牌器列表前綴的樣式。
參數
說明
寬度
翻牌器列表前綴的寬度值,單位px。
間距
翻牌器列表前綴跟左側以及右側內容之間的距離,單位px。
內容類型
翻牌器列表前綴的內容類型,可選文字或圖片。
文字內容
自定義前綴文字類型的具體內容。僅在內容類型選擇文字時可配置。
文字設置
自定義前綴文字的字體設置內容,包括字體的樣式、文字的粗細、文本的字號大小和文字的顏色。僅在內容類型選擇文字時可配置。
陰影
設置文字的陰影樣式,包括文字在水平和垂直方向的位移值,文字陰影的值和陰影的顏色。僅在內容類型選擇文字時可配置。
圖片
自定義圖片類型的圖片內容。如果您需要使用遠程服務器上的圖片,請在上方的輸入框中輸入圖片的URL地址;單擊圖片框內的預覽,即可預覽圖片的大圖樣式;單擊圖片輸入框下方的虛線框內的更改,更改圖片設計資產詳細功能請參見使用界面功能說明。僅在內容類型選擇圖片時可配置。
尺寸
設置圖片的寬度和高度值,單位px。
圓角
圖片的圓角大小,單位為px。數值為0的時候沒有圓角,圖片為方形,設置值越大,圖片圓角弧度值越大。
花名:錦鯉翻牌器列表組件花名部分內容的樣式。
參數
說明
寬度
翻牌器列表花名內容整體的寬度值,單位px。
間距
翻牌器列表花名跟左側以及右側內容之間的距離,單位px。
未開獎前文案
翻牌器列表花名在未開獎之前的文案內容。
文字設置
自定義花名文字的字體設置內容,包括字體樣式、文字粗細、字號和顏色。
陰影
設置花名文字的陰影樣式,包括文字在水平和垂直方向的位移值,文字陰影的值和陰影的顏色。
工號:錦鯉翻牌器列表組件工號部分內容的樣式。
參數
說明
位數
工號的數字位數的值。
允許滾動的數字
設置允許滾動的數字,每個數字以逗號相隔。單擊右側的或圖標,添加或刪除一個數字系列。 單擊或圖標配置多個數字系列的排列樣式。單擊圖標,即可復制當前選中數字系列配置內容并新增一個同樣配置的數字系列。
時間間隔
設置工號的最小和最大時間間隔值,單位ms。
文字設置
自定義工號文字的字體設置內容,包括字體樣式、文字粗細、字號和顏色。
后綴:錦鯉翻牌器列表組件后綴部分內容的樣式。
參數
說明
寬度
翻牌器列表后綴的寬度值,單位px。
間距
翻牌器列表后綴跟左側以及右側內容之間的距離,單位px。
內容類型
翻牌器列表后綴的內容類型,可選文字或圖片。
文字內容
自定義后綴文字類型的具體內容。僅在內容類型選擇文字時可配置。
文字設置
自定義后綴文字的字體設置內容,包括字體樣式、文字粗細、字號和顏色。僅在內容類型選擇文字時可配置。
陰影
設置文字的陰影樣式,包括文字在水平和垂直方向的位移值,文字陰影的值和陰影的顏色。僅在內容類型選擇文字時可配置。
圖片
自定義圖片類型的圖片內容。如果您需要使用遠程服務器上的圖片,請在上方的輸入框中輸入圖片的URL地址;單擊圖片框內的預覽,即可預覽圖片的大圖樣式;單擊圖片輸入框下方的虛線框內的更改,更改圖片設計資產詳細功能請參見使用界面功能說明。僅在內容類型選擇圖片時可配置。
尺寸
設置圖片的寬度和高度值,單位px。
圓角
圖片的圓角大小,單位為px。數值為0的時候沒有圓角,圖片為方形,設置值越大,圖片圓角弧度值越大。
數據面板
配置字段說明
字段 | 說明 |
| 人員的ID值。 |
| 人員名稱。 |
配置項 | 說明 |
受控模式 | 打開開關,資產初始化狀態下不請求數據,僅通過回調ID或藍圖編輯器配置的方法發起請求數據;關閉開關,可以使用自動更新請求數據。開關默認為關閉狀態。 |
自動更新請求 | 選中后可以設置動態輪詢,還可以手動輸入輪詢的時間頻次。取消選中后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和回調ID事件來觸發請求更新數據。 |
數據源 | 單擊配置數據源,可在設置數據源面板中修改數據源類型和數據查詢代碼、預覽數據源返回結果以及查看數據響應結果,詳情請參見配置資產數據。 |
數據過濾器 | 數據過濾器提供數據結構轉換、篩選和一些簡單的計算功能。單擊添加過濾器,可在設置數據源面板配置數據過濾器腳本,詳情請參見過濾器使用說明。 |
數據響應結果 | 展示數據請求的響應結果。當數據源發生改變時,可單擊右側的圖標,實時查看數據響應結果。 |
交互面板
該組件沒有交互事件。
藍圖編輯器交互配置
- 在畫布編輯器頁面,右鍵單擊組件,選擇導出到藍圖編輯器。
- 單擊頁面左上角的圖標。
在藍圖編輯器配置頁面,單擊導入節點欄內的錦鯉翻牌器列表組件,在畫布中可以看到如下圖所示的錦鯉翻牌器列表的藍圖編輯器配置參數。
事件
事件
說明
當接口描述請求完成時
數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
當接口描述請求失敗時
數據接口請求失敗時(請求失敗的情況可能是:網絡問題或接口報錯等)返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
動作
動作
說明
請求接口描述
重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如錦鯉翻牌器列表配置了API數據源為
https://api.test
,傳到請求接口描述動作的數據為{ id: '1'}
,則最終請求接口為https://api.test?id=1
。導入接口描述
按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
停止
停止某一位,動作傳入數據為object類型,參考數據示例如下。
return{ "index": 1 //位數索引號,從最高位開始,0為起始號。}
公布名單
公布名單,不需要參數。
開始翻滾
開始翻滾,不需要參數。
清除狀態
清除所有狀態,不需要參數。
更新組件配置
動態更新組件的樣式配置。需要先在組件的配置面板中,單擊復制配置到剪貼板,獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。
顯示
顯示組件,參考數據示例如下。
return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
隱藏
隱藏組件,參考數據示例如下。
return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
切換顯隱狀態
切換組件顯示或者隱藏,參考數據示例如下。
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
移動
將組件移動到指定位置
return { // 移動方式。絕對定位:to,相對定位:by。默認值:to。 "positionType": "to", // 指定位置。x坐標,y坐標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線??蛇x值為:linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } };