網頁版幾何畫板開發筆記(一)

近期在作項目網頁版簡易幾何畫板 geo.js. 時間一長, 加上年紀大了, 就容易忘記, 因此這裏寫下來些筆記.

實現了一個全局變量$G (window.$G), 將其它(大部分的)類和量都放在該名字空間下面,
這麼作的目的是減小對全局名字空間的佔用, 減小名字衝突的可能性.

對於畫板, 實現爲類 GeoPad(全名爲 $G.GeoPad). 在一個網頁中, 能夠同時顯示多個畫板,
每一個畫板建立一個GeoPad的實例. 這是爲了支持在同一個網頁顯示多個幾何圖形的需求.

每個畫板對象GeoPad對應網頁上的一個幾何圖形顯示區域, 這個顯示區域通常是DIV裏面
容納着canvas元素. 當前IE9以上,firefox,chrome,safari等瀏覽器都支持HTML5 的canvas
元素, 我也試驗過, 這些瀏覽器是能夠運行這個網頁畫板.

在網頁上使用GeoPad的方法, 設計爲經過js, 先建立GeoPad 的新實例, 然後綁定(bind)到
一個HTML元素(如DIV) 上, 而後加載圖形文件(文本)給該GeoPad. 建立過程也能夠根據
狀況細微調整, 整體上關鍵是綁定,加載環節. 見函數 GeoPad.create_pad(), 至關於一個
靜態函數(public static).

函數 bind_canvas(), 全寫爲 $G.GeoPad.prototype.bind_canvas(), 用於將指定 HTML5
canvas 元素綁定到 this GeoPad 實例上. 綁定使得圖形顯示在該canvas, 該canvas 的鼠標
等事件也發送到此 GeoPad 中進行處理. 因爲要支持一個網頁多個GeoPad, 這一綁定是必不
可少的.

當前綁定的事件有: mouse_down, mouse_move, mouse_up, key_down. 根據須要, 可能
會綁定更多事件.

畫板中顯示的對象統稱爲幾何對象(Geo Object), 主要的幾種爲點,線,圓,多邊形, 還有以此
方式實現的其它對象, 如標記, 文本, 按鈕等. 當前幾何對象框架須要仔細考察, 以支持多樣
的,變化着的需求.

幾何對象統一使用基類 ObjBase, 這個稍後看.

幾何對象在GeoPad 中主體使用雙向鏈表存放, 與鏈表相關的數據以下:
   在對象中, 存放在 ObjBase 中的屬性有: prev_obj, next_obj 分別表示鏈表中前一個對象,
後一個對象; boolean 的 __in_pad 屬性用於跟蹤是否已經插入到鏈表中, 用於避免重複插入;
pad 屬性表示其所屬的實際 GeoPad.
  在 GeoPad 類中, 實現鏈表的是 head_obj, tail_obj 屬性, 分別表示鏈表中第一個對象,
最後一個對象. 若是尚未任何對象, 則它們的值爲 null.

因爲此鏈表是主要數據結構, 關於它的函數也須要仔細筆記下來.