如何实现在页面上动态画直线？

[qychjj]

页面上有多条直线，直线两端点坐标从数据库中读出，数据库不断地更新。
某对端点之间的连线可能会被删掉，即连线是动态的。

[qychjj]

按照rainsilence的代码，可以得到一个矩形的图。

我的实现目标是，显示网络的拓扑，而且该拓扑是变化的：即节点可以移动，节点之间的连线也是变化的：即这次有，下一次不一定有。

更新的拓扑结构是保存在数据库中的，要使用页面将其显示出来。

[杨哥儿]

学习下flash的as编程，如果麻烦。你就用jsp或asp.net在后台绘图，客户端更新显示。
不需要ajax.

[杨哥儿]

http://js.alixixi.com/a/2016407763449.shtml

[杨哥儿]

http://wrong1111.javaeye.com/blog/475350

[liuzuowei007]

JS+VML
我们以前实现过 可以动态画线

[rainsilence]

[Quote=引用 22 楼 qychjj 的回复:]

rainsilence，

擦除时，如果一下子擦除canvas上的所有东东，怎样处理呢？
[/Quote]
。。。。。。。
clearRect(canvas.width, canvas.height);具体是高在前面还是宽在前面忘记了。

[rainsilence]

[Quote=引用 25 楼 uself 的回复:]

http://wrong1111.javaeye.com/blog/475350
[/Quote]
为什么你给的例子还是canvas?

[qychjj]

rainsilence，

擦除时，如果一下子擦除canvas上的所有东东，怎样处理呢？

[qychjj]

用canvas实现后，还是卡，但比jsgraphic好些。

[qychjj]

liuzuowei007。

用js+vml实现后，卡不卡呢？

[rainsilence]

你用的excanvas就是用vml实现的。而且，那东西是google写的。已经是最高效率了。
再者，html5：canvas的效率已经是很高的了。至少我写动画写到现在还没遇到特别卡的情况。如果出现，只能说明你还没有用好

[qychjj]

我的目的是显示一个无线网络的拓扑结构：
该网络有如下特点：
（1）节点可以移动；
（2）由于节点移动，节点直接的连接有时可能断掉。

实现：
（1）节点的位置坐标和节点之间是否有连线放在数据库中；
（2）使用excanvas来画图；
（3）设置timerout不断去读数据库，根据读出的数据来绘制该网络结构；
（4）在绘制之前，清除所有已经画好的图，然后重新绘制；

需求是这样！看起来不难，但我这里实现就不太理想。估计如rainsilence所说，canvas没有使用好。

[rainsilence]

你这个需求，卡与不卡不在于前台，而在于后台的优化。用setTimeout去读数据库，不卡才叫奇怪。。。

我想了解
1.节点是用户操作导致移动，还是随时更新数据库？
2.业务层面上有那么频繁的节点移动吗？

[qychjj]

（1）节点移动。用户操作导致节点移动，坐标变了。坐标会记录在数据库中。
（2）节点之间是否有连线，是从数据库中读取的。某2个节点之间，有时候会有连线，而有时候会没有连线。

（3）如果不用settimeout去读数据库，那有什么别的办法吗？请指点！！

[rainsilence]

页面初始化，把连线信息读在浏览器内存里(客户端)
然后节点移动用canvas模拟拖拽。
最后，增加一个按钮，Save。当用户拖完了，要点Save才能保存。

这样只需要读一次，写一次。

[rainsilence]

如果Save的时候节点间连线变了，报出提示信息。并更新页面

[qychjj]

报出提示信息， 这个是不可以的。不能人操作去干预，要自动完成。

因为某2个节点之间的连线有或无，是频繁发生的。

[rainsilence]

那你那么频繁的改客户端图像。会不会给客户很突然的感觉

[rainsilence]

这样吧。。
1.将节点信息在服务器内存中留个缓存。然后用memcached+Consistent Hashing。这样可以保证特殊意外情况下数据丢失(去掉读写数据库的部分，整个系统的性能将会有明显的提高)
2.放弃使用ajax为主的拉，而改用基于EventSource的服务器推。EventSource的服务器端直接用tomcat+servlet就能实现了。（客户端一定要用ie?用chrome可行？）

[qychjj]

这个客户端图像的更新，是客户的需求啊。可以试一下 ，事件驱动和服务器缓存的方式来实现。
感谢rainsilence的指点啊。