一、需要实现的基本功能,参考易画门窗



工具 | 包含 | 形状 | 属性 |
---|---|---|---|
框 | 边框、门槛 | 方形、圆形、多边形、自定义 | 长、宽、边角、颜色、纹理,包括其他隐藏属性 |
挺 | 横、竖、拼樘构件、转角构件 | 方形、弧形 | 长、宽、边角、颜色、纹理,包括其他隐藏属 |
扇 | 平开、推拉 | 由容器决定 | 长、宽或弧边弧度长度,包括其他隐藏属 |
玻璃 | 有压线、无压线 | 由容器决定 | 长、宽或弧边弧度长度,包括其他隐藏属 |
其他工具 | - | - | - |
二、技术上选择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操作一个数据驱动的方法。

SVG方面的JavaScript库有很多常见的有如下:[链接](# 15款制作 SVG 动画的 JavaScript 库
)
但是大多数还主要是针对web页面上的一些交互动画,很多库都是轻量级。
而D3js是应用在web开发上的开源JS组件库,是一个数据可视化工具。就数D3的应用最为广泛。
官方网站的文档也比较完善

主要的一些优点:
1.库的功能齐全
2.官方案例非常多,非常丰富。适用范围非常广泛
3.官方文档资料齐全
4.d3js使用广泛,在github上关注的也非常高,对比React 在 github,这意味着d3库会比较完善,遇到问题时在各技术社区会容易找到解决方案。


关于svg一些设计类web应用参考网站:
Method Draw:https://editor.method.ac/
网友评论