网页动态SVG绘图

早些时候从事了很长时间的网页动态绘图工作(作图webApp，使用的技术是SVG)，今天在此做个总结。

 

主要使用的事件：onClick, onMouseMove, onKeyDown（涉及长按绘图的操作还需要onMouseDown，onMouseUp；涉及右键的加上onContextMenu）

 

流程:

1. initialize: 绑定事件到画板view,准备可能需要的数据

2. prepare:准备初始辅助图形（如准备一条line作为后续画线的辅助图形）

3. 用户操作（click/move/keyDown...）:在用户操作的过程中进行计算，实时更新辅助图形，以得到良好的用户体验，同时记录好绘图过程中产生的数据，如line的start、end，circle的center、radius等等

4. end: 用户进行结束操作后，移除辅助图形、移除绑定的事件，同时根据数据生成最终图形并同步数据到服务器（或者绘制完整张图再publish），至此绘图完成

 

除了简单的画线画圆画椭圆弧等等以外，对图形的move，copy，rotate，mirror，offset等等操作原理与上述大同小异，复杂的图形与简单图形的区别只在于数据的计算（实际绘图的难点在于复杂的数学计算及有逻辑的绘图，如电器设计方面 ）

 

欢迎关注、点赞