JS版简易思维导图CrazyMind version0.1

 

 

 

JS做的思维导图，目前实现了图形的连接 ，支持移动，缩放 。

 

 还没能够实现 树状的发散结构,线条任意挂接功能 。

 

 在topic中添加了相应的子项，对于比较简单的topic直接写到相应的子节点下面，就不必非得进行发散了。

 

 也是由于不想做的太复杂，所以对发散的节点设置成了固定的六个 。

 

 做这个主要是想用面向对象的思想进行UI的架构，目前实现的类包括:

 

 基类: 1. VmlComponent  所有 基于vml的图形元素都继承自此类。

 

         2. Box                    指外面附带Group结构的图形元素，附带Group,借助于 coordsize 属性，可以很容易的实现整体缩放的功能。  内置的Group 是一个Rect实例，Group内部的元素也是一个Element实例。

 

         3. Rect   (Extends VmlComponent)        指矩形的VML元素，但是不仅局限于矩形,椭圆也是可以进行构建的，可以传递要构建的vml元素的类型，例如v:rect , v:oval ,v:roundrect 这类vml默认支持的图形。

      

         4.Shape (Extends Rect)                 指的是通过vml的 shape path进行定位的多边形。如上图所示的有添加，删除，与确认按钮，内部又一个列表。

 

         5. Line    (Extends Rect)         使用vml:line 标签进行构建。 之所以让line继承自Rect，是想让line的内部也能够添加和删除列表文字，目前默认不对line进行构建列表。

 

         6. Curve (Extends Line)        即使用 v:curve标签进行构建，实现的是 贝塞尔曲线。