Javascript图元绘制库 ternlight
本文导语: 基于HTML CANVAS API的Javascript库，提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种)，拖拽图元等能力。 该javascript library的实现借鉴了NetronLight的不少思路，相...
基于HTML CANVAS API的Javascript库，提供在HTML页面上绘制图元——如流程图的能力。
目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种)，拖拽图元等能力。
该javascript library的实现借鉴了NetronLight的不少思路，相应地将之命名为ternlight。
目前，支持的主要能力如下：
1. 内置支持连线（直角线和直线）;提供了RetangleShape图元；
2. 支持在图元之间进行连线;(从Shape的Connector上可拉出新的连线)
3. 支持label，可编辑/显示文本；label可作为Shape等的子元素（见demo中的MyShape示例）；
4. 支持图元在画布中的拖拽；
5. 支持从画布外拖拽新的shape到画布中（见demo中的示例?）；
6. 基本编辑支持：删除、增加图元(见5)以及undo、redo；
![Javascript图元绘制库 ternlight[图片]](/img/tech-article-img-javascript/img_1418563354_502641.png)
拖拽新的图元到画布中去：
![Javascript图元绘制库 ternlight[图片]](/img/tech-article-img-javascript/img_1418563354_685669.png)
ternlight的实现中，主要的类及其类之间的关系如下图所示：
![Javascript图元绘制库 ternlight[图片]](/img/tech-article-img-javascript/img_1418563354_318574.png)
email: fancimage@gmail.com
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。