diff --git a/README.md b/README.md index 00e80aa6d22a7fce0349bc9796e03c40c9a48865..78a0b8fff16631405f1e6e7bf6e187e1b6458d18 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,80 @@ -# 在线 SVG 编辑器 +### SVG作图工具 + +输入图片说明 + +#### 添加的功能 + +- 添加Diamond、Arrow和FiveStar SVG对象种类 + +- 组合面板(将选定的多个图形组合成一组) + +#### 具体实现 + +- Diamond + + 1. Diamond 类 + + ​ 构造函数:根据初始化输入的参数(中心左边、图形宽高)利用SVG的polygon标签产生菱形。 + + ​ action:根据当前鼠标的坐标判断在Diamond图像的哪里输出变化类型(移动、左拉伸、右拉伸、上拉伸、下拉伸、无)。 + + ​ drag:根据输入的变化类型、鼠标变化参数设置Diamond的中心坐标、图形宽高。 + + 2. AddDiamondController类 + + ​ 构造函数:在控制面板产生一个Diamond对象作为选择图标。 + + ​ click:在鼠标点击处产生一个默认参数的Diamond对象。 + + + +- Arrow + + 1. Arrow类 + + ​ 构造函数:根据初始化输入的参数(中心左边、图形宽高)利用SVG的polygon标签产生菱形。 + + ​ action:根据当前鼠标的坐标判断在Arrow图像的哪里输出变化类型(移动、左拉伸、右拉伸、上拉伸、下拉伸、无)。 + + ​ drag:根据输入的变化类型、鼠标变化参数设置Arrow的中心坐标、图形宽高。 + + 2. AddArrowController类 + + ​ 构造函数:在控制面板产生一个Arrow对象作为选择图标。 + + ​ click:在鼠标点击处产生一个默认参数的Arrow对象。 + +- FiveStar + + 1. FiveStar类 + + ​ 构造函数:根据初始化输入的参数(中心左边、图形宽高)利用SVG的polygon标签产生五角星。 + + ​ action:根据当前鼠标的坐标判断在satr图像的哪里输出变化类型(移动、向左拉伸、向右拉伸、向上拉伸、向下拉伸、旋转、无)。 + + ​ drag:根据输入的变化类型、鼠标变化参数设置Arrow的中心坐标、图形宽高。 + + 2. AddFiveStarController类 + + ​ 构造函数:在控制面板产生一个FiveStar对象作为选择图标。 + + ​ click:在鼠标点击处产生一个默认参数的FiveStar对象。 + + +​ + +- 设置面板 + + 1. 添加了一个新的控制器类:CombinationController。 + + 当选择此控制器后,点击图形会将该图形设置为选中状态(边框变为红色),点击空白地方,取消所有选中的图形。 + + 2. 增加组合按钮,点击后触发函数(将选中的图形组合成一组),可以整体拖动整组的形状。 + + + +#### 效果展示 + +![输入图片说明](%E6%88%AA%E5%9B%BE/%E6%BC%94%E7%A4%BA.gif) +