近期在做项目网页版简易几何画板 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.

由于此链表是主要数据结构, 关于它的函数也需要仔细笔记下来.