From cfc100bbdc53c24d2ca482a45e17b846d9584b08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E6=84=8F=E7=BF=94?= <1410167690@qq.com>
Date: Wed, 15 Jun 2022 13:06:25 +0000
Subject: [PATCH] update README.md.

---
 README.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 00e80aa..78a0b8f 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,80 @@
-# 在线 SVG 编辑器
+### SVG作图工具  
+
+<img src="%E6%88%AA%E5%9B%BE/%E7%95%8C%E9%9D%A2.png" alt="输入图片说明" style="zoom:50%;" />
+
+#### 添加的功能
+
+- 添加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)
+
 
-- 
Gitee