1、所有元素,以图片资源的形式,上传到服务器,然后通过 svg 引用该图片链接,显示在绘图区。
2、每个元素都有一些相关属性,例如宽度、高度、位置、描述等属性,可以在绘图区域根据需要修改。
3、把所有元素都放在其应该存在的位置,并且将这些信息存储下来,便形成了静态的绘图。
这种方法是好处是成本低(由交互设计师设计图片资源和该元素的位置,开发人员通过配置属性将其放在需要的位置即可),可修改性强(修改属性即可)。
以上是静态情况。
实际上可能是动态的,比如:
- 存在开启、关闭状态;
- 需要警告提示;
- 多状态切换(正常、待命、关闭、报警);
- 前置依赖;
这些都是可以支持的。
核心还是在数据里,预置一些状态,定时从服务器端读取当前状态,然后根据具体情况,修改显示的内容即可。
还有一些其他情况,比如:
1、手动查看更具体的情况:
点击,触发事件,向后端请求,然后查询到数据,显示页面上即可;
2、更醒目的选中时提示效果:
可支持,但由于优先级不高,目前没有添加该功能;
3、3D效果;
目前不支持
4、手动拖拽:
可后期添加,已预留添加空间;
5、动态效果:
预置多个图片状态,手动切换当前显示的图片即可。或许也可以使用gif?(gif未确认)
6、事件触发:
可支持,非常简单。放置在右侧显示的数据的下方,做一个事件区即可。
7、多元素情况下,存在叠加情况,需要处理层级关系:
非常简单,修改绘图时逻辑即可,即可将被覆盖的元素放在下面。
8、缩放
可支持,由于时间所限,此版本未添加缩放功能。
9、不同元素的连接:
本来想的是勾选不同元素后,可自动生成连接线路,但考虑到素材问题,以及连接线也可能具备相关属性,所以改成手动添加连接线。