刚才在首页看到这么个帖子
图形间连线算法 ，说来也巧，最近自己也在做这么个玩意儿，就是在web上拖放图标，然后连线，这段时间也算有点收获，实现了这么个玩意儿，发上来给大家看看，顺便征求点意见。附件是效果图和源码示例。
特点：
1、基于Prototype、Script.aculo.us，利用HTML5的标签Canvas实现，因为ie目前不支持这个，所以引入了google的excanvas库适配到VML，但是对于开发人员来说，api都是同一的一套，比较爽；
2、节点可动态生成、可拖放，并显示了拖放行为，比如不会拖出画板，也不会重叠在一起（这样对以后连线开了方便之门）；
3、绘制连线的时候，可根据鼠标移动，实时反映线段状态，拖动节点也能试试反映连线状态；
4、节点、连线都可响应鼠标点击选中事件，并可响应键盘delete键删除选中的元素（线段或节点）；
5、源码结构实现了OO封装以及经典的MVC模式，大大降低各部分耦合度。
绘图步骤：
1、您可以在右侧拖放一个项目到左侧的画板生成一个新方块（这个以后可以用漂亮的图标代替），在初始化的时候我已经加入了三个；
2、点击画板上方的“单向连线”按钮之后，即可点击起始节点，然后移动鼠标至结束节点再点击一下，即可在这两个节点间绘制有向线段。每次只能画一条线，画完了需要再次点击按钮重复绘制；
3、节点可拖动，但是不会被拖出画板，如果两个节点重叠了，那么不会允许放置在最终位置，而是弹回原始位置；
4、点击节点可选中当前节点，要选择线段的话必须点击中部的箭头处，被选中的元素以红色区分，此时可通过敲击键盘delete键删除此元素，而且，如果删除的是有连线的节点，此节点相关的连线都将被删除。
结语：这只是个原型，还有待完善，最大的问题还是对于OP9，连线中点的箭头显示还有问题，慢慢来吧，先放出来给大家看看，欢迎交流。如果大家有非直线连接图形的好算法，希望能提供出来，非常感谢！
顺便广告一下，昨天在je也发布了一个基于Canvas的仿Google动画导航条实现，可惜关注的人不多，我觉得canvas是个好玩的东西，希望大家能关注下，有兴趣的可以移驾这里看看：
基于Prototype和Canvas实现的仿Google导航条
- 描述: 操作截图，其中一条线正在绘制之中
- 大小: 6.4 KB
分享到：
相关推荐
6. 在RainDrop原型中实现update和draw方法：计算雨滴的新位置，并在Canvas上绘制。 ```javascript RainDrop.prototype.update = function() { this.y += this.speed; this.x += Math.sin(this.angle) * this.speed...
以上只是JavaScript知识体系的一部分，深入学习还包括错误处理、正则表达式、JSON、Web存储（localStorage、sessionStorage）、WebSocket、Web Workers、Service Worker、Canvas绘图、WebGL图形渲染等。JavaScript的...
1. **面向对象**：JavaScript支持基于原型的面向对象编程，可以通过构造函数和对象字面量两种方式创建对象。例如： ```javascript // 构造函数法 function Person(name) { this.name = name; } Person....
在JavaScript中，我们可以使用构造函数和原型链来实现对象的继承和复用。 子弹的发射与碰撞检测是游戏的关键部分。子弹通常具有发射方向和速度，它们的位置会随着时间而改变。通过比较子弹和鸟的位置，我们可以使用...
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级编程语言。它主要负责网页的动态交互，赋予静态HTML页面活力，让用户体验更加丰富和个性化。JS101_GD可能是某个JavaScript学习资源或项目的代号，其中“GD”...
12. **WebAPIs**：WebSocket实现实时通信、Web Storage（localStorage和sessionStorage）存储数据、Canvas进行绘图、Web Workers进行多线程处理。 13. **TypeScript**：JavaScript的超集，提供静态类型检查，提升...
在JavaScript中，虽然它原生不支持类的概念，但通过原型链（prototype chain）机制可以实现类的模拟。ES6引入了`class`语法糖，使得JavaScript的类继承更加直观。例如，你可以定义一个基类`Bird`，然后创建一个`...
在JavaScript中，虽然它原生并不支持类语法，但可以通过原型链（prototype chain）来实现继承。ES6引入了`class`关键字，使得类的概念更加直观。例如，在`AngryBirdsStage2.5`中，可能有一个基础的`Bird`类，其他...
同时，`canvas`提供了丰富的绘图API，如`drawImage()`，用于在画布上绘制图片，以及`context.drawImage()`，可以对图像进行剪裁、缩放等操作，以满足游戏中的各种需求。 在这个阶段，我们还会学习如何使用git进行...