早些时候从事了很长时间的网页动态绘图工作(作图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等等操作原理与上述大同小异，复杂的图形与简单图形的区别只在于数据的计算（实际绘图的难点在于复杂的数学计算及有逻辑的绘图，如电器设计方面 ）
扫描二维码关注公众号，回复：
2141342 查看本文章
