可视化编程中元素抽象与定位方法和系统与流程

本发明涉及计算机可视化编程，具体地，涉及一种可视化编程中元素抽象与定位方法和系统。

背景技术：

1、可视化编程是一种用图形元素之间的组合来表示程序逻辑的一种编程方式，相较于常规的文本编程更简单、直观，能在一定程度上辅助常规编程任务，甚至替代利于特定语言，如工业plc中的梯形图、少儿编程启蒙中的scratch以及用于自动化研究验证和生产测试的labview。

2、但是目前可视化编程针对开发体验的优化并不如常规文本编程，例如扁平的布局并不能很好体现元素之间的区别；元素标记(标签、搜索、修改记录)仅限于当前可视区域，缩放后不能展示可视区域外的关键元素；常规文本编程针对上述问题的解决方案是缩略图和滚动条高亮；缩略图方案并不完全适用于画布大小不定的情况，如画布范围过大时按照宽度优先缩放会丢失纵向元素信息，兼顾长度和宽度则会导致实际缩放比例不定，丢失细节以及显示不统一的问题；滚动条高亮在文本中仅需考虑纵向信息，并不完全适用于可视化编程。

3、专利文献cn115543290a(申请号：cn202211250470.4)公开了一种可视化编程方法及系统，所述方法包括步骤：将多个预设编程能力元素分别映射为图形元素节点；将所述图形元素节点展示于一编辑页面；基于接收到的拖拽操作触发信号，将所述编辑页面中的所述图形元素节点进行连接，形成目标配置页面；以及执行所述目标配置页面，以生成对应的目标展示页面。

4、目前图形中的缩略图形式以及文本编程中的mini map方式，都是通过缩放来实现对整体内容的概览，以及关键元素高亮来实现对元素的强调；而本发明是通过投影方式来反映元素在画布中的位置，通过投影高亮来强调元素内容。

技术实现思路

1、针对现有技术中的缺陷，本发明的目的是提供一种可视化编程中元素抽象与定位方法和系统。

2、根据本发明提供的可视化编程中元素抽象与定位方法，包括：

3、步骤1：在画布右侧和下方分别扩展出预设宽度和高度的区域，纵横方向上的宽度和高度分别与画布齐平，作为纵横方向上滚动条的容器；

4、步骤2：根据当前画布的可视范围生成滑块，用以控制画布上下左右滚动；

5、步骤3：设置容器相应点击事件，根据鼠标距离容器顶部和左侧的相对距离调整可视区域的偏移距离；同时设置滑块相应拖拽事件，用以控制画布的垂直和水平滚动；

6、步骤4：对于画布中的图形元素，在纵横滚动条中分别生成投影，表现形式为特定形状和颜色的高亮块，通过投影在滚动条中的位置反映元素在实际画布中的位置。

7、优选的，设当前实际画布宽wa、高ha，可视区域宽wv、高hv、纵向偏移x、横向偏移y，纵横向滚动条容器宽和高均为t，则有：纵向滑块高为距离容器顶部向下偏移横向滑块长为距离容器左侧向右偏移分别映射纵横方向上可视范围。

8、优选的，设元素高h、宽w，中心点相对画布左上角横向距离a、纵向距离b，则有高亮块的中心点在纵向滚动条相对顶部距离为在横向滚动条中相对左侧距离为高亮块在纵向滚动条中高度为在横向滚动条中宽度为

9、优选的，当画布失去焦点时，对滑块进行淡化操作；当画布实际大小小于或等于可视大小时，对滑块进行隐藏操作。

10、优选的，在滚动条中，对高亮块的高度或宽度和纵横向偏移距离进行自定义，用于区分不同类型元素的高亮块；对每个可视化元素设有属性域，包括类型、标签和名称，对每个属性类型或具体值，添加对应高亮块相关配置；在画布和滚动条渲染时根据预设配置生成对应高亮块，或跟随系统状态改变高亮块；对于搜索需求，根据搜索内容匹配元素生成对应高亮块；对于统计需求，设置高亮块不透明度随着相同元素的数量变化。

11、根据本发明提供的可视化编程中元素抽象与定位系统，包括：

12、模块m1：在画布右侧和下方分别扩展出预设宽度和高度的区域，纵横方向上的宽度和高度分别与画布齐平，作为纵横方向上滚动条的容器；

13、模块m2：根据当前画布的可视范围生成滑块，用以控制画布上下左右滚动；

14、模块m3：设置容器相应点击事件，根据鼠标距离容器顶部和左侧的相对距离调整可视区域的偏移距离；同时设置滑块相应拖拽事件，用以控制画布的垂直和水平滚动；

15、模块m4：对于画布中的图形元素，在纵横滚动条中分别生成投影，表现形式为特定形状和颜色的高亮块，通过投影在滚动条中的位置反映元素在实际画布中的位置。

16、优选的，设当前实际画布宽wa、高ha，可视区域宽wv、高hv、纵向偏移x、横向偏移y，纵横向滚动条容器宽和高均为t，则有：纵向滑块高为距离容器顶部向下偏移横向滑块长为距离容器左侧向右偏移分别映射纵横方向上可视范围。

17、优选的，设元素高h、宽w，中心点相对画布左上角横向距离a、纵向距离b，则有高亮块的中心点在纵向滚动条相对顶部距离为在横向滚动条中相对左侧距离为高亮块在纵向滚动条中高度为在横向滚动条中宽度为

18、优选的，当画布失去焦点时，对滑块进行淡化操作；当画布实际大小小于或等于可视大小时，对滑块进行隐藏操作。

19、优选的，在滚动条中，对高亮块的高度或宽度和纵横向偏移距离进行自定义，用于区分不同类型元素的高亮块；对每个可视化元素设有属性域，包括类型、标签和名称，对每个属性类型或具体值，添加对应高亮块相关配置；在画布和滚动条渲染时根据预设配置生成对应高亮块，或跟随系统状态改变高亮块；对于搜索需求，根据搜索内容匹配元素生成对应高亮块；对于统计需求，设置高亮块不透明度随着相同元素的数量变化。

20、与现有技术相比，本发明具有如下的有益效果：

21、与缩略图形式相比，本发明规避了其在不定画布范围情况下显示不统一的问题；经过抽象的目标元素位置信息，结合定义好的投影配置，可以更直观全面的把握重点关注元素，提升了可视化开发体验。

技术特征：

1.一种可视化编程中元素抽象与定位方法，其特征在于，包括：

2.根据权利要求1所述的可视化编程中元素抽象与定位方法，其特征在于，设当前实际画布宽wa、高ha，可视区域宽wv、高hv、纵向偏移x、横向偏移y，纵横向滚动条容器宽和高均为t，则有：纵向滑块高为距离容器顶部向下偏移横向滑块长为距离容器左侧向右偏移分别映射纵横方向上可视范围。

3.根据权利要求2所述的可视化编程中元素抽象与定位方法，其特征在于，设元素高h、宽w，中心点相对画布左上角横向距离a、纵向距离b，则有高亮块的中心点在纵向滚动条相对顶部距离为在横向滚动条中相对左侧距离为高亮块在纵向滚动条中高度为在横向滚动条中宽度为

4.根据权利要求1所述的可视化编程中元素抽象与定位方法，其特征在于，当画布失去焦点时，对滑块进行淡化操作；当画布实际大小小于或等于可视大小时，对滑块进行隐藏操作。

5.根据权利要求1所述的可视化编程中元素抽象与定位方法，其特征在于，在滚动条中，对高亮块的高度或宽度和纵横向偏移距离进行自定义，用于区分不同类型元素的高亮块；对每个可视化元素设有属性域，包括类型、标签和名称，对每个属性类型或具体值，添加对应高亮块相关配置；在画布和滚动条渲染时根据预设配置生成对应高亮块，或跟随系统状态改变高亮块；对于搜索需求，根据搜索内容匹配元素生成对应高亮块；对于统计需求，设置高亮块不透明度随着相同元素的数量变化。

6.一种可视化编程中元素抽象与定位系统，其特征在于，包括：

7.根据权利要求6所述的可视化编程中元素抽象与定位系统，其特征在于，设当前实际画布宽wa、高ha，可视区域宽wv、高hv、纵向偏移x、横向偏移y，纵横向滚动条容器宽和高均为t，则有：纵向滑块高为距离容器顶部向下偏移横向滑块长为距离容器左侧向右偏移分别映射纵横方向上可视范围。

8.根据权利要求7所述的可视化编程中元素抽象与定位系统，其特征在于，设元素高h、宽w，中心点相对画布左上角横向距离a、纵向距离b，则有高亮块的中心点在纵向滚动条相对顶部距离为在横向滚动条中相对左侧距离为高亮块在纵向滚动条中高度为在横向滚动条中宽度为

9.根据权利要求6所述的可视化编程中元素抽象与定位系统，其特征在于，当画布失去焦点时，对滑块进行淡化操作；当画布实际大小小于或等于可视大小时，对滑块进行隐藏操作。

10.根据权利要求6所述的可视化编程中元素抽象与定位系统，其特征在于，在滚动条中，对高亮块的高度或宽度和纵横向偏移距离进行自定义，用于区分不同类型元素的高亮块；对每个可视化元素设有属性域，包括类型、标签和名称，对每个属性类型或具体值，添加对应高亮块相关配置；在画布和滚动条渲染时根据预设配置生成对应高亮块，或跟随系统状态改变高亮块；对于搜索需求，根据搜索内容匹配元素生成对应高亮块；对于统计需求，设置高亮块不透明度随着相同元素的数量变化。

技术总结本发明提供了一种可视化编程中元素抽象与定位方法和系统，包括：步骤1：在画布右侧和下方分别扩展出预设宽度和高度的区域，作为纵横方向上滚动条的容器；步骤2：根据当前画布的可视范围生成滑块，用以控制画布上下左右滚动；步骤3：设置容器相应点击事件，根据鼠标距离容器顶部和左侧的相对距离调整可视区域的偏移距离；同时设置滑块相应拖拽事件，用以控制画布的垂直和水平滚动；步骤4：对于画布中的图形元素，在纵横滚动条中分别生成投影，通过投影在滚动条中的位置反映元素在实际画布中的位置。本发明经过抽象的目标元素位置信息，结合定义好的投影配置，可以更直观全面的把握重点关注元素，提升了可视化开发体验。技术研发人员：李书志,韩璐受保护的技术使用者：上海宝信软件股份有限公司技术研发日：技术公布日：2024/9/12