一种自由变换折线的svg绘制方法和控制系统与流程

本公开涉及，尤其涉及一种自由变换折线的svg绘制方法和控制系统。

背景技术：

1、svg是一种自由变换折线的svg绘制矢量标记语言，能够基于xml语法，可伸缩矢量图形等操作。和.png、.jpg等标量图相比，它的文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真。

2、工业行业数据可视化中需要大量的折线、路径、管道需求，依旧可以采用svg进行编程绘图。而采用内置组件拼接的方式搭建可视化的大屏web页面，搭建的能力受组件丰富度的影响，且搭建含管道的工业方向的工艺流程图，用直角、三通、四通等组件只能搭建出直角线路的管道线路，对于钝角、锐角等的个性化需求，往往需要由设计师单独出图。采用直线组件拼接路径，如果需要复杂的电路图或者网线图，需要大量的精力才能完成图形的搭建。

3、在使用低代码工具搭建设备组态图、工艺流程图、电路原理图等时需要大量不同的折线、路径、管道，由于不同客户的需求不同，设计师需要对不同的需求做不同的设计出图，若出现需求变更，设计师也需要重新出图。

技术实现思路

1、为了解决上述问题，本技术提出一种自由变换折线的svg绘制方法和控制系统。

2、本技术一方面，提出一种自由变换折线的svg绘制方法，包括如下步骤：

3、预定义若干个初始节点，并将每个初始节点的位置值保存在全局数组pointlist中；

4、从初始节点中确定待绘制的目标节点，并按照预设指令操作目标节点进行绘制操作；

5、获取所述目标节点在绘制操作中的位置变化值，并更新所述目标节点的节点数组pointlist；

6、根据更新后的节点数组pointlist，重新计算svg的path，并基于svg使用新的path绘制新的折线。

7、作为本技术的一种可选实施方案，可选地，预定义若干个初始节点，并将每个初始节点的位置值保存在节点数组pointlist中，包括：

8、基于svg组件，创建默认的三个初始节点，并分别配置初始的坐标值；

9、将三个初始节点的初始坐标值，保存在全局数组pointlist中；

10、其中，每个初始节点带有class＝”ctrl”标识，且配置有自定义属性index，其值分别为0、1和2；

11、等待绘制操作。

12、作为本技术的一种可选实施方案，可选地，目标节点在绘制操作中的位置变化值的获取方式，采用js鼠标事件获取。

13、本技术另一方面，提出一种自由变换折线的svg绘制方法，包括如下步骤：

14、当鼠标按住某个目标节点并移动时，利用js鼠标事件pointerdown，获取当前双击目标target；

15、从target的自定义属性dataset中，获取该目标节点在节点数组pointlist中的位置index，即可获取到当前拖拽节点point；

16、利用js鼠标事件pointermove，实时获取到当前鼠标的坐标(x，y)，把该坐标(x，y)的值赋值给当前拖拽的目标节点point，即可得到新的节点数组pointlist；

17、通过节点数组pointlist重新计算svg的path，svg使用新的path绘制新的折线。

18、本技术另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：

19、点击svg元素，利用js鼠标事件pointerdown，获取当前点击目标target；

20、判断所点击目标target的class name中是否具备ctrl标记：

21、若无，则判断当前所点击的目标是线，同时获取所点击目标的坐标point(x，y)；

22、利用坐标point(x，y)，计算并得到新增节点的插入位置index。

23、本技术另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：

24、点击svg元素，给svg元素添加鼠标双击事件dbclick的监听，当鼠标双击svg时，通过事件对象event获取当前双击目标target，判断当前双击目标target的classname是否具有节点的ctrl标记：

25、如果当前双击目标target的classname具有节点的ctrl标记，即当前双击对象是一个节点，则从target的自定义属性dataset中获取该节点在节点数组pointlist中的位置index，并从节点数组pointlist中删除该节点，即可得到新的节点数组pointlist；

26、通过节点数组pointlist重新计算svg的path，svg使用新的path绘制新的折线。

27、本技术另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：

28、点击svg元素，利用js鼠标事件pointerdown，获取到当前拖拽节点point，以及该节点前后两个节点point1与point2；

29、判断节点point、个节点point1与point2是否处于同一直线上，是则不需要修正；

30、否则需要修正并计算出修正之后节点的坐标：

31、将节点point、个节点point1与point2三点连接为一个三角形，计算出：

32、以point1与point2连接成的线line1与拖拽节点point与前一个节点point1连接线line2之间夹角a的正弦值sin1；

33、以线宽的一半作为直角边，拖拽点point与point1的直线距离作为直角斜边，形成的三角形中夹角b的正弦值sin2；

34、若是sin1<2×sin2，则当前拖拽节点point，需要执行修正算法，得到拖拽节点point新的坐标以及对应新的节点数组pointlist，通过节点数组pointlist重新计算svg的path；

35、svg使用新的path绘制新的折线，实现折线自动修正为直线。

36、本技术另一方面，还提出一种控制系统，包括：

37、处理器；

38、用于存储处理器可执行指令的存储器；

39、其中，所述处理器被配置为执行所述可执行指令时实现所述的一种自由变换折线的svg绘制方法。

40、本发明的技术效果：

41、本技术通过采用svg绘制可自定义变化的折线，可以实现路径、管道的个性化需求，无需设计师出图，大大减少设计师工作量。若搭建复杂的电路图或者网线图，也可减少搭建的工作量。能够带来如下技术效果：

42、1.减少设计师时间成本。通过自定义的可变换折线代替低代码工具下不同的折线、路径、管道需求的ui设计或者同一需求的变更导致的ui重绘，大大缩短设计师的工作量。

43、2.轻量化。使用svg绘图代替低代码工具搭建的大屏页面中折线、路径、管道的png或者jpg，在增加绘图清晰度的基础上又减少最终大屏页面的内存占用及页面渲染时的响应时间。

44、根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。