CN111199512B - Svg矢量图形的调整方法、装置、存储介质及终端 - Google Patents

Svg矢量图形的调整方法、装置、存储介质及终端 Download PDF

Info

Publication number
CN111199512B
CN111199512B CN201911350075.1A CN201911350075A CN111199512B CN 111199512 B CN111199512 B CN 111199512B CN 201911350075 A CN201911350075 A CN 201911350075A CN 111199512 B CN111199512 B CN 111199512B
Authority
CN
China
Prior art keywords
svg
svg vector
anchor point
graphic
adjustable parameter
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.)
Active
Application number
CN201911350075.1A
Other languages
English (en)
Other versions
CN111199512A (zh
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.)
Yuanguang Software Co Ltd
Original Assignee
Yuanguang Software 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 Yuanguang Software Co Ltd filed Critical Yuanguang Software Co Ltd
Priority to CN201911350075.1A priority Critical patent/CN111199512B/zh
Publication of CN111199512A publication Critical patent/CN111199512A/zh
Application granted granted Critical
Publication of CN111199512B publication Critical patent/CN111199512B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G06T3/18—
    • 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/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
    • 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
    • Y02E—REDUCTION OF GREENHOUSE GAS [GHG] EMISSIONS, RELATED TO ENERGY GENERATION, TRANSMISSION OR DISTRIBUTION
    • Y02E40/00—Technologies for an efficient electrical power generation, transmission or distribution
    • Y02E40/10—Flexible AC transmission systems [FACTS]

Abstract

本申请实施例公开了一种SVG矢量图形的调整方法、装置、存储介质及终端，属于图形处理领域。用户通过显示在SVG矢量图上的锚点进行拖拽操作实现对SVG矢量图形的形状的调整，避免相关技术中用户通过文本编辑器中修改SVG描述文件的形状参数来调整SVG矢量图形带来的效率低下和不可见的问题，因此本申请实施例可以通过可视化的方式调整SVG矢量图形的形状，通过这种所见即所得的方式对SVG矢量图形的形状进行调整，提高调整SVG矢量图形的形状的效率。

Description

SVG矢量图形的调整方法、装置、存储介质及终端
技术领域
本申请涉及图形处理领域，尤其涉及一种SVG矢量图形的调整方法、装置、存储介质及终端。
背景技术
可缩放的矢量图形(scalable vector graphics，SVG)是一种在网页中应用较为广泛的矢量图形，SVG矢量图形具有放大后质量不变的特性。计算机读取SVG描述文件，根据SVG描述文件中的形状参数进行渲染，然后通过显示屏显示渲染后得到的SVG矢量图形，例如：形状参数包括：矩形的圆角弧度、梯形的角度和环的内径等。在需要调整SVG矢量图形的形状时，用户通过文本编辑器对SVG描述文件中的形状参数进行编辑，完成编辑后计算机重新渲染和显示SVG矢量图形文件，由此可见，目前这种调整SVG矢量图形的形状的方法效率较低，不够直观。
发明内容
本申请实施例提供了的SVG矢量图形的调整方法、装置、存储介质及终端，可以解决相关技术中调整SVG矢量图形效率较低和不直观的问题。所述技术方案如下：
第一方面，本申请实施例提供了一种SVG矢量图形的调整方法，所述方法包括：
通过显示单元显示SVG矢量图形；
检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点；预设触发操作的类型可以是鼠标操作或触控操作等，例如：预设触发操作为鼠标单击操作。
检测到所述锚点上发生的拖拽操作时，将所述锚点由源坐标点移动到目的坐标点；
确定所述坐标点到所述目的坐标点的移动轨迹，以及根据所述移动轨迹的参数对所述SVG矢量图形的形状进行调整。
在一种可能的设计中，所述通过显示单元显示SVG矢量图形之前，还包括
根据所述SVG矢量图形的SVG描述文件中的可调整参数；
根据所述可调整参数的类型和数量创建至少一个锚点；
根据所述可调整参数的范围设置各个锚点的可移动范围。
在一种可能的设计中，所述根据所述移动轨迹的参数对所述SVG矢量图形的形状进行调整，包括：
计算所述移动轨迹的长度；
根据所述移动轨迹的长度确定所述锚点对应的可调整参数的调整量；
根据所述可调整参数的调整量调整所述SVG矢量图形的形状。
在一种可能的设计中，可调整参数包括：矩形的圆角弧度、梯形的角度或环的内径。
第二方面，本申请实施例提供了一种SVG矢量图形的调整装置，所述调整装置包括：
显示单元，用于显示SVG矢量图形；
检测单元，用于检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点；
移动单元，用于检测到所述锚点上发生的拖拽操作时，将所述锚点由源坐标点移动到目的坐标点；
调整单元，用于确定所述源坐标点到所述目的坐标点的移动轨迹，以及根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整。
第三方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。
第四方面，本申请实施例提供一种终端，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。
本申请一些实施例提供的技术方案带来的有益效果至少包括：
通过SVG描述文件渲染和显示SVG矢量图形，以及在SVG矢量图形上显示至少一个锚点，检测到用户至少一个锚点中的任意一个锚点的拖拽操作时，根据拖拽操作对应的移动轨迹的参数确定SVG矢量图形的调整量，根据调整量对SVG矢量图形进行形状调整。在本申请实施例中，用户通过显示在SVG矢量图上的锚点进行拖拽操作实现对SVG矢量图形的形状的调整，避免相关技术中用户通过文本编辑器中修改SVG描述文件的形状参数来调整SVG矢量图形带来的效率低下和不可见的问题，因此本申请实施例可以通过可视化的方式调整SVG矢量图形的形状，通过这种所见即所得的方式对SVG矢量图形的形状进行调整，提高调整SVG矢量图形的形状的效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的SVG矢量图形的调整方法的流程示意图；
图2是本申请实施例提供的SVG矢量图形的示意图；
图3是本申请实施例提供的SVG矢量图形的又一示意图；
图4是本申请提供的一种装置的结构示意图；
图5是本申请提供的一种终端的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。
请参见图1，为本申请实施例提供了一种SVG矢量图形的调整方法的流程示意图。如图1所示，本申请实施例的所述方法可以包括以下步骤：
S101、通过显示单元显示SVG矢量图形。
其中，终端读取SVG描述文件，SVG描述文件包括形状参数，终端根据SVG描述文件进行渲染，以及在显示单元上显示渲染得到的SVG矢量图形，形状参数。SVG矢量图像包括至少一个图形元素，图形元素为SVG矢量图形的基本图形单元，多个图形元素之间具有一定的层次关系，即多个图形元素可能位于相同的图层，也可能位于不同的图层，多个图形元素可以构成复杂的SVG矢量图形。例如：图形元素为矩形、圆形、三角形、梯形或线段等基本图形单元。终端可配置有矢量图形渲染库，该矢量图形渲染库可以是任意的，其实现了矢量图形渲染的功能,矢量图形渲染库可以根据给定的形状参数，返回一个显示形状的SVG，并在WEB页面上显示。
举例来说，终端读取SVG描述文件，根据SVG描述文件中的形状参数进行渲染，通过显示单元显示如图2所示的SVG矢量图形20，SVG矢量图形为一个正方形。
在一种可能的实施方式中，所述通过显示单元显示SVG矢量图形之前，还包括：
确定SVG矢量图形的SVG描述文件中的至少一个可调整参数；
为各个可调整参数创建一个或多个锚点；
根据可调整参数的范围设置锚点的可移动范围。
其中，SVG描述文件中的参数分为可调整参数和不可调整参数，例如：可调整参数包括大小、面积、颜色、粗细等参数，不可调整参数包括图层位置、各个图形元素之间的相对位置关系等。可调整参数和不可调整参数的类型可以根据用户实际需求来定，本申请实施例不作限制。SVG描述文件中可调整参数的数量可以是一个或多个，终端将一个或多个可调整参数映射为锚点，一个可调整参数可以对应一个锚点，也可以对应多个锚点。其中，SVG矢量图形包括一个或多个图形元素，可调整参数可以与图形元素有关。终端设置各个可调整参数在SVG矢量图形上的位置，各个可调整参数具有一个范围，即各个可调整参数具有最大值和最小值，终端根据可调整参数的范围设置锚点在图形界面上的可移动范围。
S102、检测到SVG矢量图形上发生的预设触发操作时，通过显示单元在SVG矢量图形上显示至少一个锚点。
其中，用户通过输入设备对显示单元上显示的SVG矢量图形进行交互操作，终端检测到SVG矢量图形上发生的触发操作，触发操作的类型可以是触控操作、鼠标操作或按键操作等，终端检测到触发操作时，识别触发操作为预设触发操作时，获取SVG描述文件预先配置的至少一个锚点，在SVG矢量图形上显示至少一个锚点。
举例来说，参见图2所示，终端检测到SVG矢量图形20上发生的鼠标点击操作时，根据SVG矢量图形20的SVG描述文件确定配置有4个锚点，根据4个锚点的位置在SVG矢量图形20上显示锚点201、锚点202、锚点203和锚点204，锚点201～锚点204分别位于SVG矢量图像20的4个边上。
S103、检测到锚点上发生的拖拽操作时，将锚点由源坐标点移动到目的坐标点。
其中，拖拽操作表示鼠标光标停留在锚点上，且用户按住鼠标的左键拖拽锚点在显示单元上移动，锚点从源坐标点移动到目的坐标点。应理解，上述以拖拽操作为鼠标操作为例进行说明，实际上，拖拽操作还可以是触控操作或按键操作，本申请实施例不作限制。源坐标点即在完成SVG矢量图形的渲染后锚点在显示单元上的初始位置，目的坐标点表示用户完成拖拽操作时锚点在显示单元上的位置。锚点从源坐标点移动目的坐标点的过程中会形成一个移动轨迹，移动轨迹的形状本申请实施例不作限制。
S104、确定源坐标点到目的坐标点的移动轨迹，根据移动轨迹的参数对SVG矢量图形进行形状调整。
其中，终端检测锚点从源坐标点到目的坐标点之间的移动轨迹，确定移动轨迹的参数，例如：移动轨迹的包括：长度、形状和方向中的一种或多种。终端预存储或预配置有参数和调整量之间的映射关系，调整量包括但不限于：面积、大小、长度、颜色和粗细中的一种或多种。终端根据该映射关系确定移动轨迹的参数对应的调整量，根据调整量度当前在显示单元上显示的SVG矢量图形进行调整。锚点预预设值有可移动范围，用户拖拽该锚点时，终端会将锚点限制在该可移动范围内移动。终端在完成SVG矢量图形的调整后，更新SVG描述文件，以及存储更新后的SVG矢量文件，在后续该更新后的SVG矢量文件渲染和显示调整后的SVG矢量图形。
在一种可能的实施方式中，根据所示移动轨迹的参数对所述SVG矢量图形进行形状调整，包括：
计算移动轨迹的位移；
根据所述移动轨迹的位移确定所述锚点对应的可调整参数的调整量；
跟即可调整参数的调整量调整SVG矢量图形的形状。
其中，位移表示源坐标点到目的坐标点之间的直线距离，终端预存储或预配置有位移和面积调整量之间的映射关系，位移和面积调整量呈正相关性。终端计算移动轨迹的位置，根据该映射关系确定SVG矢量图形的面积调整量，根据面积调整量对SVG矢量图形的面积进行调整。
进一步的，SVG矢量图形由多个图形元素组成，图形元素为基本图形单元，基本图形单元包括正方形、圆形、直线、圆弧等图形。终端可以分别对各个图形元素上设置一个或多个锚点，用户通过拖拽锚点分别对各个图形元素的形状参数进行调整。例如：可调整参数包括矩形的圆角弧度、梯形的角度或环的内径等。
进一步的，SVG矢量图形由至少一个图形元素组成，至少一个锚点的数量、至少一个可调整参数的数量和至少一个图形元素的数量相等。
例如：参见图3所述，SVG矢量图形由正方形31、圆形32和三角形30的3个图形元素组成，正方形对应的可调整参数为边长，圆形对应的可调整参数为半径，三角形对应的可调整参数为面积，SVG矢量图形配置有3个锚点：锚点1设置在正方形上，锚点2设置在圆形上，锚点上设置有三角形上。用户通过拖拽锚点1调整正方形的边长，通过拖拽锚点2调整圆形的半径，通过拖拽锚点3调整三角形的面积。
本申请实施例的方案在执行时，通过SVG描述文件渲染和显示SVG矢量图形，以及在SVG矢量图形上显示至少一个锚点，检测到用户至少一个锚点中的任意一个锚点的拖拽操作时，根据拖拽操作对应的移动轨迹的参数确定SVG矢量图形的调整量，根据调整量对SVG矢量图形进行形状调整。在本申请实施例中，用户通过显示在SVG矢量图上的锚点进行拖拽操作实现对SVG矢量图形的形状的调整，避免相关技术中用户通过文本编辑器中修改SVG描述文件的形状参数来调整SVG矢量图形带来的效率低下和不可见的问题，因此本申请实施例可以通过可视化的方式调整SVG矢量图形的形状，通过这种所见即所得的方式对SVG矢量图形的形状进行调整，提高调整SVG矢量图形的形状的效率。
下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。
请参见图4，其示出了本申请一个示例性实施例提供的SVG矢量图形的显示装置的结构示意图，以下简称装置4。该装置4可以通过软件、硬件或者两者的结合实现成为终端的全部或一部分。装置4包括：显示单元401、检测单元402、移动单元403和调整单元404。
显示单元401，用于显示SVG矢量图形；
检测单元402，用于检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点；
移动单元403，用于检测到所述锚点上发生的拖拽操作时，将所述锚点由源坐标点移动到目的坐标点；
调整单元404，用于确定所述源坐标点到所述目的坐标点的移动轨迹，以及根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整。
在一种可能的实施方式中，装置4还包括：
配置单元，用于确定所述SVG矢量图形的SVG描述文件中的至少一个可调整参数；
为各个可调整参数创建一个或多个锚点；
根据可调整参数的范围设置锚点的可移动范围。
在一种可能的实施方式中，调整单元404还用于：计算所述移动轨迹的位移；
根据所述移动轨迹的位移确定所述锚点对应的可调整参数的调整量；
根据所述可调整参数的调整量调整所述SVG矢量图形的形状。
在一种可能的实施方式中，可调整参数包括：矩形的圆角弧度、梯形的角度或环的内径。
在一种可能的实施方式中，检测单元402用于：获取所述SVG矢量图形的矢量描述文件中配置的至少一个锚点的位置信息；
根据所述至少一个锚点的位置信息在所述SVG矢量图形上显示所述至少一个锚点。
在一种可能的实施方式中，装置4还包括：
更新单元，用于在完成对所述SVG矢量图形的形状调整后，更新所述SVG矢量图形的SVG描述文件，以及存储更新后的SVG描述文件。
在一种可能的实施方式中，所述SVG矢量图形由至少一个图形元素组成，所述至少一个锚点的数量、所述至少一个可调整参数的数量和所述至少一个图形元素的数量相等。
需要说明的是，上述实施例提供的装置4在执行SVG矢量图形的调整方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的SVG矢量图形的调整装置与SVG矢量图形的调整方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
本申请实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图1-图3所示实施例的方法步骤，具体执行过程可以参见图1-图3所示实施例的具体说明，在此不进行赘述。
本申请还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的SVG矢量图形的调整方法。
请参见图5，为本申请实施例提供了一种终端的结构示意图。如图5所示，所述终端5可以包括：至少一个处理器501，至少一个网络接口504，用户接口503，存储器505，至少一个通信总线502。
其中，通信总线502用于实现这些组件之间的连接通信。
其中，用户接口503可以包括显示屏(Display)、摄像头(Camera)，可选用户接口503还可以包括标准的有线接口、无线接口。
其中，网络接口504可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。
其中，处理器501可以包括一个或者多个处理核心。处理器501利用各种借口和线路连接整个终端5内的各个部分，通过运行或执行存储在存储器505内的指令、程序、代码集或指令集，以及调用存储在存储器505内的数据，执行终端5的各种功能和处理数据。可选的，处理器501可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器501可集成中央处理器(CentralProcessing Unit，CPU)、图形处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器501中，单独通过一块芯片进行实现。
其中，存储器505可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器505包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器505可用于存储指令、程序、代码、代码集或指令集。存储器505可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器505可选的还可以是至少一个位于远离前述处理器501的存储装置。如图5所示，作为一种计算机存储介质的存储器505中可以包括操作系统、网络通信模块、用户接口模块以及应用程序。
在图5所示的终端5中，用户接口503主要用于为用户提供输入的接口，获取用户输入的数据；而处理器501可以用于调用存储器505中存储的应用程序，并具体执行以下操作：
通过显示屏显示SVG矢量图形；
检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示屏在所述SVG矢量图形上显示至少一个锚点；
检测到所述锚点上发生的拖拽操作时，将所述锚点由源坐标点移动到目的坐标点；
确定所述源坐标点到所述目的坐标点的移动轨迹，以及根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整。
在一种可能的实施方式中，处理器501还用于执行：
确定所述SVG矢量图形的SVG描述文件中的至少一个可调整参数；
为各个可调整参数创建一个或多个锚点；
根据可调整参数的范围设置锚点的可移动范围。
在一种可能的实施方式中，处理器501执行所述根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整，包括：
计算所述移动轨迹的位移；
根据所述移动轨迹的位移确定所述锚点对应的可调整参数的调整量；
根据所述可调整参数的调整量调整所述SVG矢量图形的形状。
在一种可能的实施方式中，可调整参数包括：矩形的圆角弧度、梯形的角度或环的内径。
在一种可能的实施方式中，处理器501执行所述检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点，包括；
获取所述SVG矢量图形的矢量描述文件中配置的至少一个锚点的位置信息；
根据所述至少一个锚点的位置信息在所述SVG矢量图形上显示所述至少一个锚点。
在一种可能的实施方式中，处理器501还用于执行：在完成对所述SVG矢量图形的形状调整后，更新所述SVG矢量图形的SVG描述文件，以及存储更新后的SVG描述文件。
在一种可能的实施方式中，所述SVG矢量图形由至少一个图形元素组成，所述至少一个锚点的数量、所述至少一个可调整参数的数量和所述至少一个图形元素的数量相等。
在本申请实施例中，通过SVG描述文件渲染和显示SVG矢量图形，以及在SVG矢量图形上显示至少一个锚点，检测到用户至少一个锚点中的任意一个锚点的拖拽操作时，根据拖拽操作对应的移动轨迹的参数确定SVG矢量图形的调整量，根据调整量对SVG矢量图形进行形状调整。在本申请实施例中，用户通过显示在SVG矢量图上的锚点进行拖拽操作实现对SVG矢量图形的形状的调整，避免相关技术中用户通过文本编辑器中修改SVG描述文件的形状参数来调整SVG矢量图形带来的效率低下和不可见的问题，因此本申请实施例可以通过可视化的方式调整SVG矢量图形的形状，通过这种所见即所得的方式对SVG矢量图形的形状进行调整，提高调整SVG矢量图形的形状的效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。
以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (7)

1.一种SVG矢量图形的调整方法，其特征在于，所述方法包括：
确定SVG矢量图形的SVG描述文件中的至少一个可调整参数，为各个可调整参数创建一个或多个锚点，根据可调整参数的范围设置锚点的可移动范围；
通过显示单元显示SVG矢量图形；
检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点；所述SVG矢量图形由至少一个图形元素组成，图形元素包括正方形、圆形、直线或圆弧，各个图形元素上设置一个或多个锚点；所述至少一个锚点的数量、所述至少一个可调整参数的数量和所述至少一个图形元素的数量相等，可调整参数包括：矩形的圆角弧度、梯形的角度或环的内径；
检测到所述锚点上发生的拖拽操作时，将所述锚点由源坐标点移动到目的坐标点；
确定所述源坐标点到所述目的坐标点的移动轨迹，以及根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整。
2.根据权利要求1所述的调整方法，其特征在于，所述根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整，包括：
计算所述移动轨迹的位移；
根据所述移动轨迹的位移确定所述锚点对应的可调整参数的调整量；
根据所述可调整参数的调整量调整所述SVG矢量图形的形状。
3.根据权利要求1所述的调整方法，其特征在于，所述检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点，包括；
获取所述SVG矢量图形的矢量描述文件中配置的至少一个锚点的位置信息；
根据所述至少一个锚点的位置信息在所述SVG矢量图形上显示所述至少一个锚点。
4.根据权利要求1所述的调整方法，其特征在于，还包括：
在完成对所述SVG矢量图形的形状调整后，更新所述SVG矢量图形的SVG描述文件，以及存储更新后的SVG描述文件。
5.一种SVG矢量图形的调整装置，其特征在于，所述装置包括：
配置单元，用于确定SVG矢量图形的SVG描述文件中的至少一个可调整参数，为各个可调整参数创建一个或多个锚点，根据可调整参数的范围设置锚点的可移动范围；
显示单元，用于显示SVG矢量图形；
检测单元，用于检测到所述SVG矢量图形上发生的预设触发操作时，通过所述显示单元在所述SVG矢量图形上显示至少一个锚点；所述SVG矢量图形由至少一个图形元素组成，图形元素包括正方形、圆形、直线或圆弧，各个图形元素上设置一个或多个锚点；所述至少一个锚点的数量、所述至少一个可调整参数的数量和所述至少一个图形元素的数量相等，可调整参数包括：矩形的圆角弧度、梯形的角度或环的内径；
移动单元，用于检测到所述锚点上发生的拖拽操作时，将所述锚点由源坐标点移动到目的坐标点；
调整单元，用于确定所述源坐标点到所述目的坐标点的移动轨迹，以及根据所述移动轨迹的参数对所述SVG矢量图形进行形状调整。
6.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1～4任意一项的方法步骤。
7.一种终端设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1～4任意一项的方法步骤。
CN201911350075.1A 2019-12-24 2019-12-24 Svg矢量图形的调整方法、装置、存储介质及终端 Active CN111199512B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911350075.1A CN111199512B (zh) 2019-12-24 2019-12-24 Svg矢量图形的调整方法、装置、存储介质及终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911350075.1A CN111199512B (zh) 2019-12-24 2019-12-24 Svg矢量图形的调整方法、装置、存储介质及终端

Publications (2)

Publication Number Publication Date
CN111199512A CN111199512A (zh) 2020-05-26
CN111199512B true CN111199512B (zh) 2023-08-15

Family

ID=70746743

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911350075.1A Active CN111199512B (zh) 2019-12-24 2019-12-24 Svg矢量图形的调整方法、装置、存储介质及终端

Country Status (1)

Country Link
CN (1) CN111199512B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114968041A (zh) * 2022-05-24 2022-08-30 北京有竹居网络技术有限公司 基于图形的事件响应方法、装置、设备和介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104063158A (zh) * 2014-06-05 2014-09-24 北京东进航空科技股份有限公司 矢量地图绘制方法和装置
CN107314774A (zh) * 2017-08-29 2017-11-03 努比亚技术有限公司 一种地图导航方法、设备及计算机可读存储介质
CN107817935A (zh) * 2017-11-03 2018-03-20 广州视源电子科技股份有限公司 应用界面的显示方法、装置、终端和计算机可读存储介质
CN109543125A (zh) * 2018-11-06 2019-03-29 广州供电局有限公司 电力调度数据网中网络元素的绘制方法和装置
CN110069191A (zh) * 2019-01-31 2019-07-30 北京字节跳动网络技术有限公司 基于终端的图像拖拽变形实现方法和装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103631474A (zh) * 2012-08-28 2014-03-12 鸿富锦精密工业（深圳）有限公司 图形移动控制系统及方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104063158A (zh) * 2014-06-05 2014-09-24 北京东进航空科技股份有限公司 矢量地图绘制方法和装置
CN107314774A (zh) * 2017-08-29 2017-11-03 努比亚技术有限公司 一种地图导航方法、设备及计算机可读存储介质
CN107817935A (zh) * 2017-11-03 2018-03-20 广州视源电子科技股份有限公司 应用界面的显示方法、装置、终端和计算机可读存储介质
CN109543125A (zh) * 2018-11-06 2019-03-29 广州供电局有限公司 电力调度数据网中网络元素的绘制方法和装置
CN110069191A (zh) * 2019-01-31 2019-07-30 北京字节跳动网络技术有限公司 基于终端的图像拖拽变形实现方法和装置

Also Published As

Publication number Publication date
CN111199512A (zh) 2020-05-26

Similar Documents

Publication Publication Date Title
US11042278B2 (en) Providing graphical indication of label boundaries in digital maps
US10346013B2 (en) Manipulating graphical objects
US9881404B2 (en) Manipulating graphical objects
JP6869249B2 (ja) ２つのタイプのインクベクトルデータを生成して選択的に出力する方法及びシステム
US20210349615A1 (en) Resizing graphical user interfaces
KR20160003683A (ko) 시각화된 데이터를 상호작용에 기초하여 자동으로 조작하는 기법
US20160063670A1 (en) Dynamic Motion Path Blur Kernel
US9955065B2 (en) Dynamic motion path blur user interface
WO2013136594A1 (ja) 図面表示装置、及び図面表示プログラム
CN110473273B (zh) 矢量图形的绘制方法、装置、存储介质及终端
CN111199512B (zh) Svg矢量图形的调整方法、装置、存储介质及终端
JP2014186392A (ja) 画像処理装置及びプログラム
US20160035068A1 (en) Dynamic Motion Path Blur Techniques
CN109598672B (zh) 一种地图道路渲染方法及装置
US20140245195A1 (en) Duplicating graphical widgets
JP5417185B2 (ja) オブジェクト処理装置およびオブジェクト選択方法
CN114489636A (zh) 用于将效果应用于设计元素的系统和方法
CN114675925A (zh) 组态图像处理方法、装置、计算机设备、存储介质
CN109739403B (zh) 用于处理信息的方法和装置
CN103092628A (zh) 一种图像处理的方法及装置
CN107895388B (zh) 图形的颜色填充方法、装置、计算机设备及存储介质
CN111813408A (zh) 视图显示处理方法、装置、终端设备及存储介质
AU2013299742B2 (en) Manipulating graphical objects
CN114692240A (zh) Cad图纸绘制方法、装置、存储介质及计算机设备
CN114692241A (zh) Cad图纸绘制方法、装置、存储介质及计算机设备

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
GR01 Patent grant
GR01 Patent grant