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标签进行构建，实现的是 贝塞尔曲线。

 

 

评论

5 楼 rongmiao 2012-03-13  

楼主，可以学习一下你的思路吗？直觉告诉我这个东西做的还不错。
能抽空发一份代码到我邮箱吗，不甚感激。

我的邮箱是:[e-mail]
谢谢.

4 楼 arpenker 2009-12-21  

楼主,可以发我一份吗?我太喜欢这个思维导图了.

   我的邮箱是:[e-mail]
   谢谢.

3 楼 民工精髓 2009-12-21  

VMLComponent这几个不宜再封装，因为本身已经不复杂了，每个东西只要设置一些属性就可以，过度封装反而臃肿。一般图形库的封装都是为了兼容浏览器实现的细节，很少会有针对特定绘图技术（VML，SVG这些）来封装的

2 楼 szcjlssx 2009-12-19  

没看代码,不好评论

1 楼 oleiowang 2009-12-17  

大家提点建议吧，做这个其实是想自己封装下UI控件，做到属性可配置，事件可插入,控件可重用，并保持控件的扩展性