在图片上绘画，以后可以撤销；SVG绘图；SVG缩放；

项目要求：类似在图片上绘制线条，但是线条还能被删除的效果，用Web实现。

分析：肯定不是直接绘制在图片上的，因为一旦绘制在图片关闭再打开就擦不掉了。

实现方式：页面放一个image，在image上方再重叠一个svg； 使用svg来绘图。

SVG和Canvas的区别：SVG是矢量图，Canvas是基于像素的。
因为：客户在A电脑上绘制了图像，希望在B电脑上不失真，所以使用SVG来绘制。

SVG支持几种常见图形：直线，矩形，圆形，非闭合曲线（polyline），闭合曲线（polylon）

在程序里使用polyline绘制像画笔一样流畅的任意线条。

SVG的子元素可以是g， 该元素表示分组，对于现实没有任何影响。下面使用g标签做选中后的矩形框。

绘制的线条使用polyline，有个id属性； 当点击polyline时为该线条添加选中的矩形框和8个小矩形，小矩形和8个框都放在g标签中； g标签的id_ref指向 polyline的id属性。

选中状态：data-selected如果为true，表示被选中。如果被选中，就可以按del键删除。
当点击polyline的任何位置时，它的data-selected=true；同时它的g分组的data-selected属性也为true； 所以，删除时，连同分组一起删除。

没有找到好的办法，选中时的矩形框和8个小矩形是我绘制的；也许，有内置简单方法。

解决：当保存svg文件时的svg窗口大小和实际运行程序时的大小不一样，导致图像位置错误的问题。

即：重新调用窗体改变事件。

下面是重点

1.当线条被添加到界面时，添加data-drawing-line-width，表示：当添加该线条时svg面板的宽度
2.当调整窗体时，svg面板的宽度又是多少
3.在调整前后宽度变成了之前的百分之N； 那么里面的每个点的坐标的X轴都要变成之前的百分之N；
4.高度的关系和宽度一样。

在绘制pilyline时有个point属性，表示涉及到的所有的点。 所以在每次绘制时，我在data-points中也保存了一份； 适用于窗体缩放时解决SVG缩放的问题。