CN116051671A - 一种自由变换折线的svg绘制方法和控制*** - Google Patents

一种自由变换折线的svg绘制方法和控制*** Download PDF

Info

Publication number
CN116051671A
CN116051671A CN202211503312.5A CN202211503312A CN116051671A CN 116051671 A CN116051671 A CN 116051671A CN 202211503312 A CN202211503312 A CN 202211503312A CN 116051671 A CN116051671 A CN 116051671A
Authority
CN
China
Prior art keywords
node
svg
target
pointlist
array
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211503312.5A
Other languages
English (en)
Inventor
徐玥
宋杨
秦钢
张弥
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Diji Intelligent Technology Co ltd
Chongqing Cloud Core Intelligent Technology Co ltd
Original Assignee
Hangzhou Diji Intelligent Technology Co ltd
Chongqing Cloud Core Intelligent Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Diji Intelligent Technology Co ltd, Chongqing Cloud Core Intelligent Technology Co ltd filed Critical Hangzhou Diji Intelligent Technology Co ltd
Priority to CN202211503312.5A priority Critical patent/CN116051671A/zh
Publication of CN116051671A publication Critical patent/CN116051671A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G06T11/203—Drawing of straight lines or curves
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/80—Creating or modifying a manually drawn or painted image using a manual input device, e.g. mouse, light pen, direction keys on keyboard
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

一种自由变换折线的svg绘制方法和控制***
技术领域
本公开涉及技术领域，尤其涉及一种自由变换折线的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；
利用JS鼠标事件pointermove，实时获取到当前鼠标的坐标(x，y)，把该坐标(x，y)的值赋值给当前拖拽的目标节点point，即可得到新的节点数组pointList；
通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线。
本申请另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：
点击svg元素，利用JS鼠标事件pointerdown，获取当前点击目标target；
判断所点击目标target的class Name中是否具备ctrl标记：
若无，则判断当前所点击的目标是线，同时获取所点击目标的坐标point(x，y)；
利用坐标point(x，y)，计算并得到新增节点的***位置index。
本申请另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：
点击svg元素，给svg元素添加鼠标双击事件dbclick的监听，当鼠标双击svg时，通过事件对象event获取当前双击目标target，判断当前双击目标target的className是否具有节点的ctrl标记：
如果当前双击目标target的className具有节点的ctrl标记，即当前双击对象是一个节点，则从target的自定义属性dataset中获取该节点在节点数组pointList中的位置index，并从节点数组pointList中删除该节点，即可得到新的节点数组pointList；
通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线。
本申请另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：
点击svg元素，利用JS鼠标事件pointerdown，获取到当前拖拽节点point，以及该节点前后两个节点point1与point2；
判断节点point、个节点point1与point2是否处于同一直线上，是则不需要修正；
否则需要修正并计算出修正之后节点的坐标：
将节点point、个节点point1与point2三点连接为一个三角形，计算出：
以point1与point2连接成的线line1与拖拽节点point与前一个节点point1连接线line2之间夹角a的正弦值sin1；
以线宽的一半作为直角边，拖拽点point与point1的直线距离作为直角斜边，形成的三角形中夹角b的正弦值sin2；
若是sin1<2×sin2，则当前拖拽节点point，需要执行修正算法，得到拖拽节点point新的坐标以及对应新的节点数组pointList，通过节点数组pointList重新计算svg的path；
svg使用新的path绘制新的折线，实现折线自动修正为直线。
本申请另一方面，还提出一种控制***，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述可执行指令时实现所述的一种自由变换折线的svg绘制方法。
本发明的技术效果：
本申请通过采用svg绘制可自定义变化的折线，可以实现路径、管道的个性化需求，无需设计师出图，大大减少设计师工作量。若搭建复杂的电路图或者网线图，也可减少搭建的工作量。能够带来如下技术效果：
1.减少设计师时间成本。通过自定义的可变换折线代替低代码工具下不同的折线、路径、管道需求的UI设计或者同一需求的变更导致的UI重绘，大大缩短设计师的工作量。
2.轻量化。使用svg绘图代替低代码工具搭建的大屏页面中折线、路径、管道的png或者jpg，在增加绘图清晰度的基础上又减少最终大屏页面的内存占用及页面渲染时的响应时间。
根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。
附图说明
包含在说明书中并且构成说明书的一部分的附图与说明书一起示出了本公开的示例性实施例、特征和方面，并且用于解释本公开的原理。
图1示出为本发明初始节点的状态示意图；
图2示出为本发明拖拽节点形成折线的效果图；
图3示出为本发明新增节点后的效果图；
图4示出为本发明删除节点后的效果图；
图5示出为本发明修正折线为直线的计算效果图；
图6示出为本发明折线修正后的效果图。
具体实施方式
以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。
在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。
另外，为了更好的说明本公开，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本公开同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本公开的主旨。
本发明采用svg绘制可自定义变化的折线，可以实现路径、管道的个性化需求，无需设计师出图，大大减少设计师工作量。若搭建复杂的电路图或者网线图，也可减少搭建的工作量。
本申请一方面，提出一种自由变换折线的svg绘制方法，包括如下步骤：
预定义若干个初始节点，并将每个初始节点的位置值保存在全局数组pointList中；
从初始节点中确定待绘制的目标节点，并按照预设指令操作目标节点进行绘制操作；
获取所述目标节点在绘制操作中的位置变化值，并更新所述目标节点的节点数组pointList；
根据更新后的节点数组pointList，重新计算svg的path，并基于svg使用新的path绘制新的折线。
本实施例，将在svg编程中，使用svg绘图代替低代码工具搭建的大屏页面中折线、路径、管道的png或者jpg，在增加绘图清晰度的基础上又减少最终大屏页面的内存占用及页面渲染时的响应时间。
在操作各个节点进行绘制操作时，将按照对方事件的坐标值进行不同的折线变换操作。比如可以使用svg来实现可自由变换的折线，拖曳折线的组成节点，或者在折线上新增节点以及自动修正的算法。
作为本申请的一种可选实施方案，可选地，预定义若干个初始节点，并将每个初始节点的位置值保存在节点数组pointList中，包括：
基于svg组件，创建默认的三个初始节点，并分别配置初始的坐标值；
将三个初始节点的初始坐标值，保存在全局数组pointList中；
其中，每个初始节点带有class＝”ctrl”标识，且配置有自定义属性index，其值分别为0、1和2；
等待绘制操作。
本实施例，将基于本发明开发出的组件初始态具有3个节点，其值为{x:100，y:400}、{x:450，y:400}、{x:800，y:400}，保存在全局数组pointList＝[{x:100，y:400}，{x:450，y:400}，{x:800，y:400}]中，每个节点都带有class＝”ctrl”(拥有该标识的元素即为一个节点而不是线)标识，且每个节点都添加了自定义属性index，其值分别为0、1、2(可以理解为给每个节点编号)。
作为本申请的一种可选实施方案，可选地，目标节点在绘制操作中的位置变化值的获取方式，采用JS鼠标事件获取。
本实施例，初始节点为用户在默认状态下所创建的节点，其数量由用户需求通过svg组件建立。但是最优为三个。
目标节点为用户待操作的绘制节点。
下面将具体描述几种不同的实施方案，以解释并展示本申请的具体实施原理。
实施例1---拖拽节点
本申请另一方面，提出一种自由变换折线的svg绘制方法，包括如下步骤：
当鼠标按住某个目标节点并移动时，利用JS鼠标事件pointerdown，获取当前双击目标target；
从target的自定义属性dataset中，获取该目标节点在节点数组pointList中的位置index，即可获取到当前拖拽节点point；
利用JS鼠标事件pointermove，实时获取到当前鼠标的坐标(x，y)，把该坐标(x，y)的值赋值给当前拖拽的目标节点point，即可得到新的节点数组pointList；
通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线。
当鼠标按住某个节点并移动时，首先利用JS鼠标事件pointerdown，获取当前双击目标target，从target的自定义属性dataset中获取该节点在节点数组pointList中的位置index，即可获取到当前拖拽节点point。其次利用JS鼠标事件pointermove，实时获取到当前鼠标的坐标(x，y)，把该坐标(x，y)的值赋值给当前拖拽节点point。即可得到新的节点数组pointList，通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线，从而实现节点的拖拽能力。
如图1所示，初始时，pointList＝[{x:100，y:400}，{x:450，y:400}，{x:800，y:400}]，计算得到的svg的path＝’M100 400L450 400L800 400’，页面上是一个带3个节点的横线。
当鼠标按住中间节点并移动鼠标到(450，200)时，通过target的自定义属性dataset可得到index＝1，即当前拖拽节点为point(450，400)，更新中间节点的坐标(450，400)为(450，200)，即可得到新的pointList＝[{x:100，y:400}，{x:450，y:200}，{x:800，y:400}]，重新计算得到svg的path＝’M100 400L450200L800 400’，svg使用新的path绘制新的折线。具体如图2所示。
实施例2---新增节点
本申请另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：
点击svg元素，利用JS鼠标事件pointerdown，获取当前点击目标target；
判断所点击目标target的class Name中是否具备ctrl标记：
若无，则判断当前所点击的目标是线，同时获取所点击目标的坐标point(x，y)；
利用坐标point(x，y)，计算并得到新增节点的***位置index。
如图3所示，为新增节点的效果示意图。当鼠标点击svg元素时，可以利用JS鼠标事件pointerdown，获取当前点击目标target，如果当前点击击目标target的class Name没有节点的ctrl标记，即可知道当前点击的是线(只有点击图中直线部分才会新增一个节点)，同时获取鼠标点击的坐标point(x，y)，利用坐标point(x，y)计算得到新增节点的***位置index。
具体判断逻辑如下：
步骤1：循环遍历节点数组pointList中的所有节点，顺序取出两个节点point1(x1，y1)与point2(x2，y2)。
步骤2：如果x1＝x2且满足(y>y1&&y<y2)||(y<y1&&y>y2)且x1＝x，则新增节点在point1(x1，y1)与point2(x2，y2)之间，结束整个逻辑，如果不满足上述条件，则进入步骤3。
步骤3：如果x1不等于x2且y1＝y2且满足(x>x1&&x<x2)||(x<x1&&x>x2)且y1＝y，则新增节点在point1(x1，y1)与point2(x2，y2)之间，结束整个逻辑，如果不满足上述条件，则进入步骤4。
步骤4：如果x1＝x2且不满足(y>y1&&y<y2)||(y<y1&&y>y2)，则回到步骤1，如果不满足上述条件，则进入步骤5。
步骤5：如果x1不等于x2且y1＝y2且不满足(x>x1&&x<x2)||(x<x1&&x>x2)，则回到步骤1，如果不满足上述条件，则进入步骤6。
步骤6：如果x1＝x2且满足(y>y1&&y<y2)||(y<y1&&y>y2)且x1不等于x，则计算point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin，与当前位置index一起存入候选位置列表pointGroupList，并回到步骤1，如果不满足上述条件则进入步骤7。
步骤7：如果x1不等于x2且y1＝y2且满足(x>x1&&x<x2)||(x<x1&&x>x2)且y1不等于y，则计算point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin，与当前位置index一起存入候选位置列表pointGroupList，并回到步骤1，如果不满足上述条件则进入步骤8。
步骤8：如果x1不等于x2且y1不等于y2且满足(x>x1&&x<x2)||(x<x1&&x>x2)且满足y1>y2且不满足y>(y1-w/2)&&y<(y2+w/2)，则回到步骤1，如果不满足上述条件则进入步骤9。
步骤9：如果x1不等于x2且y1不等于y2且满足(x>x1&&x<x2)||(x<x1&&x>x2)且满足y1>y2且满足y>(y1-w/2)&&y<(y2+w/2)，则计算point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin，与当前位置index一起存入候选位置列表pointGroupList，并回到步骤1，如果不满足上述条件则进入步骤10。
步骤10：如果x1不等于x2且y1不等于y2且满足(x>x1&&x<x2)||(x<x1&&x>x2)且不满足y1>y2且不满足y>(y2-w/2)&&y<(y1+w/2)，则回到步骤1，如果不满足上述条件则进入步骤11。
步骤11：如果x1不等于x2且y1不等于y2且满足(x>x1&&x<x2)||(x<x1&&x>x2)且不满足y1>y2且满足y>(y2-w/2)&&y<(y1+w/2)，则计算point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin，与当前位置index一起存入候选位置列表pointGroupList，并回到步骤1，如果不满足上述条件则进入步骤12。
步骤12：如果x1不等于x2且y1不等于y2且不满足(x>x1&&x<x2)||(x<x1&&x>x2)且不满足(y>y1&&y<y2)||(y<y1&&y>y2)，则回到步骤1，如果不满足上述条件则进入步骤13。
步骤13：如果x1不等于x2且y1不等于y2且不满足(x>x1&&x<x2)||(x<x1&&x>x2)且满足(y>y1&&y<y2)||(y<y1&&y>y2)且不满足x1>x2且不满足x>(x1-w/2)&&x<(x2+w/2)，则回到步骤1，如果不满足上述条件则进入步骤14。
步骤14：如果x1不等于x2且y1不等于y2且不满足(x>x1&&x<x2)||(x<x1&&x>x2)且满足(y>y1&&y<y2)||(y<y1&&y>y2)且不满足x1>x2且满足x>(x1-w/2)&&x<(x2+w/2)，则计算point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin，与当前位置index一起存入候选位置列表pointGroupList，并回到步骤1，如果不满足上述条件则进入步骤15。
步骤15：如果x1不等于x2且y1不等于y2且不满足(x>x1&&x<x2)||(x<x1&&x>x2)且满足(y>y1&&y<y2)||(y<y1&&y>y2)且满足x1>x2且满足x>(x2-w/2)&&x<(x1+w/2)，则计算point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin，与当前位置index一起存入候选位置列表pointGroupList，并回到步骤1，如果不满足上述条件则进入步骤16。
步骤16：如果x1不等于x2且y1不等于y2且不满足(x>x1&&x<x2)||(x<x1&&x>x2)且满足(y>y1&&y<y2)||(y<y1&&y>y2)且满足x1>x2且不满足x>(x2-w/2)&&x<(x1+w/2)，则回到步骤1。如果不满足上述条件则进入步骤17。
步骤17：如果节点数组pointList已经循环遍历完成，则进入步骤18，否则回到步骤1。
步骤18：如果候选位置列表pointGroupList的长度为0，则结束整个逻辑，如果候选位置列表pointGroupList的长度不为0，则取出sin值最小的index，即为新增节点point的index，并结束整个逻辑。
上述正旋值sin的计算，可以由软件自动完成，point(x，y)与point1(x1，y1)连成的直线line1与point1(x1，y1)与point2(x2，y2)连成的直线line2之间的正旋值sin等计算，可以由程序自动执行，或者由用户手动完成，可以结合下述实施例4以及附图5进行理解，本处不做赘述。
实施例3---删除节点
本申请另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：
点击svg元素，给svg元素添加鼠标双击事件dbclick的监听，当鼠标双击svg时，通过事件对象event获取当前双击目标target，判断当前双击目标target的className是否具有节点的ctrl标记：
如果当前双击目标target的className具有节点的ctrl标记，即当前双击对象是一个节点，则从target的自定义属性dataset中获取该节点在节点数组pointList中的位置index，并从节点数组pointList中删除该节点，即可得到新的节点数组pointList；
通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线。
给svg元素(包括图中能看到的线和节点)添加鼠标双击事件dbclick的监听，当鼠标双击svg时，即可通过事件对象event获取当前双击目标target，如果当前双击目标target的className具有节点的ctrl标记，即可知道当前双击对象是一个节点，从target的自定义属性dataset中获取该节点在节点数组pointList中的位置index，从节点数组pointList中删除该节点，即可得到新的节点数组pointList，通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线，从而实现节点的拖拽能力。
例：初始时，pointList＝[{x:100，y:400}，{x:450，y:400}，{x:800，y:400}]，计算得到的svg的path＝’M100 400L450 400L800 400’，页面上是一个带3个节点的横线。
如图4所示，当鼠标双击上图svg元素的中间节点时，即可从双击目标target的自定义属性dataset中获取到index的为1，即当前双击节点为point(450，400)，此时删除节点数组pointList中位置为1的节点，得到新的节点数组pointList＝[{x:100，y:400}，{x:800，y:400}]，重新计算得到的svg的path＝’M100 400L800 400’，svg使用新的path绘制新的折线。
实施例4---折线自动修正为直线
如图5所示，三点之间是否处于一条直线上，以及若是三点之间为折线，需要通过一下方式判断并修正为直线。分两步，第一步先判断当前拖拽节点是否需要修正，第二步则需要计算出修正之后节点的坐标。
本申请另一方面，还提出一种自由变换折线的svg绘制方法，包括如下步骤：
点击svg元素，利用JS鼠标事件pointerdown，获取到当前拖拽节点point，以及该节点前后两个节点point1与point2；
判断节点point、个节点point1与point2是否处于同一直线上，是则不需要修正；
否则需要修正并计算出修正之后节点的坐标：
将节点point、个节点point1与point2三点连接为一个三角形，计算出：
以point1与point2连接成的线line1与拖拽节点point与前一个节点point1连接线line2之间夹角a的正弦值sin1；
以线宽的一半作为直角边，拖拽点point与point1的直线距离作为直角斜边，形成的三角形中夹角b的正弦值sin2；
若是sin1<2×sin2，则当前拖拽节点point，需要执行修正算法，得到拖拽节点point新的坐标以及对应新的节点数组pointList，通过节点数组pointList重新计算svg的path；
svg使用新的path绘制新的折线，实现折线自动修正为直线。
如图6所示，若sin1<2×sin2，则当前拖拽节点point，需要执行修正，具体的修正逻辑如下：
获取上述三个点的坐标，判断x1是否等于x2：
当x1＝x2，修正x的值为x1；否则判断y1是否等于y2：
当y1＝y2，修正y的值为y1；否则执行修正，得到拖拽节点point新的坐标(x`，y`)。具体修正算法，参见如图6所示的时序图。
通过以上算法即可得到拖拽节点point新的坐标(x`， y`)， 从而得到新的节点数组pointList，通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线，从而实现折线自动修正为直线能力，具体如图6所示的修正后得到的直线。
因此，本申请通过自定义的可变换折线代替低代码工具下不同的折线、路径、管道需求的UI设计或者同一需求的变更导致的UI重绘，大大缩短设计师的工作量。使用svg绘图代替低代码工具搭建的大屏页面中折线、路径、管道的png或者jpg，在增加绘图清晰度的基础上又减少最终大屏页面的内存占用及页面渲染时的响应时间。
需要说明的是，尽管以三种不同绘制操作方式作为示例介绍了如上折线变换方案，但本领域技术人员能够理解，本公开应不限于此。事实上，用户完全可根据实际应用场景灵活设定应用节点数量以及对应的变换规则，只要可以按照上述类似的逻辑处理技术方法实现本申请的技术功能即可。
显然，本领域的技术人员应该明白，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成的，程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各控制方法的实施例的流程。上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成的，程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各控制方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)、随机存储记忆体(RandomAccessMemory，RAM)、快闪存储器(FlashMemory)、硬盘(HardDiskDrive，缩写：HDD)或固态硬盘(Solid-StateDrive，SSD)等；存储介质还可以包括上述种类的存储器的组合。
实施例5
更进一步地，根据本公开的另一方面，还提出一种控制***，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述可执行指令时实现所述的一种自由变换折线的svg绘制方法。
本公开实施例来控制***包括处理器以及用于存储处理器可执行指令的存储器。其中，处理器被配置为执行可执行指令时实现前面任一所述的一种自由变换折线的svg绘制方法。
此处，应当指出的是，处理器的个数可以为一个或多个。同时，在本公开实施例的控制***中，还可以包括输入装置和输出装置。其中，处理器、存储器、输入装置和输出装置之间可以通过总线连接，也可以通过其他方式连接，此处不进行具体限定。
存储器作为一计算机可读存储介质，可用于存储软件程序、计算机可执行程序和各种模块，如：本公开实施例的一种自由变换折线的svg绘制方法所对应的程序或模块。处理器通过运行存储在存储器中的软件程序或模块，从而执行控制***的各种功能应用及数据处理。
输入装置可用于接收输入的数字或信号。其中，信号可以为产生与设备/终端/服务器的用户设置以及功能控制有关的键信号。输出装置可以包括显示屏等显示设备。
以上已经描述了本公开的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (8)

1.一种自由变换折线的svg绘制方法，其特征在于，包括如下步骤：
预定义若干个初始节点，并将每个初始节点的位置值保存在全局数组pointList中；
从初始节点中确定待绘制的目标节点，并按照预设指令操作目标节点进行绘制操作；
获取所述目标节点在绘制操作中的位置变化值，并更新所述目标节点的节点数组pointList；
根据更新后的节点数组pointList，重新计算svg的path，并基于svg使用新的path绘制新的折线。
2.根据权利要求1所述的一种自由变换折线的svg绘制方法，其特征在于，预定义若干个初始节点，并将每个初始节点的位置值保存在节点数组pointList中，包括：
基于svg组件，创建默认的三个初始节点，并分别配置初始的坐标值；
将三个初始节点的初始坐标值，保存在全局数组pointList中；
其中，每个初始节点带有class＝”ctrl”标识，且配置有自定义属性index，其值分别为0、1和2；
等待绘制操作。
3.根据权利要求1所述的一种自由变换折线的svg绘制方法，其特征在于，目标节点在绘制操作中的位置变化值的获取方式，采用JS鼠标事件获取。
4.一种自由变换折线的svg绘制方法，其特征在于，包括如下步骤：
当鼠标按住某个目标节点并移动时，利用JS鼠标事件pointerdown，获取当前双击目标target；
从target的自定义属性dataset中，获取该目标节点在节点数组pointList中的位置index，即可获取到当前拖拽节点point；
利用JS鼠标事件pointermove，实时获取到当前鼠标的坐标(x，y)，把该坐标(x，y)的值赋值给当前拖拽的目标节点point，即可得到新的节点数组pointList；
通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线。
5.一种自由变换折线的svg绘制方法，其特征在于，包括如下步骤：
点击svg元素，利用JS鼠标事件pointerdown，获取当前点击目标target；
判断所点击目标target的class Name中是否具备ctrl标记：
若无，则判断当前所点击的目标是线，同时获取所点击目标的坐标point(x，y)；
利用坐标point(x，y)，计算并得到新增节点的***位置index。
6.一种自由变换折线的svg绘制方法，其特征在于，包括如下步骤：
点击svg元素，给svg元素添加鼠标双击事件dbclick的监听，当鼠标双击svg时，通过事件对象event获取当前双击目标target，判断当前双击目标target的className是否具有节点的ctrl标记：
如果当前双击目标target的className具有节点的ctrl标记，即当前双击对象是一个节点，则从target的自定义属性dataset中获取该节点在节点数组pointList中的位置index，并从节点数组pointList中删除该节点，即可得到新的节点数组pointList；
通过节点数组pointList重新计算svg的path，svg使用新的path绘制新的折线。
7.一种自由变换折线的svg绘制方法，其特征在于，包括如下步骤：
点击svg元素，利用JS鼠标事件pointerdown，获取到当前拖拽节点point，以及该节点前后两个节点point1与point2；
判断节点point、个节点point1与point2是否处于同一直线上，是则不需要修正；
否则需要修正并计算出修正之后节点的坐标：
将节点point、个节点point1与point2三点连接为一个三角形，计算出：
以point1与point2连接成的线line1与拖拽节点point与前一个节点point1连接线line2之间夹角a的正弦值sin1；
以线宽的一半作为直角边，拖拽点point与point1的直线距离作为直角斜边，形成的三角形中夹角b的正弦值sin2；
若是sin1<2×sin2，则当前拖拽节点point，需要执行修正算法，得到拖拽节点point新的坐标以及对应新的节点数组pointList，通过节点数组pointList重新计算svg的path；
svg使用新的path绘制新的折线，实现折线自动修正为直线。
8.一种控制***，其特征在于，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述可执行指令时实现权利要求1至7中任意一项所述的一种自由变换折线的svg绘制方法。
CN202211503312.5A 2022-11-28 2022-11-28 一种自由变换折线的svg绘制方法和控制*** Pending CN116051671A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211503312.5A CN116051671A (zh) 2022-11-28 2022-11-28 一种自由变换折线的svg绘制方法和控制***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211503312.5A CN116051671A (zh) 2022-11-28 2022-11-28 一种自由变换折线的svg绘制方法和控制***

Publications (1)

Publication Number Publication Date
CN116051671A true CN116051671A (zh) 2023-05-02

Family

ID=86119724

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211503312.5A Pending CN116051671A (zh) 2022-11-28 2022-11-28 一种自由变换折线的svg绘制方法和控制***

Country Status (1)

Country Link
CN (1) CN116051671A (zh)

Similar Documents

Publication Publication Date Title
US20220392144A1 (en) Image rendering method and apparatus, electronic device, and storage medium
US11385786B2 (en) Spin control user interface for selecting options
US11270066B2 (en) Temporary formatting and charting of selected data
CN106062711B (zh) 用于复合控件的方法、***和计算机存储介质
US7644370B2 (en) Method of componentisation of a graphically defined formula
TWI601020B (zh) 圖表分析系統及圖表分析方法
US20140292765A1 (en) Aggregating graph structures
KR20180100276A (ko) 머신 비전 시스템들을 위한 비주얼 프로그램을 제공하기 위한 장치들, 시스템들 및 방법들
CN110377209B (zh) 一种通过拖拽实现可视化流程配置的方法及装置
US11727166B2 (en) Techniques for generating graph-based representations of complex mechanical assemblies
WO2019033016A1 (en) SYSTEM AND METHOD FOR PROVIDING VISUALIZATIONS OF COMPUTER INFRASTRUCTURE USING A DOMAIN-SPECIFIC LANGUAGE FOR CLOUD SERVICES INFRASTRUCTURE
KR20220027870A (ko) 딥 러닝을 위한 비주얼 프로그래밍
CN110832456A (zh) 为图形界面创建默认布局约束
JP6126679B2 (ja) リンクの湾曲のインタラクティブコントロール
CN112121437B (zh) 针对目标对象的移动控制方法、装置、介质及电子设备
CN112085814B (zh) 电子地图显示方法、装置、设备及可读存储介质
CN112634401B (zh) 一种平面轨迹绘制方法、装置、设备及存储介质
CN113656533A (zh) 一种树形控件处理方法、装置及电子设备
CN116051671A (zh) 一种自由变换折线的svg绘制方法和控制***
CN114564268A (zh) 一种设备管理方法、装置、电子设备和存储介质
US11561803B1 (en) Systems and methods for editing topology of a reconfigurable data processor
US20120330619A1 (en) Dynamic connection visualization in computer aided design package
CN111507265A (zh) 表格关键点检测模型训练方法、装置、设备以及存储介质
WO2024119565A1 (zh) 一种地理信息***矢量数据绘制的方法、装置及电子设备
CN111611782B (zh) 一种连接点生成方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination