一种基于HTML5的流程图绘制方法、装置、设备及存储介质.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN115904152A(43)申请公布日2023.04.04(21)申请号202211575408.2(22)申请日2022.12.08(71)申请人上海泛微软件有限公司地址200000上海市闵行区三鲁公路3419号(72)发明人王成才熊学武韦利东(74)专利代理机构成都顶峰专利事务所(普通合伙)51224专利代理师叶昌威(51)Int.Cl.G06F3/0481(2022.01)G06F3/0487(2013.01)G06F3/0486(2013.01)权利要求书4页说明书11页附图2页(54)发明名称一种基于HTML5的流程图绘制方法、装置、设备及存储介质(57)摘要本发明公开了一种基于HTML5的流程图绘制方法、装置、设备及存储介质，涉及图形绘制技术领域。所述方法是在将流程图显示数据初始绘制到HTML5画布上后，为所述HTML5画布绑定可基于HTML5的事件传播机制来捕捉到内部元素的鼠标按下事件、鼠标移动事件和鼠标松开事件，并通过这三事件来使得在节点拖动时，会在流程图上绘制一个被拖动节点的轮廓来反映用户的拖动，并确保实际的节点与出口不进行重绘，而当用户拖动完成后，如果位置发生变化，则真实被拖动的节点才移动到被拖动的新位置，并重算出口和重绘部分区域流程图，进而使得一次完整的拖动只进行一次计算和重绘，避免出现拖动卡顿现象，可带来极大的性能提升和极高用户体验。CN115904152ACN115904152A权利要求书1/4页1.一种基于HTML5的流程图绘制方法，其特征在于，包括：获取流程图显示数据；解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中；针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态；在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置；在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。2.根据权利要求1所述的流程图绘制方法，其特征在于，在得到所述节点列表和所述出口列表之后，所述方法还包括有：2CN115904152A权利要求书2/4页遍历所述节点列表和所述出口列表，找出与所述节点列表中的各个节点对应的至少一个关联出口，并将所述至少一个关联出口设置到对应节点对象的出口列表中，以便后续通过节点直接查找到对应的关联出口，其中，所述关联出口是