项目实训6：前端具体逻辑的思考与内容的详细定义

首先介绍一下前端的架构。
上侧，左侧，右侧均为封装的组件

0.!所有传递的有关鼠标的参数(x,y)均为当前鼠标与画布的相对位置（仅为对于在浏览器中的画布而不是画布中的详细位置）。

1.图形的创建

对于创建图形的途径，我们希望提供3种创建图形的方式
1）.通过上测栏的加号图形,在画布的中央进行创建
2）.通过右侧栏点击图形，在画布的中央进行创建
3）.将点击图形并进行移动，在鼠标进入画布的同时，图形在鼠标当前位置进行创建。
创建图形的函数
createShape(int shape_id,double x,double y):在画布的(x,y)位置进行图形创建，shape_id为创建图形的编号。
所有创建图形的方式均以调用该函数的方式与后端交互。
createShape返回值：svg的字符串

2.围绕画布的操作

mousedown(double x,double y):鼠标在画布的x,y位置进行按下。
mousemove(double x,double y):鼠标当前移动到画布的x,y位置。
上面所有方法接收当前画布的svg字符串。