[发明专利]一种自由变换折线的svg绘制方法和控制系统

说明书

本申请涉及一种自由变换折线的svg绘制方法和控制系统，通过采用svg绘制可自定义变化的折线，可以实现路径、管道的个性化需求，无需设计师出图，大大减少设计师工作量。若搭建复杂的电路图或者网线图，也可减少搭建的工作量。能够带来如下技术效果：减少设计师时间成本。通过自定义的可变换折线代替低代码工具下不同的折线、路径、管道需求的UI设计或者同一需求的变更导致的UI重绘，大大缩短设计师的工作量。轻量化。使用svg绘图代替低代码工具搭建的大屏页面中折线、路径、管道的png或者jpg，在增加绘图清晰度的基础上又减少最终大屏页面的内存占用及页面渲染时的响应时间。

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

等待绘制操作。

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

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

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

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