一、需要实现的基本功能，参考易画门窗
绘图工具
绘图工具
画板、画布展示
| 工具 | 包含 | 形状 | 属性 |
|---|---|---|---|
| 框 | 边框、门槛 | 方形、圆形、多边形、自定义 | 长、宽、边角、颜色、纹理，包括其他隐藏属性 |
| 挺 | 横、竖、拼樘构件、转角构件 | 方形、弧形 | 长、宽、边角、颜色、纹理，包括其他隐藏属 |
| 扇 | 平开、推拉 | 由容器决定 | 长、宽或弧边弧度长度，包括其他隐藏属 |
| 玻璃 | 有压线、无压线 | 由容器决定 | 长、宽或弧边弧度长度，包括其他隐藏属 |
| 其他工具 | - | - | - |
二、技术上选择SVG
功能主要需求：
1.基本图形绘制，方形、圆形、路径绘制、贝赛尔曲线、物体填充、
2.丰富的事件响应，如鼠标的拖拽、缩放、
3.完善的坐标系统
选择SVG技术的原因：
1.2D的图形界面，并且界面绘制图形对象相对较少
2.展示相对简单，不需要复杂酷炫的效果、
3.相对于canvas，SVG最大的优点就是绘制和控制简单，svg在页面上会生成对应的元素对象也更容易做交互操作。
例如下方代码就是绘制一个圆、一个椭圆和一道黑线，
<svg>
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2" />
<ellipse cx="250" cy="250" rx="100" ry="200" fill="yellow"/>
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>
三、D3.js库
D3.js是一种处理文件的基础上data.d3 JavaScript库可以帮助您将数据生命使用HTML，SVG和CSS。D3 基于Web标准的重点给你现代浏览器的全部功能，无需自己绑到一个专有的框架，结合功能强大的可视化组件和DOM操作一个数据驱动的方法。
d3官网.png
SVG方面的JavaScript库有很多常见的有如下：[链接](# 15款制作 SVG 动画的 JavaScript 库
)
但是大多数还主要是针对web页面上的一些交互动画，很多库都是轻量级。
而D3js是应用在web开发上的开源JS组件库，是一个数据可视化工具。就数D3的应用最为广泛。
官方网站的文档也比较完善
各种语言的文档
主要的一些优点：
1.库的功能齐全
2.官方案例非常多，非常丰富。适用范围非常广泛
3.官方文档资料齐全
4.d3js使用广泛，在github上关注的也非常高，对比React 在 github，这意味着d3库会比较完善，遇到问题时在各技术社区会容易找到解决方案。
image.png
image.png
关于svg一些设计类web应用参考网站：
Method Draw：https://editor.method.ac/
