注：源码已放在github上，地址为:https://github.com/Wellla/canvas.git,需要使用的同学自行下载(自己比较懒,没有做mesh)
前言：Canvas，没错，这个名字和大明鼎鼎html5的canvas同名,因为再也没什么名有这么形象，组件也是在raphael的基础上进行了“面向对象”的封装，这个组件是我来公司第一个月写出来的，不过因为当时写出来了交由前端同事维护，也一直没时间去管，今天有时间才把一直没完成的平面三角坐标系模型和外部连线算法弄完，打算分享给大家，一是本着开源精神，大家一起学习进步，二是使用文字写出自己在整个组件中关于“面向对象、面向抽象”思想的使用，能把自己的想法完完整整表达出来对自己也是一种进步嘛！不妥之处，望大家指出;
废话不多说，先介绍一下这个组件的主要功能，可绘制拓扑图、流程图、关系图等，下面附上效果图：
接着，介绍几个组件的构成：
Canvas：画布管理对象
Container：容器(核心封装)
Line：连线
Tiny：缩略图插件
Edit：编辑器插件
Util:三角坐标系模型的算法atan、直线连线算法link、可旋转箭头arrow、折线pathZ、贝塞尔曲线pathS
Canvas:为整个画布上元素的管理者、向外部提供创建容器、连线、序列化、反序列化、创建备忘、删除元素等方法，并作为全局对象拥有画布上上所有元素的访问控制权限
Container:是基于“组”的概念的封装、组可以包含文字、图片、矢量图、连线对象等，组中元素以相对位置存放在组中，同时“组”是一个抽象对象,是一个理论上的区域限制、包含处理器handler、边界bbox等抽象属性,因此，组也可一作为组的一个子对象.组向外部提供添加元素、删除、序列化、拖拽等对“组”的操作方法
Line:连线是Container组件关系的维系者、每条连线对象上拥有线两端的对象、并提供删除、序列化、拖拽、动画等方法，线条类型可从Util中获取
Tiny:使用插件的方式和canvas分离、通过视口的变化进行对canvas的投射和控制
Edit:使用插件方式集成到画布中，一个编辑器对应一个编辑规则，可使用多种编辑器在画布中切换，主要用于对container的编辑、因使用插件方式，编辑器是依附在container上，所以极大节省了内存开销
Util：算法工具类、主要包含构建网页三角直角坐标系、连线算法、旋转算法、线条算法
还存在的问题：组元素的使用,向外部提供方法而回收属性访问权的更抽象的抽象。。。
原文：http://www.cnblogs.com/wellla/p/4189186.html