1. 程式人生 > >紅孩兒編輯器的模組設計(1)主顯示區域的滾動條的邏輯處理

紅孩兒編輯器的模組設計(1)主顯示區域的滾動條的邏輯處理

紅孩兒編輯器的模組設計(1)主顯示區域的滾動條的邏輯處理

第一個問題是判斷滾動條是否需要顯示的問題,
第二個問題是如何渲染滾動條的問題
第三個問題是通知渲染滾動條,或者是取消滾動條的顯示的時機問題
第四個問題是滾動條如何響應滑鼠的操作的問題

第一個問題
邏輯規則如下
如果當檔案的行數超過了一螢幕能夠顯示的最大的行數時,
需要在顯示區域的右側顯示出縱向的滾動條。
如果檔案的總行數改變成小於等於一螢幕能夠顯示的最大的行數時
需要在顯示區域的右側取消滾動條的顯示。

如果當前位於螢幕上的第一頁時,僅需要顯示向下的箭頭,
如果當前位於螢幕上的不是第一頁也不是最後一頁時,需要顯示向上和向下的箭頭
如果當前位於螢幕上的最後一頁時,僅需要顯示向上的箭頭。

在自動換行的設定下,不需要顯示橫向的滾動條。
在設定不是自動換行的情況下,
如果當前的顯示的頁內某行或者是某些行的字數超過了一頁可以顯示的最大的字數,
需要在顯示區域的底側顯示出橫向的滾動條。
如果當前的顯示的頁內的所有的行的字數都變成小於等於一頁可以顯示的最大的字數時,
需要取消顯示區域的底側顯示出的橫向的滾動條。

第二個問題
需要在主顯示區分劃出顯示滾動條的位置。呼叫設計好的滾動條與四個方向的箭頭的
點陣的圖示,進行渲染顯示。

第三個問題
是在重新整理編輯器的主顯示時,根據是否需要顯示滾動條的標記,來進行相反的渲染顯示。

如果檔案的第一列字顯示在螢幕中時,僅需要顯示向右的箭頭。
如果檔案的第一列字不在螢幕內,最長的行的最末尾的字沒有顯示在螢幕內時,
需要顯示向左和向右的箭頭。
如果檔案的第一列字不在螢幕內,最長的行的最末尾的字顯示在螢幕內時,
僅需要顯示向左的箭頭。

第四個問題,
根據滑鼠在html5的畫布中的點選事件中的響應函式中進行設計。
需要得到的引數有事件型別,是左鍵單擊,左鍵雙擊,右鍵點選。
還有橫縱座標值,根據座標值,判斷點選了哪個位置,即點選了哪個元件。
再呼叫相應的處理函式。

小結:
有人說,介面開發很容易,那是因為他把事件想得太簡單了,也許是因為框架之類的底層庫
做了太多的事,只把拖控制元件的傻瓜式的任務放出來了而矣。這是scratch軟體這樣的,給孩子
們的入門的玩具而矣。為了大型的系統的開發,我們應該有能力從底層出發,把相關的問題
都自己想清楚,只有把邏輯搞清楚了,寫程式碼才是輕鬆的,否則無論使用哪種計算機軟體程式語言
都開發不了大規模的程式。