本文為您介紹在DataV名單抽獎模板可視化應用中實現多個精彩交互效果的藍圖配置方法。

背景信息

名單抽獎模板在年會或團建抽獎場景時，需要包含多個交互功能：
  • 當名單抽獎模板預覽或發布時，將抽獎池組件中獲獎名單數據分發到某抽獎頁面的翻牌器組件中。
  • 當主持人喊“抽幾等獎”時，通過使用鍵盤1、2和3按鍵切換大屏對應到幾等獎頁面。
  • 當使用鍵盤1、2和3按鍵切換不同抽獎大屏頁面時，清空頁面對應翻牌器內獲獎名單數據狀態。
  • 當主持人喊“開始抽獎“時，通過使用鍵盤上的回車鍵，大屏開始滾動抽獎數據。
  • 當主持人喊“?！皶r，通過使用鍵盤上的Esc鍵，大屏停止滾動，并且顯示抽獎名單。
圖 1. 實現上述所有交互藍圖編輯器內連線示例圖
實現上述所有交互效果的連線整體樣式示例圖
說明 藍圖編輯器內各節點之間可以進行編組，有助于理解邏輯，更美觀清晰地展示連線效果。

步驟一：獲取中獎名單數據并分發到對應抽獎頁面的翻牌器中

在藍圖編輯器內，使用一個抽獎池組件節點、三個翻牌器組件節點和四個串行數據處理邏輯節點，實現大屏初次使用時即獲取中獎名單結果并分發到不同頁面內翻牌器組件的功能。

  1. 選中畫布編輯器中的抽獎池組件，右鍵選擇導出到藍圖編輯器。
  2. 將畫布編輯器內的一等獎翻牌器、二等獎翻牌器和三等獎翻牌器組件，分別選中后右鍵選擇導出到藍圖編輯器。
  3. 單擊畫布左上角的藍圖編輯器，切換到藍圖編輯器頁面。
  4. 將導入節點中的抽獎池組件節點、一等獎翻牌器、二等獎翻牌器和三等獎翻牌器組件節點添加到藍圖編輯器畫布中。
  5. 在藍圖編輯器畫布中添加一個串行數據處理，命名為抽出一二三等獎，并在該節點的處理方法中編寫一段用于抽取獲獎名單數據的js代碼，本案例的示例代碼如下所示。
    抽出一二三等獎
    const lotteryArr = (candidates, length) => {
  const res = Array(0);
  const len = candidates.length;

  for (var i = 0; i < length; i++) {
    const tmpArr = new Uint32Array(1);
    crypto.getRandomValues(tmpArr);

    const ind = tmpArr[0] % candidates.length;

    candidates[ind] && res.push({
      name: candidates[ind]['簽到人員顯示名'],
      id: candidates[ind]['簽到人員工號'],
    });

    candidates.splice(ind, 1);
  }

  return res;
};

const res = lotteryArr(data, 31);

return {
  three: res.slice(11, res.length),
  two: res.slice(1, 11),
  one: res.slice(0, 1),
};
    抽獎的算法思路，請參考下方代碼。
    • 簡單的抽獎算法。
      /**
 * 抽獎算法，給定 start、end, 給定一個范圍內的值
 * @example start: 0 end: 10, return 7
 * @param start {int}
 * @param end {int}
 * @return start - end 之間的一個值，包含 start、end
 */
const lottery = (start, end) {
  return Math.floor(Math.random() * (end - start + 1) ) + start;
}
    • 上面的算法是簡單的偽隨機代碼，推薦采用Crypto.getRandomValues()算法。
      /**
 * 抽獎算法，給定 start、end, 給定一個范圍內的值
 * @example start: 0 end: 10, return 7
 * @param start {int}
 * @param end {int}
 * @return start - end 之間的一個值，包含 start、end
 */
const lottery = (start, end) {
  var array = new Uint32Array(1);
  window.crypto.getRandomValues(array);
  return array[0] % (end - start + 1) + start;
}

      具體請參見Crypto.getRandomValues()算法詳細資料。

    • 您還可以選擇其他的算法服務，例如random.org
  6. 在藍圖編輯器畫布中再次添加三個串行數據處理邏輯節點，分別命名為一等獎數據、二等獎數據和三等獎數據。
  7. 將抽獎池節點內的當數據接口請求完成時與抽出一二三等獎邏輯節點左側相連。
  8. 將抽出一二三等獎邏輯節點右側分別與一等獎數據、二等獎數據和三等獎數據三個邏輯節點的左側相連。
  9. 將一等獎數據、二等獎數據和三等獎數據三個邏輯節點的右側分別與之對應的一等獎翻牌器、二等獎翻牌器和三等獎翻牌器三個節點的導入接口描述動作相連。
    抽獎邏輯連接
    通過編寫抽獎算法代碼對數據進行處理并將邏輯節點與組件節點連線后，可以實現將獲取的中獎名單數據分發至對應的某等獎翻牌器中的功能。
  10. （推薦）您還可以將抽獎池節點、抽出一二三等獎邏輯節點、一等獎數據、二等獎數據和三等獎數據三個邏輯節點一起選中后進行編組，且將編組命名為抽獎邏輯。
    抽獎池邏輯節點編組

步驟二：使用鍵盤1、2、3按鍵，切換并顯示不同的抽獎頁面

在藍圖編輯器內，使用鍵盤邏輯節點實現使用鍵盤上的多個按鍵切換到不同抽獎頁面的功能。

  1. 在名單抽獎模板的畫布編輯器中，將某等獎的頁面內的所有相關組件全部成組，并自定義設定成組后組件整體的顯隱樣式。
    下圖為將一等獎和二等獎的組設置成隱藏，三等獎組設成顯示的示例。抽獎頁面的顯隱控制
  2. 在畫布編輯器左側的圖層欄，分別單擊選中一等獎、二等獎和三等獎，右鍵將三個成組分別選擇導出到藍圖編輯器。
    分別導出到藍圖編輯器
  3. 單擊左上角的藍圖編輯器按鈕，切換到藍圖編輯器頁面。
  4. 在藍圖編輯器頁面內，單擊添加一個鍵盤邏輯節點。
    添加鍵盤邏輯節點
    鍵盤邏輯節點上有一些默認的事件錨點，包括以下幾個：
    • 當任意鍵按下時：指的是按下鍵盤任意鍵時，執行對應動作。
    • 當字符鍵按下時：指的是在一個輸入框內按下鍵盤的字符鍵輸入文字時，執行對應動作。
    • 當按鍵釋放時：指的是在放開某個按鍵時，執行對應動作。
    • 向上和向下：指的是一個自定義封裝好的便捷事件錨點，分別代表了按下鍵盤的向上鍵或向下鍵。您還可以自定義添加別的按鍵名稱，詳情請參見表 2。
  5. 選中鍵盤邏輯節點，在節點右側配置面板內自定義配置1、2和3這三個按鍵事件。
    配置123事件
  6. 將一等獎、二等獎和三等獎節點添加到藍圖編輯器畫布中。
  7. 分別將鍵盤邏輯節點中的1、2和3事件與一等獎、二等獎和三等獎節點中的多個動作按下圖所示連線。
    三個頁面顯隱控制連線
    實現當使用鍵盤上的按鍵1時，錨點連線到一等獎組的顯示動作，并且同時連線到二等獎和三等獎組的隱藏動作。

    使用同樣的方法，完成按鍵2和按鍵3的連線操作。

    最終通過使用按鍵1、2和3，實現互相切換顯示不同抽獎頁面的交互功能。

步驟三：使用鍵盤按鍵，清空對應抽獎頁面中翻牌器的數據狀態

在藍圖編輯器內，使用鍵盤邏輯節點實現使用鍵盤上的多個按鍵，清空對應抽獎頁面內獲獎名單數據狀態的功能。

  1. 進入名單抽獎模板可視化應用的藍圖編輯器頁面。
  2. 根據步驟二中第五步配置的鍵盤邏輯節點，將該鍵盤邏輯節點中的1、2和3事件分別與根據步驟一中第四步添加的一等獎翻牌器、二等獎翻牌器和三等獎翻牌器組件節點的清空狀態動作連線。
    清空狀態連線樣式
    實現在控制鍵盤切換抽獎頁面時，清空對應頁面內翻牌器獲獎名單數據的功能。

步驟四：使用鍵盤按鍵，控制抽獎頁面抽獎情況并顯示抽獎結果

在藍圖編輯器內，使用鍵盤邏輯節點實現使用Enter鍵和Esc鍵，控制抽獎頁面開始滾動抽獎和停止抽獎并顯示抽獎結果的功能。

  1. 在畫布編輯器左側的圖層欄，分別在一等獎、二等獎和三等獎的成組內，選中對應的翻牌器組件，右鍵將三個翻牌器組件分別選擇導出到藍圖編輯器。
    翻牌器導出到藍圖編輯器
  2. 單擊左上角的藍圖編輯器按鈕，切換到藍圖編輯器頁面。
  3. 在藍圖編輯器頁面內，再次單擊添加一個鍵盤邏輯節點。
  4. 參考步驟二中的自定義按鍵的方法，配置一個開始和停止按鍵事件。
    配置開始滾動按鍵事件
  5. 將一等獎翻牌器、二等獎翻牌器和三等獎翻牌器節點添加到藍圖編輯器畫布中。
  6. 分別將鍵盤邏輯節點中的開始和停止事件，與一等獎翻牌器、二等獎翻牌器和三等獎翻牌器節點中的多個動作按下圖所示連線。
    開始停止按鍵連線
    實現當按下Enter按鍵時，開始事件錨點連線分別與三個翻牌器的開始翻滾動作相連；當按下Esc按鍵時，停止事件錨點連線分別與三個翻牌器的停止和公布名單動作相連。

    最終通過使用按鍵Enter和Esc，實現控制抽獎頁面開始滾動抽獎和停止抽獎并顯示抽獎結果的功能。