H5-Dooring視覺化搭建平臺的新技能

最近一工作一直很忙, H5-Dooring也在持續更新迭代中, 接下來筆者將帶大家介紹一下H5-Dooring的新功能, 並介紹網格參考線的實現方案, 內容很短, 實現方案也很簡單, 歡迎大家提出更好的方案和實現思路.

H5-Dooring更新日誌

• 新增畫布網格參考線以及快捷切換方式
• 新增文字跑馬燈元件
• 畫布操作控制元件支援拖拽
• Dooring使用影片教程
• 多頁面連結自動關聯

實現視覺化編輯器的網格參考線

之所以設計網格參考線, 是為了讓H5製作者更精準的控制元件位置和大小, 作為設計輔助. 我們可以使用鍵盤快捷鍵ctrl + h(window系統)或者comand + h來顯示或者隱藏參考網格, 類似於PS軟體. 我們來看看細節:

這個功能無非需要實現兩個關鍵點:

繪製網格線
監聽鍵盤事件顯示/隱藏網格線
繪製網格線

網格線的繪製有很多種方案, 比如背景圖片重複, canvas繪製, css實現, 這裡筆者採用第三種方案.

用css實現筆者的思路是透過背景漸變來做, 原理如下:

我們知道css3支援多背景, 所以我們可以利用背景漸變繪製一個垂直的矩形和一個水平的矩形, 然後設定寬高讓他們重複繪製即可, 程式碼如下:

{ 
  backgroundImage:  
    linear-gradient(90deg, #ccc 5%,transparent 0), 
    linear-gradient(#ccc 5%, transparent 0); 
  backgroundSize: 15px 15px; 
  backgroundRepeat: repeat 
}

有關css3更深入的知識可以參考我的文章, 這裡筆者就不詳細介紹了. 我們最終效果如下:

監聽鍵盤事件顯示/隱藏網格線

監聽鍵盤事件這裡筆者推薦一款比較好用的庫keymaster, 幾乎是任何強大的線上編輯器必備鍵盤快捷外掛. 支援單鍵和組合鍵監聽, 以及監聽列表. 我們只需要定義ctrl + h和command + h, 並在監聽函式內部執行邏輯操作即可, 如下:

// dva modal 
showGrid(state) { 
  overSave('showGrid', !state.showGrid) 
  return {  
    ...state,  
    showGrid: !state.showGrid 
  } 
}, 
// 顯示參考線 
key('⌘+h, ctrl+h', () => { 
  dispatch({ 
    type: 'editorModal/showGrid' 
  }); 
})