CN113656736A - 数据处理方法及装置 - Google Patents
数据处理方法及装置 Download PDFInfo
- Publication number
- CN113656736A CN113656736A CN202110956642.9A CN202110956642A CN113656736A CN 113656736 A CN113656736 A CN 113656736A CN 202110956642 A CN202110956642 A CN 202110956642A CN 113656736 A CN113656736 A CN 113656736A
- Authority
- CN
- China
- Prior art keywords
- functional component
- component
- information
- target
- instruction
- 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
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 28
- 230000006870 function Effects 0.000 claims description 30
- 238000000034 method Methods 0.000 claims description 25
- 238000012545 processing Methods 0.000 claims description 15
- 238000012544 monitoring process Methods 0.000 claims description 14
- 230000004044 response Effects 0.000 claims description 5
- 230000005540 biological transmission Effects 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 13
- 230000008569 process Effects 0.000 description 5
- 239000011159 matrix material Substances 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000001413 cellular effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提供数据处理方法及装置，其中所述数据处理方法包括：获取画布层的至少一个元素以及每个元素对应的元素信息；根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；基于所述目标元素调整信息调整所述目标元素。本申请实现了由功能组件接收调整指令，并将调整完成的数据传输至画布层用于对元素进行调整，从而实现用户对画布层中元素进行调整的目的。
Description
技术领域
本申请涉及互联网技术领域，特别涉及一种数据处理方法。本申请同时涉及一种数据处理装置，一种计算设备，以及一种计算机可读存储介质。
背景技术
Canvas即HTML的画布元素，用于绘制图像。Canvas元素本身并没有绘制能力，需要通过脚本来完成实际的绘图任务。Konvajs和Fabricjs是目前业界使用最多的两个Canvas库，在对Canvas中的元素进行操作时，Canvas元素只能监听到画布的第一层，无论Canvas绘制了多少个图形，Canvas都是一个整体，不能单独给某一个图形增加监听事件，所以需要设计完整的事件***，事件***通过计算鼠标在画布的位置和元素在画布的位置，确定是否选中该元素，通过计算和转换修改元素的位置和展示效果。
然而，使用上述Canvas库实现对于样式和功能的自定义很困难，对于库的拓展也很困难，需要开发人员花费大量时间，不能满足需求。
发明内容
有鉴于此，本申请实施例提供了一种数据处理方法。本申请同时涉及一种数据处理装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的对功能、样式的自定义较为复杂，消耗开发人员大量时间的问题。
根据本申请实施例的第一方面，提供了一种数据处理方法，包括：
获取画布层的至少一个元素以及每个元素对应的元素信息；
根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
基于所述目标元素调整信息调整所述目标元素。
根据本申请实施例的第二方面，提供了一种数据处理装置，包括：
获取模块，被配置为获取画布层的至少一个元素以及每个元素对应的元素信息；
建立模块，被配置为根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
确定模块，被配置为根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
功能组件调整模块，被配置为响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
元素调整模块，被配置为基于所述目标元素调整信息调整所述目标元素。
根据本申请实施例的第三方面，提供了一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述数据处理方法的步骤。
根据本申请实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述数据处理方法的步骤。
本申请提供的数据处理方法，获取画布层的至少一个元素以及每个元素对应的元素信息；根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；基于所述目标元素调整信息调整所述目标元素。
本申请一实施例实现了将画布层中元素的元素信息传输至组件层，组件层基于元素信息绘制对应的功能组件，再由功能组件接收调整指令，并将调整完成的数据传输至画布层用于对元素进行调整，从而实现用户对画布层中元素进行调整的目的。
附图说明
图1是本申请一实施例提供的一种数据处理方法的流程图；
图2是本申请一实施例提供的一种应用于画布层Q的数据处理方法的处理流程图；
图3是本申请一实施例提供的功能控件的示意图；
图4a是本申请一实施例提供的功能控件等比缩放的示意图；
图4b是本申请一实施例提供的功能控件等比缩放前的示意图；
图4c是本申请一实施例提供的功能控件等比缩放后的示意图；
图5是本申请一实施例提供的一种数据处理装置的结构示意图；
图6是本申请一实施例提供的一种计算设备的结构框图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。
在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
首先，对本申请一个或多个实施例涉及的名词术语进行解释。
DOM：文档对象模型(Document Object Model)是HTML和XML文档的编程接口。
Canvas：是一个可以使用脚本(通常为JavaScript)来绘制图形的HTML元素。
矩阵：是一个按照长方阵列排列的复数或实数集合，最早来自于方程组的系数及常数所构成的方阵。
向量：是数学、物理学和工程科学等多个自然科学中的基本概念，指一个同时具有大小和方向，且满足平行四边形法则的几何对象。
在本申请中，提供了一种数据处理方法，本申请同时涉及一种数据处理装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。
图1示出了根据本申请一实施例提供的一种数据处理方法的流程图，具体包括以下步骤：
步骤102：获取画布层的至少一个元素以及每个元素对应的元素信息。
其中，画布层是指存放元素以及元素信息的容器；元素是指矩形、圆形或图片等图像元素；元素信息是指元素的属性、位置等信息，如元素为矩形，该矩形元素对应的元素信息为矩形长3厘米、宽2厘米，该元素的中心坐标为(3，2)。获取画布层中的至少一个元素是指获取画布层中的所有元素，并获取每个元素对应的元素信息。
在实际应用中，画布层是指HTML中的Canvas画布，可用于通过使用脚本来绘制图形，例如创建Canvas画布，在创建的Canvas画布中通过脚本绘制元素A和元素B，即此时画布层中包含元素A，元素B，元素A对应的元素信息IA，元素B对应的元素信息IB。
在本申请一具体实施方式中，以画布层中包含元素A、元素B为例，确定画布层中的所有元素为元素A以及元素B，获取元素A对应的元素信息“周长3厘米”以及元素B对应的元素信息“边长4厘米”。
通过获取画布层中的元素以及元素信息，便于后续基于元素信息生成与画布中元素对应的功能组件。
为了便于后续组件层可根据画布中的元素的元素信息绘制对应的功能组件，还可以将获取的元素信息传输至对应的组件层中。
具体的，在获取画布层的至少一个元素以及每个元素对应的元素信息之后，还可以传输所述每个元素对应的元素信息至组件层。
在本申请一具体实施方式中，沿用上例，将获取元素A对应的元素信息“周长3厘米”以及元素B对应的元素信息“边长4厘米”传输至与画布对应的组件层中。
通过将从画布中获取的元素信息传输至组件层，便于后续组件层基于接收的元素信息绘制与元素对应的功能组件。
步骤104：根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件。
其中，组件层是由根据元素信息绘制的与元素对应的功能组件组成，如，为画布中的元素A绘制对应的功能组件a，为画布中的元素B绘制对应的功能组件b，由组件a以及组件b组成与画布对应的组件层。
在实际应用中，组件层可以为DOM层，DOM为文档对象模型(Document ObjectModel)是HTML和XML文档的编程接口；DOM具有便捷的自定义功能，基于DOM去构建一个操作组件，可以随意进行功能和样式的拓展，并且DOM本身有一套完整的事件监听***，监听鼠标的移动、点击、按下、释放、双击等。例如，在DOM层根据元素A的元素信息绘制与元素A在宽高、旋转角度以及坐标等完全一致的功能组件，且功能组件的初始颜色可设置为透明，从而避免对画布元素的遮挡。在本申请一具体实施例中，功能组件中可包含复制按钮、缩放按钮以及旋转按钮等操作按钮，便于对功能组件进行操作。
在本申请一具体实施例中，以元素为矩形C和圆形D为例，根据矩形C对应的元素信息“长为2厘米、宽为1厘米”绘制矩形C对应的功能组件c，根据圆形D的元素信息“直径4厘米”绘制圆形D对应的功能组件d，由功能组件c以及功能组件d组成组件层。
通过为每个元素建立对应的功能组件，便于后续基于功能组件监听用户的交互事件。
在实际应用中，组件层还可以接收画布层传输的元素信息建立功能组件，具体包括：
在组件层根据接收到的所述每个元素对应的元素信息绘制每个元素对应的功能组件。
在本申请一具体实施方式中，以组件层M为例，元素E、元素F为画布层N中的所有元素；组件层M根据接收到的画布层N传输的元素信息，在组件层M中分别绘制元素E的功能组件e以及元素F的功能组件f。
步骤106：根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件。
其中，功能组件调整指令是指对功能组件进行调整的指令，其可以为用户触控功能组件生成的指令或鼠标点击事件触控的指令；待调整功能组件是指根据功能组件调整指令确定的需要对其组件信息进行调整的功能组件。
具体的，根据接收到的功能组件调整指令确定对哪个功能组件进行调整，确定调整的功能组件为待调整功能组件。
在实际应用中，可以由用户触控功能组件生成功能组件调整指令，如，用户将功能组件g向右平移了3个单位，则根据平移可生成将功能组件向右平移3个单位的功能组件调整指令。功能组件调整指令的生成方法包括但不限于根据用户触控生成，在此不做具体的限制。
本申请一具体实施例中，以功能组件调整指令I1为例，根据组件层接收到的功能组件，在组件层的所有功能组件中确定功能组件i1为与功能组件调整指令I1对应的功能组件，将功能组件i1作为待调整功能组件。
通过在组件层的功能组件中确定待调整功能组件，便于后续根据功能组件调整指令对待调整功能组件做进一步的处理。
在实际应用中，根据组件层接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件的具体方法包括：
监听针对所述组件层的功能组件调整指令，获取所述功能组件调整指令的指令位置信息；
根据所述指令位置信息确定待调整功能组件。
具体的，组件层为基于DOM生成的功能组件构成。DOM本身具有完备的事件机制，可以直接监听用户的交互事件，即组件层的功能组件可监听针对功能组件的功能组件调整指令。如，功能组件a可监听用户鼠标事件包括：onClick(鼠标点击)，dbClick(鼠标双击)，onmousedown(按下鼠标)，onmouseup(释放鼠标)，onmousemove(移动鼠标)等。
所述功能组件调整指令中包含指令位置信息，其中，指令位置信息是指触发指令时的位置信息，如，用户触发位于坐标(0，0)位置的功能组件m，生成功能组件调整指令，此时的功能组件调整指令中携带有指令坐标信息(0，0)，根据指令坐标信息可以确定待调整功能组件为功能组件m。在实际应用中位置信息还可以中心坐标和半径(2，2，r＝2)或中心坐标和边长(3，2，a＝2)等x形式表示，在此不做具体的限定。
在本申请一具体实施方式中，以功能组件调整指令I2为例，监听针对组件层的组件功能调整指令，确定针对组件层的功能组件调整指令I2。获取功能组件调整指令I2中的指令位置信息(2，3)，根据指令位置信息(2，3)确定组件层中位于坐标(2，3)的功能组件为待调整功能组件i2。
通过根据功能组件调整指令中的位置信息，确定功能组件调整指令对应的功能组件，便于后续对确定功能组件做进一步的调整。
在实际应用中，所述组件功能调整指令可以包括移动指令、旋转指令和缩放指令。
其中，移动指令是指对功能组件进行移动的指令，如，将功能组件m由坐标位置(3，0)移动至坐标位置(3，1)；旋转指令是指对功能组件进行的旋转的指令，如，将功能组件m顺时针旋转30度；缩放指令是指对功能组件进行宽高等比缩放为例，如，将功能组件m缩小一倍。
通过接收不同的功能组件调整指令，可根据指令对功能组件进行不同的调整，从而实现后续对画布中的元素进行不同的调整。
步骤108：响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息。
其中，根据功能组件调整指令调整所述待调整功能组件是指根据功能组件调整指令中携带的调整信息对待调整功能组件的组件信息进行调整；目标元素是指与所述待调整功能组件对应的画布中的元素，如根据画布中元素A的元素信息构建功能组件a，则功能组件a与元素A对应；目标元素调整信息是指对目标元素进行调整的具体数值，或目标元素要调整到的标准，如目标元素调整信息为“将目标元素向右移动一个单位”，再如，目标元素调整信息为“移动后的目标元素坐标为(3，4)”。
在本申请一具体实施方式中，以待调整功能组件为功能组件a为例，响应于功能组件调整指令对功能组件a进行调整，获得功能组件a对应的目标元素A的目标元素调整指令。
在实际应用中，响应于所述功能组件调整指令调整所述待调整功能组件的方法包括：
获取所述功能组件调整指令中携带的组件调整参数；
根据所述组件调整参数调整所述待调整功能组件，获取目标功能组件。
其中，组件调整参数是指对待调整功能组件进行调整时依据的参数；目标功能组件是指根据组件调整参数对待调整功能组件进行调整后的功能组件。
具体的，确定组件层接收到的功能组件调整指令，并获取功能组件调整指令中的组件调整参数。获取待调整功能组件的组件信息，基于组件调整参数对待调整功能组件的组件信息进行调整，将调整完成组件信息的待调整功能组件作为目标功能组件。
在本申请一具体实施方式中，以功能组件调整指令I3为例，获取组件层接收的功能组件调整指令I3中的组件调整参数“向下平移2个单位”，根据组件调整参数“向下平移2个单位”将待调整功能组件i3的坐标信息(4，5)调整至(4，3)。将此时坐标信息为(4，3)的待调整功能组件i3作为目标功能组件。
通过对待调整功能组件进行调整，便于后续对功能组件对应的元素进行调整。
在实际应用中，获得所述待调整功能组件对应目标元素的目标元素调整信息的方法包括：
确定所述目标功能组件的目标组件信息和所述目标功能组件对应的目标元素；
根据所述目标组件信息和所述目标元素生成目标元素调整信息。
其中，目标组件信息是指功能组件的宽高、坐标以及旋转角度等属性信息；目标元素功能组件对应的目标元素是指待调整功能组件对应的目标元素。
具体的，确定目标功能组件的目标组件信息，如，组件的宽、高，确定目标功能组件对应的目标元素，其中，目标元素即与所述待调整功能组件对应的元素；根据目标组件信息和目标元素的元素信息确定对目标元素进行调整依据，即目标元素调整信息。
在本申请一具体实施方式中，以目标功能组件为功能组件e为例，确定功能组件e的组件信息为“组件中心坐标位置为(4，5)”，确定功能组件e对应的元素为元素E。根据组件信息“组件中心坐标位置为(4，5)”以及元素e生成“将元素e的中心坐标(4，3)向上平移2个单位”的元素调整信息，或生成“将元素e的中心坐标位置移动至(4，5)”的元素调整信息。
通过根据目标功能组件的组件信息以及目标功能组件对应的目标元素确定针对目标元素的目标元素调整信息，便有后续基于目标元素调整信息对目标元素进行调整。
在实际应用中，可将目标功能组件的组件信息传输至画布层，由画布层根据目标元素以及组件信息生成目标元素调整指令；或，由组件层基于组件信息以及目标元素生成目标元素调整指令，再将目标元素调整指令传输中至画布层，用于后续对画布层的目标元素进行调整。
其中，功能组件包含向外暴露方法，包括：onTranslate(移动)，onScale(缩放)，onRotate(旋转)，onClick(点击选中)，dbClick(双击)等，用于监听功能组件的回调，即将组件层发生变化的数据同步至画布层，用于对目标元素进行对应的调整。
具体的，将组件信息传输至画布层生成目标元素调整信息的过程包括：
根据所述目标组件信息和所述目标元素生成目标元素调整信息之前，传输所述目标组件信息至所述画布层。
在本申请一具体实施例中，以生成目标元素调整信息“向右移动1厘米”为例，获取组件层中目标功能组件的组件信息，并传输至画布层；画布层根据接收的组件信息以及画布层中目标元素的元素信息生成目标元素调整信息“向右移动1厘米”。
具体的，在组件层生成目标元素调整信息，再将目标元素调整信息传输至画布层的过程包括：
根据所述目标组件信息和所述目标元素生成目标元素调整信息之后，传输所述目标元素调整信息至所述画布层。
在本申请一具体实施方式中，以生成目标元素调整信息“逆时针旋转30度”为例，获取组件中的目标功能组件的组件信息以及与目标功能组件对应的目标元素的元素信息，在组件层生成目标元素调整信息“逆时针旋转30度”，将生成的目标元素调整信息“逆时针旋转30度”传输至画布层。
在实际应用中，功能组件监听向外暴露方法，用于监听功能组件的回调，以及传输更新数据
步骤110：基于所述目标元素调整信息调整所述目标元素。
其中，目标元素调整信息可以是由画布层或组件层生成的目标元素调整信息。
在实际应用中，基于所述目标元素调整信息调整所述目标元素，包括：
在所述画布层根据所述目标元素调整信息调整所述目标元素。
具体的，画布层接收由组件层传输的目标元素调整信息或获取画布层生成的目标元素调整信息，在画布层对画布层的目标元素进行调整。
在本申请一具体实施方式中，以目标元素为元素L为例，获取画布层接收的目标元素调整信息“将元素L顺时针旋转15度”，基于目标元素调整信息在画布层中将画布层中的目标元素L顺时针旋转15度，完成对目标元素L的调整。
本申请的数据处理方法，通过获取画布层的至少一个元素以及每个元素对应的元素信息；根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；基于所述目标元素调整信息调整所述目标元素。本申请的数据处理方法，将画布层中元素的元素信息传输至组件层，组件层基于元素信息绘制对应的功能组件，再由功能组件接收调整指令，并将调整完成的数据传输至画布层用于对元素进行调整，从而实现用户对画布层中元素进行调整的目的。
下述结合附图2，以本申请提供的数据处理方法在画布层Q的应用为例，对所述数据处理方法进行进一步说明。其中，图2示出了本申请一实施例提供的一种应用于画布层Q的数据处理方法的处理流程图，具体包括以下步骤：
步骤202：在画布层绘制元素。
在本申请一具体实施方式中，定义Canvas画布层，即定义画布层Q。在画布层Q中绘制元素1、元素2...元素n。
步骤204：获取画布层中的元素信息，并传输至组件层。
在本申请一具体实施方式中，沿用上例，获取画布层Q中的所有元素以及每个元素对应的元素信息，例如，获取画布层Q中元素1，在画布层Q中获取元素1的元素信息“元素半径为3厘米”，并将元素1的元素信息传输至组件层。同理，可获取画布层中的所有元素，包括元素2...元素n的元素信息，传输至组件层。
步骤206：组件层根据元素信息绘制功能组件。
根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件。
在本申请一具体实施方式中，沿用上例，在组件层绘制与元素1...元素n每个元素对应的功能组件。例如，获取元素1的元素信息，根据元素信息“元素半径为3厘米”绘制与元素1的元素半径一致，颜色为透明的功能组件a。同理，根据元素2、元素3...元素n的元素信息，分别绘制与画布层Q中的所有元素对应的功能组件。
步骤208：监听鼠标点击事件。若鼠标点击状态为已点击，则执行步骤210，若鼠标点击状态为未点击，则执行步骤212。
在本申请一具体实施方式中，沿用上例，通过用户点击鼠标的鼠标点击事件生成鼠标点击指令，从而根据指令确定对画布Q中的哪个功能组件做进一步的处理。根据鼠标点击事件在所述每个元素对应的功能组件中确定待调整功能组件，例如功能组件a接收到用户触发的鼠标点击功能组件a的点击事件，即鼠标点击功能组件事件为点击状态，功能组件a通过监听鼠标点击事件为点击状态，确定功能组件a为待处理功能组件，则继续执行步骤210。
步骤210：展示待调整功能组件。
在本申请一具体实施方式中，沿用上例，根据用户的鼠标点击指令中携带的位置信息在功能组件中确定功能组件a为待调整功能组件，对功能组件a进行展示。如图3所示，图3示出了本申请一实施例提供的功能控件的示意图，功能组件a包括旋转按钮、复制按钮以及缩放按钮。
步骤212：隐藏功能组件。
在本申请一具体实施方式中，沿用上例，在鼠标点击事件为非点击状态的情况，即功能组件a未监听到鼠标点击事件的情况下，隐藏功能组件a。
步骤214：监听后续鼠标点击是否在待调整功能组件中，若是，则执行步骤216，若否，则执行步骤212。
在本申请一具体实施方式中，沿用上例，监听鼠标点击事件确定在点击功能组件a后，监听后续鼠标点击事件。根据后续鼠标监听事件生成的鼠标点击指令中的位置信息，确定鼠标点击的区域仍在功能组件a之上，执行步骤216。
步骤216：判断鼠标点击事件的选中区域。
鼠标点击的可选中区域包括功能组件的旋转按钮、缩放按钮或功能组件内部。
在本申请一具体实施方式中，沿用上例，确定鼠标点击事件的选中区域为功能组件a的缩放按钮。
步骤218：基于选中区域确定鼠标对功能组件进行的操作。
根据鼠标点击所选中的区域不同，可确定对功能组件进行不同的操作。在选中区域为旋转按钮时，后续可通过鼠标旋转实现对功能组件的旋转；在选中区域为组件内部时，后续可对组件进行拖动实现对组件的移动；在选中区域为缩放按钮的情况下，后续可对组件进行缩放。
在本申请一具体实施方式中，沿用上例，在监听到点击功能组件a的缩放按钮的情况下，确定对功能组件a进行缩放。
步骤220：监听鼠标移动事件。
在本申请一具体实施方式中，沿用上例，功能组件a监听对功能组件a缩放按钮进行移动的鼠标移动事件，生成对功能组件a的缩放指令。
步骤222：基于鼠标移动事件重绘功能组件。
根据鼠标点击选中的区域不同，在不同区域对鼠标进行移动，生成对应的调整指令：在选中旋转按钮并移动鼠标的情况下，生成功能组件旋转指令；在选中功能组件内部并移动鼠标的情况下，生成功能组件移动指令；在选中功能组件缩放按钮的情况下，生成功能组件缩放指令。
在本申请一具体实施方式中，沿用上例，基于缩放指令中的调整参数对功能组件a进行缩放。获取所述功能组件调整指令中携带的组件调整参数“放大一倍”，根据所述组件调整参数调整所述待调整功能组件a，获取目标功能组件。响应于所述鼠标移动指令调整所述待调整功能组件a，基于对功能组件a缩放的指令，对功能组件a进行缩放，实现对功能组件a的重绘。获得待调整功能组件a对应目标元素A的目标元素调整信息。
步骤224：将目标元素调整信息传输至画布层，进行目标元素的重绘。
在本申请一具体实施方式中，沿用上例，获取重绘后功能组件a的组件信息，并传输至画布层Q。画布层Q基于组件信息以及与功能组件对应的目标元素1确定目标元素调整信息为“将元素1放大1倍”，基于目标元素调整信息，将位于画布层中的元素1放大一倍，即画布Q中元素1的重绘。
如图4a所示，图4a为本申请一实施例提供的功能控件等比缩放的示意图，实现元素1等比缩放的原理为：根据向量OC、向量OA得到角度θ；计算OA向量在OC方向上的投影，进而得到B的坐标；O和B＝>新的中心点坐标；通过矩阵计算旋转前的坐标；得到新的宽度和高度实现对功能组件的缩放。如图4b所示，图4b是本申请一实施例提供的功能控件等比缩放前的示意图，通过鼠标移动事件生成对功能组件a的移动指令，根据移动指令对功能组件a进行调整，并将元素调整信息传输至画布层，画布层对功能组件a对应的元素1进行缩放，得到缩放后的元素1如图4c所示，图4c是本申请一实施例提供的功能控件等比缩放后的示意图，。
与上述方法实施例相对应，本申请还提供了数据处理装置实施例，图5示出了本申请一实施例提供的一种数据处理装置的结构示意图。如图5所示，该装置包括：
获取模块502，被配置为获取画布层的至少一个元素以及每个元素对应的元素信息；
建立模块504，被配置为根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
确定模块506，被配置为根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
功能组件调整模块508，被配置为响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
元素调整模块510，被配置为基于所述目标元素调整信息调整所述目标元素。
本申请一具体实施例中，所述装置还包括：
元素信息传输模块，被配置为传输所述每个元素对应的元素信息至组件层；
所述建立模块504，进一步被配置为：
在组件层根据接收到的所述每个元素对应的元素信息绘制每个元素对应的功能组件；
所述确定模块506，进一步被配置为：
监听针对所述组件层的功能组件调整指令，获取所述功能组件调整指令的指令位置信息；根据所述指令位置信息确定待调整功能组件；
所述功能组件调整指令包括移动指令、旋转指令或缩放指令。
所述功能组件调整模块508，进一步被配置为：
获取所述功能组件调整指令中携带的组件调整参数；
根据所述组件调整参数调整所述待调整功能组件，获取目标功能组件。
所述功能组件调整模块508，进一步被配置为：
确定所述目标功能组件的目标组件信息和所述目标功能组件对应的目标元素；
根据所述目标组件信息和所述目标元素生成目标元素调整信息。
所述装置还包括：
组件信息传输模块，被配置为传输所述目标组件信息至所述画布层。
所述装置还包括：
元素调整信息传输模块，被配置为传输所述目标元素调整信息至所述画布层。
所述元素调整模块510，进一步被配置为：
在所述画布层根据所述目标元素调整信息调整所述目标元素。
本申请的数据处理装置，包括：获取模块，获取画布层的至少一个元素以及每个元素对应的元素信息；建立模块，根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；确定模块，根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；功能组件调整模块，响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；元素调整模块，基于所述目标元素调整信息调整所述目标元素。本申请一实施例实现了将画布层中元素的元素信息传输至组件层，组件层基于元素信息绘制对应的功能组件，再由功能组件接收调整指令，并将调整完成的数据传输至画布层用于对元素进行调整，从而实现用户对画布层中元素进行调整的目的。
上述为本实施例的一种数据处理装置的示意性方案。需要说明的是，该数据处理装置的技术方案与上述的数据处理方法的技术方案属于同一构思，数据处理装置的技术方案未详细描述的细节内容，均可以参见上述数据处理方法的技术方案的描述。
图6示出了根据本申请一实施例提供的一种计算设备600的结构框图。该计算设备600的部件包括但不限于存储器610和处理器620。处理器620与存储器610通过总线630相连接，数据库650用于保存数据。
计算设备600还包括接入设备640，接入设备640使得计算设备600能够经由一个或多个网络660通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备640可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(NIC))中的一个或多个，诸如IEEE802.11无线局域网(WLAN)无线接口、全球微波互联接入(Wi-MAX)接口、以太网接口、通用串行总线(USB)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口，等等。
在本申请的一个实施例中，计算设备600的上述部件以及图6中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图6所示的计算设备结构框图仅仅是出于示例的目的，而不是对本申请范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。
计算设备600可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或PC的静止计算设备。计算设备600还可以是移动式或静止式的服务器。
其中，处理器620执行所述计算机指令时实现所述的数据处理方法的步骤。
上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的数据处理方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述数据处理方法的技术方案的描述。
本申请一实施例还提供一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现如前所述数据处理方法的步骤。
上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的数据处理方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述数据处理方法的技术方案的描述。
上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本申请的内容，可作很多的修改和变化。本申请选取并具体描述这些实施例，是为了更好地解释本申请的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权利要求书及其全部范围和等效物的限制。
Claims (13)
1.一种数据处理方法，其特征在于，包括：
获取画布层的至少一个元素以及每个元素对应的元素信息；
根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
基于所述目标元素调整信息调整所述目标元素。
2.如权利要求1所述的方法，其特征在于，在获取画布层的至少一个元素以及每个元素对应的元素信息之后，还包括：
传输所述每个元素对应的元素信息至组件层。
3.如权利要求2所述的方法，其特征在于，根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件，包括：
在组件层根据接收到的所述每个元素对应的元素信息绘制每个元素对应的功能组件。
4.如权利要求1所述的方法，其特征在于，根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件，包括：
监听针对所述组件层的功能组件调整指令，获取所述功能组件调整指令的指令位置信息；
根据所述指令位置信息确定待调整功能组件。
5.如权利要求4所述的方法，其特征在于，所述功能组件调整指令包括移动指令、旋转指令或缩放指令。
6.如权利要求1所述的方法，其特征在于，响应于所述功能组件调整指令调整所述待调整功能组件，包括：
获取所述功能组件调整指令中携带的组件调整参数；
根据所述组件调整参数调整所述待调整功能组件，获取目标功能组件。
7.如权利要求6所述的方法，其特征在于，获得所述待调整功能组件对应目标元素的目标元素调整信息，包括：
确定所述目标功能组件的目标组件信息和所述目标功能组件对应的目标元素；
根据所述目标组件信息和所述目标元素生成目标元素调整信息。
8.如权利要求7所述的方法，其特征在于，根据所述目标组件信息和所述目标元素生成目标元素调整信息之前，还包括：
传输所述目标组件信息至所述画布层。
9.如权利要求7所述的方法，其特征在于，根据所述目标组件信息和所述目标元素生成目标元素调整信息之后，还包括：
传输所述目标元素调整信息至所述画布层。
10.如权利要求7或8所述的方法，其特征在于，基于所述目标元素调整信息调整所述目标元素，包括：
在所述画布层根据所述目标元素调整信息调整所述目标元素。
11.一种数据处理装置，其特征在于，包括：
获取模块，被配置为获取画布层的至少一个元素以及每个元素对应的元素信息；
建立模块，被配置为根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
确定模块，被配置为根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
功能组件调整模块，被配置为响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
元素调整模块，被配置为基于所述目标元素调整信息调整所述目标元素。
12.一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，其特征在于，所述处理器执行所述计算机指令时实现权利要求1-10任意一项所述方法的步骤。
13.一种计算机可读存储介质，其存储有计算机指令，其特征在于，该计算机指令被处理器执行时实现权利要求1-10任意一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110956642.9A CN113656736A (zh) | 2021-08-19 | 2021-08-19 | 数据处理方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110956642.9A CN113656736A (zh) | 2021-08-19 | 2021-08-19 | 数据处理方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113656736A true CN113656736A (zh) | 2021-11-16 |
Family
ID=78492450
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110956642.9A Pending CN113656736A (zh) | 2021-08-19 | 2021-08-19 | 数据处理方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113656736A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114443719A (zh) * | 2022-01-29 | 2022-05-06 | 上海哔哩哔哩科技有限公司 | 动画处理方法及装置 |
| CN115562192A (zh) * | 2022-09-27 | 2023-01-03 | 北京虎蜥信息技术有限公司 | 一种装配工艺图形化管理方法、***、终端及存储介质 |
| CN117033844A (zh) * | 2023-10-07 | 2023-11-10 | 之江实验室 | 一种画布元素布局方法、装置、存储介质及电子设备 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103336690A (zh) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | 基于html5的文字元素绘制方法及装置 |
| US20130283192A1 (en) * | 2012-04-19 | 2013-10-24 | Motorola Mobility, Inc. | Generation of Canvas Elements for Drawing Objects |
| WO2015139469A1 (zh) * | 2014-03-21 | 2015-09-24 | 小米科技有限责任公司 | 网页调整方法、装置及电子设备 |
| CN108573008A (zh) * | 2017-06-15 | 2018-09-25 | 北京金山云网络技术有限公司 | 一种电子地图中的海量点展示方法及装置 |
| CN110569453A (zh) * | 2018-03-27 | 2019-12-13 | 优酷网络技术（北京）有限公司 | 基于canvas元素的路径虚化方法及装置 |
| CN110955477A (zh) * | 2019-10-12 | 2020-04-03 | 中国平安财产保险股份有限公司 | 图像自定义方法、装置、设备及存储介质 |
| CN112783488A (zh) * | 2019-11-08 | 2021-05-11 | 腾讯科技（深圳）有限公司 | 一种商业模式画布绘制方法和装置 |
| US20210208562A1 (en) * | 2018-10-31 | 2021-07-08 | Toshiba Mitsubishi-Electric Industrial Systems Corporation | Hybrid rendering hmi terminal device |
-
2021
- 2021-08-19 CN CN202110956642.9A patent/CN113656736A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130283192A1 (en) * | 2012-04-19 | 2013-10-24 | Motorola Mobility, Inc. | Generation of Canvas Elements for Drawing Objects |
| CN103336690A (zh) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | 基于html5的文字元素绘制方法及装置 |
| WO2015139469A1 (zh) * | 2014-03-21 | 2015-09-24 | 小米科技有限责任公司 | 网页调整方法、装置及电子设备 |
| CN108573008A (zh) * | 2017-06-15 | 2018-09-25 | 北京金山云网络技术有限公司 | 一种电子地图中的海量点展示方法及装置 |
| CN110569453A (zh) * | 2018-03-27 | 2019-12-13 | 优酷网络技术（北京）有限公司 | 基于canvas元素的路径虚化方法及装置 |
| US20210208562A1 (en) * | 2018-10-31 | 2021-07-08 | Toshiba Mitsubishi-Electric Industrial Systems Corporation | Hybrid rendering hmi terminal device |
| CN110955477A (zh) * | 2019-10-12 | 2020-04-03 | 中国平安财产保险股份有限公司 | 图像自定义方法、装置、设备及存储介质 |
| CN112783488A (zh) * | 2019-11-08 | 2021-05-11 | 腾讯科技（深圳）有限公司 | 一种商业模式画布绘制方法和装置 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114443719A (zh) * | 2022-01-29 | 2022-05-06 | 上海哔哩哔哩科技有限公司 | 动画处理方法及装置 |
| CN115562192A (zh) * | 2022-09-27 | 2023-01-03 | 北京虎蜥信息技术有限公司 | 一种装配工艺图形化管理方法、***、终端及存储介质 |
| CN117033844A (zh) * | 2023-10-07 | 2023-11-10 | 之江实验室 | 一种画布元素布局方法、装置、存储介质及电子设备 |
| CN117033844B (zh) * | 2023-10-07 | 2024-01-16 | 之江实验室 | 一种画布元素布局方法、装置、存储介质及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11875010B2 (en) | Systems, methods, and computer-readable media for managing collaboration on a virtual work of art | |
| CN113656736A (zh) | 数据处理方法及装置 | |
| US10984169B2 (en) | Systems, methods, and computer-readable media for providing a dynamic loupe for displayed information | |
| US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
| JP2024505995A (ja) | 特殊効果展示方法、装置、機器および媒体 | |
| US11809684B2 (en) | Coordinated display of software application interfaces | |
| AU2018241118B2 (en) | Persistent node framework | |
| CN112882638B (zh) | 多图层动画展示方法及装置 | |
| US9646362B2 (en) | Algorithm for improved zooming in data visualization components | |
| CN114675925B (zh) | 组态图像处理方法、装置、计算机设备、存储介质 | |
| CN114022604A (zh) | 一种模型绘制方法、装置、电子设备及存储介质 | |
| US20150084961A1 (en) | Map performance by dynamically reducing map detail | |
| US20230185427A1 (en) | Systems and methods for animated computer generated display | |
| WO2022228211A1 (zh) | 可视化视图的构建方法及装置 | |
| US11294556B1 (en) | Editing digital images using multi-panel graphical user interfaces | |
| CN114797109A (zh) | 对象编辑方法、装置、电子设备和存储介质 | |
| JP2024506879A (ja) | 仮想表現を提示するための方法及び装置、コンピュータ機器及び記憶媒体 | |
| CN114895832B (zh) | 对象的调整方法、装置、电子设备及计算机可读介质 | |
| CN116841439B (zh) | 图像像素网格的展示方法、装置、计算机设备及存储介质 | |
| WO2023070538A1 (zh) | 信息展示方法、***、电子设备和计算机可读存储介质 | |
| AU2013299742B2 (en) | Manipulating graphical objects | |
| US20240004534A1 (en) | Click and swap | |
| Ansal et al. | Product Design Using Virtual Reality | |
| KR101075420B1 (ko) | 테이블탑 인터페이스 장치, 협업 제어 장치, 테이블탑인터페이스 기반 협업 시스템 및 그 방법 | |
| CN116700704A (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 |