数据处理方法及装置制造方法及图纸

本申请提供数据处理方法及装置，其中所述数据处理方法包括：获取画布层的至少一个元素以及每个元素对应的元素信息；根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；基于所述目标元素调整信息调整所述目标元素。本申请实现了由功能组件接收调整指令，并将调整完成的数据传输至画布层用于对元素进行调整，从而实现用户对画布层中元素进行调整的目的。户对画布层中元素进行调整的目的。户对画布层中元素进行调整的目的。

【技术实现步骤摘要】
数据处理方法及装置


[0001]本申请涉及互联网
，特别涉及一种数据处理方法。本申请同时涉及一种数据处理装置，一种计算设备，以及一种计算机可读存储介质。

技术介绍

[0002]Canvas即HTML的画布元素，用于绘制图像。Canvas元素本身并没有绘制能力，需要通过脚本来完成实际的绘图任务。Konvajs和Fabricjs是目前业界使用最多的两个Canvas库，在对Canvas中的元素进行操作时，Canvas元素只能监听到画布的第一层，无论Canvas绘制了多少个图形，Canvas都是一个整体，不能单独给某一个图形增加监听事件，所以需要设计完整的事件系统，事件系统通过计算鼠标在画布的位置和元素在画布的位置，确定是否选中该元素，通过计算和转换修改元素的位置和展示效果。
[0003]然而，使用上述Canvas库实现对于样式和功能的自定义很困难，对于库的拓展也很困难，需要开发人员花费大量时间，不能满足需求。

技术实现思路

[0004]有鉴于此，本申请实施例提供了一种数据处理方法。本申请同时涉及一种数据处理装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的对功能、样式的自定义较为复杂，消耗开发人员大量时间的问题。
[0005]根据本申请实施例的第一方面，提供了一种数据处理方法，包括：
[0006]获取画布层的至少一个元素以及每个元素对应的元素信息；
[0007]根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
[0008]根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
[0009]响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
[0010]基于所述目标元素调整信息调整所述目标元素。
[0011]根据本申请实施例的第二方面，提供了一种数据处理装置，包括：
[0012]获取模块，被配置为获取画布层的至少一个元素以及每个元素对应的元素信息；
[0013]建立模块，被配置为根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；
[0014]确定模块，被配置为根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；
[0015]功能组件调整模块，被配置为响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；
[0016]元素调整模块，被配置为基于所述目标元素调整信息调整所述目标元素。
[0017]根据本申请实施例的第三方面，提供了一种计算设备，包括存储器、处理器及存储
在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述数据处理方法的步骤。
[0018]根据本申请实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述数据处理方法的步骤。
[0019]本申请提供的数据处理方法，获取画布层的至少一个元素以及每个元素对应的元素信息；根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；基于所述目标元素调整信息调整所述目标元素。
[0020]本申请一实施例实现了将画布层中元素的元素信息传输至组件层，组件层基于元素信息绘制对应的功能组件，再由功能组件接收调整指令，并将调整完成的数据传输至画布层用于对元素进行调整，从而实现用户对画布层中元素进行调整的目的。
附图说明
[0021]图1是本申请一实施例提供的一种数据处理方法的流程图；
[0022]图2是本申请一实施例提供的一种应用于画布层Q的数据处理方法的处理流程图；
[0023]图3是本申请一实施例提供的功能控件的示意图；
[0024]图4a是本申请一实施例提供的功能控件等比缩放的示意图；
[0025]图4b是本申请一实施例提供的功能控件等比缩放前的示意图；
[0026]图4c是本申请一实施例提供的功能控件等比缩放后的示意图；
[0027]图5是本申请一实施例提供的一种数据处理装置的结构示意图；
[0028]图6是本申请一实施例提供的一种计算设备的结构框图。
具体实施方式
[0029]在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。
[0030]在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
[0031]应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。
[0032]首先，对本申请一个或多个实施例涉及的名词术语进行解释。
[0033]DOM：文档对象模型(Document Object Model)是HTML和XML文档的编程接口。
[0034]Canvas：是一个可以使用脚本(通常为JavaScript)来绘制图形的HTML元素。
[0035]矩阵：是一个按照长方阵列排列的复数或实数集合，最早来自于方程组的系数及常数所构成的方阵。
[0036]向量：是数学、物理学和工程科学等多个自然科学中的基本概念，指一个同时具有大小和方向，且满足平行四边形法则的几何对象。
[0037]在本申请中，提供了一种数据处理方法，本申请同时涉及一种数据处理装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。
[0038]图1示出了根据本申请一实施例提供的一种数据处理方法的流程图，具体包括以下步骤：
[0039]步骤102：获取画布层的至少一个元素以及每个元素对应的元素信息。
[0040]其中，画布层是指存放元素以及元素信息的容器；元素是指矩形、圆形或图片等图像元素；元素信息是指元素的属性、位置等信息，如元素为矩形，该矩形本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数据处理方法，其特征在于，包括：获取画布层的至少一个元素以及每个元素对应的元素信息；根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件；根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件；响应于所述功能组件调整指令调整所述待调整功能组件，获得所述待调整功能组件对应目标元素的目标元素调整信息；基于所述目标元素调整信息调整所述目标元素。2.如权利要求1所述的方法，其特征在于，在获取画布层的至少一个元素以及每个元素对应的元素信息之后，还包括：传输所述每个元素对应的元素信息至组件层。3.如权利要求2所述的方法，其特征在于，根据所述每个元素对应的元素信息在组件层中建立每个元素对应的功能组件，包括：在组件层根据接收到的所述每个元素对应的元素信息绘制每个元素对应的功能组件。4.如权利要求1所述的方法，其特征在于，根据接收到的功能组件调整指令在所述每个元素对应的功能组件中确定待调整功能组件，包括：监听针对所述组件层的功能组件调整指令，获取所述功能组件调整指令的指令位置信息；根据所述指令位置信息确定待调整功能组件。5.如权利要求4所述的方法，其特征在于，所述功能组件调整指令包括移动指令、旋转指令或缩放指令。6.如权利要求1所述的方法，其特征在于，响应于所述功能组件调整指令调整所述待调整功能组件，包括：获取所述功能组件调整指令中携带的组件调整参数；根据所述组件调整参数调整所述待调整功能组件，获取目标功能组件。7.如权利要求6所述的方法，其特征在于，获得所述待调整功能组件对应目标元素的目标元素调整信息，包括：确定所述目标功能组件的目标组件信息和所...

【专利技术属性】
技术研发人员：曹亮能，张昊天，郑染秋，
申请(专利权)人：上海哔哩哔哩科技有限公司，
类型：发明
国别省市：