本篇內(nèi)容主要講解“可視化搭建平臺的網(wǎng)格線設(shè)計的方法步驟”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“可視化搭建平臺的網(wǎng)格線設(shè)計的方法步驟”吧!

創(chuàng)新互聯(lián)建站于2013年開始，先為德保等服務(wù)建站，德保等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為德保企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

H5-Dooring更新日志

• 添加畫布網(wǎng)格參考線以及快捷切換方式

• 添加文字跑馬燈組件

• 畫布操作控件支持拖拽

• Dooring使用視頻教程

• 多頁面鏈接自動關(guān)聯(lián)

實現(xiàn)可視化編輯器的網(wǎng)格參考線

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

這個功能無非需要實現(xiàn)兩個關(guān)鍵點:

• 繪制網(wǎng)格線

• 監(jiān)聽鍵盤事件顯示/隱藏網(wǎng)格線

繪制網(wǎng)格線

網(wǎng)格線的繪制有很多種方案, 比如背景圖片重復(fù), canvas繪制, css實現(xiàn), 這里筆者采用第三種方案.

用css實現(xiàn)筆者的思路是通過背景漸變來做, 原理如下:

我們知道css3支持多背景, 所以我們可以利用背景漸變繪制一個垂直的矩形和一個水平的矩形, 然后設(shè)置寬高讓他們重復(fù)繪制即可, 代碼如下:

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

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

監(jiān)聽鍵盤事件顯示/隱藏網(wǎng)格線

監(jiān)聽鍵盤事件這里筆者推薦一款比較好用的庫keymaster, 幾乎是任何強大的在線編輯器必備鍵盤快捷插件. 支持單鍵和組合鍵監(jiān)聽, 以及監(jiān)聽列表.  我們只需要定義ctrl + h和command + h, 并在監(jiān)聽函數(shù)內(nèi)部執(zhí)行邏輯操作即可, 如下:

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

到此，相信大家對“可視化搭建平臺的網(wǎng)格線設(shè)計的方法步驟”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

文章標題：可視化搭建平臺的網(wǎng)格線設(shè)計的方法步驟
標題來源：http://jinyejixie.com/article36/gpgosg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、外貿(mào)建站、電子商務(wù)、商城網(wǎng)站、做網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)