tab组件里的图表跨界交互方法、装置、设备及介质

摘要

本发明实施例涉及报表技术领域，公开了一种tab组件里的图表跨界交互方法、装置、设备及介质。该方法包括：分别为画布和tab建立X‑Y坐标系；定义，tab和目标图表在画布的X‑Y坐标系中的左上角坐标，以及定义目标图表在tab的X‑Y坐标系中的左上角坐标；监听对目标图表的拖动操作，在将目标图表从画布中拖入tab时，如果满足第一组条件，则判断目标图表整体都被拖入tab中；在将目标图表从tab拖入画布时，如果第二组条件均不满足，则判断目标图表整体超出不在tab中。实施本发明实施例，可以通过参照物的转换确定图表最终的归属容器，同时，在图表被拖动到画布中时，可以实现其坐标纠正，以保证其位于画布中。

说明书

技术领域

本发明涉及报表技术领域，具体涉及一种tab组件里的图表跨界交互方法、装置、设备及介质。

背景技术

在报表涉及的过程中，经常用到画布和tab组件，其中，画布是一个容器，有自己的边界，里面的图表(一种报表体现形式)只能在其范围内移动。

tab是一个图表组件，它可以：

1、直接在组件库中拖入画布中；

2、装载除自己以外的任何图表(无论是画布中的图表拖入tab、还是组件库中图表拖入tab)；

3、tab也是一个容器，有自己的边界，里面的图表可以在其范围内移动，也可以拖到画布中。

因为画布和tab都是容器，而图表可以在两个容器中相互移动，但是相互移动过程中会造成参照对象发生变化(当画布中的图表拖动时，移动的参照对象是画布；而tab里的图表拖动时，参照对象是tab)。

画布和tab可以理解为不同的图层，二者均具有自己的坐标系，在参照对象发生变化时，很难确定图表移动后的容器归属，容易造成在参照对象发生变化时，如果不能确定移动图表的容器归属，造成移动的图表不能显示。因为它不属于画布或者tab里面的内容，无法赋予给对应的坐标，而且，当图表被拖入画布中，如果无法确定其容器归属，就不能在其超过画布边界时进行坐标的自动纠正。

发明内容

针对所述缺陷，本发明实施例公开了一种tab组件里的图表跨界交互方法、装置、设备及介质，其可以基于实现图表在tab和画布中的移动穿插，并可以确定其移动后的容器归属。

本发明实施例第一方面公开一种tab组件里的图表跨界交互方法，所述方法包括：

分别为画布和tab建立X-Y坐标系，定义画布和tab的左上角在各自的X-Y坐标系的坐标为原点，每个X-Y坐标系从原点向右为正值，从原点向下为正值；

定义在画布的X-Y坐标系中，tab和目标图表的左上角坐标分别为(tx，ty)、(x0，y0)；定义在tab的X-Y坐标系中，目标图表的左上角坐标为(x1，y1)；

监听对目标图表的拖动操作，在将所述目标图表从画布中拖入tab时，如果满足以下所有条件：

tx≤x0；

ty≤y0；

tx+tWidth≥x0+Width；

ty+tHeight≥y0+Height；

则判断所述目标图表整体都被拖入tab中；

在将所述目标图表从tab拖入画布时，如果以下所有条件均不满足：

x1≥0；

y1≥0；

x1+Width＜tWidth；

y1+Height＜tHeight；

则判断所述目标图表整体超出不在tab中；

其中，tWidth和tHeight分别为tab的宽和高；Width和Height分别为目标图表的宽和高。

作为较佳的实施例，在本发明实施例的第一方面中，当所述目标图表从tab拖入画布tab中后，计算以下条件是否存在任意一个条件成立：

条件一、y2≤0；

条件二、y2+Height≥cHeight；

条件三、x2≤0；

条件四、x2+Width≥cWidth则将图表坐标；

其中，cWidth和cHeight分别为画布的宽和高，x2＝x1+tx，y2＝x1+ty；

如果存在任意一个条件成立，则自动对所述目标图表的坐标进行纠正。

作为较佳的实施例，在本发明实施例的第一方面中，所述纠正的过程是：当所述条件一成立时，将目标图表的上边缘与所述画布的上边缘对齐；当所述条件二成立时，将目标图表的下边缘与所述画布的下边缘对齐；当所述条件三成立时，将目标图表的左边缘与所述画布的左边缘对齐；当所述条件四成立时，将目标图表的右边缘与所述画布的右边缘对齐。

作为较佳的实施例，在本发明实施例的第一方面中，如果目标图表不是矩形，则以目标图表的最小外接矩形的左上角坐标、宽和高作为其被拖动时的计算参数。

本发明实施例第二方面公开了tab组件里的图表跨界交互装置，其包括：

创建单元，用于分别为画布和tab建立X-Y坐标系，定义画布和tab的左上角在各自的X-Y坐标系的坐标为原点，每个X-Y坐标系从原点向右为正值，从原点向下为正值；

定义单元，用于定义在画布的X-Y坐标系中，tab和目标图表的左上角坐标分别为(tx，ty)、(x0，y0)；定义在tab的X-Y坐标系中，目标图表的左上角坐标为(x1，y1)；

第一判断单元，用于监听对目标图表的拖动操作，在将所述目标图表从画布中拖入tab时，如果满足以下所有条件：

tx≤x0；

ty≤y0；

tx+tWidth≥x0+Width；

ty+tHeight≥y0+Height；

则判断所述目标图表整体都被拖入tab中；

第二判断单元，用于在将所述目标图表从tab拖入画布时，如果以下所有条件均不满足：

x1≥0；

y1≥0；

x1+Width＜tWidth；

y1+Height＜tHeight；

则判断所述目标图表整体不在tab中；

其中，tWidth和tHeight分别为tab的宽和高；Width和Height分别为目标图表的宽和高。

本发明实施例第三方面公开一种电子设备，包括：存储有可执行程序代码的存储器；与所述存储器耦合的处理器；所述处理器调用所述存储器中存储的所述可执行程序代码，用于执行本发明实施例第一方面公开的一种tab组件里的图表跨界交互方法。

本发明实施例第四方面公开一种计算机可读存储介质，其存储计算机程序，其中，所述计算机程序使得计算机执行本发明实施例第一方面公开的一种tab组件里的图表跨界交互方法。

本发明实施例第五方面公开一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得所述计算机执行本发明实施例第一方面公开的一种tab组件里的图表跨界交互方法。

本发明实施例第六方面公开一种应用发布平台，所述应用发布平台用于发布计算机程序产品，其中，当所述计算机程序产品在计算机上运行时，使得所述计算机执行本发明实施例第一方面公开的一种tab组件里的图表跨界交互方法。

与现有技术相比，本发明实施例具有以下有益效果：

本发明实施例可以实现图表在画布和tab中自由移动穿插，并且可以通过参照物的转换确定图表最终的归属容器，同时，在图表被拖动到画布中时，可以实现其坐标纠正，以保证其位于画布中。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例公开的一种tab组件里的图表跨界交互方法的流程示意图；

图2为本发明实施例公开的画布、tab和图表的相关关系图；

图3为本发明实施例公开的图表从tab向画布拖动后的示意图；

图4为本发明实施例公开的图表从tab向画布拖动后坐标纠正前的示意图一；

图5为图4对应的坐标纠正后的示意图；

图6为本发明实施例公开的图表从tab向画布拖动后坐标纠正前的示意图二；

图7为是图6对应的坐标纠正后的示意图；

图8是本发明实施例公开的一种tab组件里的图表跨界交互装置的结构示意图；

图9是本发明实施例公开的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书中的术语“第一”、“第二”、“第三”、“第四”等是用于区别不同的对象，而不是用于描述特定顺序。本发明实施例的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，示例性地，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

本发明实施例公开了一种tab组件里的图表跨界交互方法、装置、设备及介质，其可以实现图表在画布和tab中自由移动穿插，并且可以通过参照物的转换确定图表最终的归属容器，同时，在图表被拖动到画布中时，可以实现其坐标纠正，以保证其位于画布中，以下结合附图进行详细描述。

实施例一

请参阅图1，图1是本发明实施例公开的一种tab组件里的图表跨界交互方法的流程示意图。如图1所示，该tab组件里的图表跨界交互方法包括以下步骤：

S110、分别为画布和tab建立X-Y坐标系，定义画布和tab的左上角在各自的X-Y坐标系的坐标为原点，每个X-Y坐标系从原点向右为正值，从原点向下为正值。

请参照图2所示，tab是一种图表组件，其可以直接从组件库中拖入画布内，也可以装载自己以外的任意图表，无论是从画布中将图表拖入tab(在本发明中，tab均是指位于画布内的tab组件)内，也可以从组件库中将图表拖入tab内，对应地，也可以将tab中的图表拖入画布中。

因为画布和tab是属于不同的容器，二者相当于具有各自的坐标系，在本发明较佳的实施例中，如图2所示，分别为画布和tab建立X-Y坐标系，为了便于计算，定义画布和tab的左上角在各自的X-Y坐标系的坐标为原点坐标，每个X-Y坐标系从原点向右为正值，从原点向下为正值。

当然，在其他的实施例中，也可以以画布和tab中任意一点为原点建立相关的坐标系，同时也可以定义任意方向为正值，例如，也可以画布和tab的有右下角坐标为原点分别建立平面坐标系，然后以相应的原点向右作为X轴的正值，以原点向上作为Y轴的正值。

S120、定义在画布的X-Y坐标系中，tab和目标图表的左上角坐标分别为(tx，ty)、(x0，y0)；定义在tab的X-Y坐标系中，目标图表的左上角坐标为(x1，y1)。

目标图表是指将要被移动的图表。因为涉及到坐标转换，在本发明较佳的实施例中，定义tab和目标图表在画布的X-Y坐标系中的坐标，例如，定义tab和目标图表的左上角坐标分别为(tx，ty)、(x0，y0)，二者的具体值可以通过具体尺寸来确定，也可以通过像素点数量来确定，在对画布、tab以及目标图表的监听过程中，这些具体参数的值是可以被采集到的。

当然，无论采用哪种取值方式，本发明实施例中涉及的尺寸相关的值均采用同一标准，示例性地，通过像素点数量更便于采集，因此，可以采用像素点数量。

同时定义在目标图表的左上角坐标在tab的X-Y坐标系中的坐标为(x1，y1)。因为tab和画布一般为矩形，因此，其左上角的像素点坐标很容易确定，而目标图表可以是不同的形状，在本发明较佳的实施例中，当目标图表不是矩形时，以其最小外接矩形的左上角坐标作为其左上角坐标，同时，以该最小外接矩形的宽和高作为该目标图表的宽和高。

S130、监听对目标图表的拖动操作，在将所述目标图表从画布中拖入tab时，如果满足第一组条件的所有条件(第一组条件的所有条件均成立)时，则判断所述目标图表整体都被拖入tab中。

第一组条件为：

tx≤x0；

ty≤y0；

tx+tWidth≥x0+Width；

ty+tHeight≥y0+Height；

其中，tWidth和tHeight分别为tab的宽和高；Width和Height分别为目标图表的宽和高。

监听操作可以使用Vue框架中的watch完成，其可以监听到操作者任意步骤的动作。监听操作的触发可以是手动触发，例如通过点击监听按键实现监听操作，也可以自动触发，即打开画布拖入tab后就可以触发监听操作。

请参照图2所示，当画布中的目标图表被拖入tab内时，判断目标图表最终归属的容器是画布还是tab，其参照对象为画布，因此，使用的目标图表和tab的坐标均是相对于画布的平面坐标系而言的。所以使用上述四个公式来确定目标图表的四个角(即四个顶点的坐标)是否都位于tab中。

可以理解的是，目标图表处于初始状态时，当上述四个条件均不满足时，说明目标图表没有任意一部分位于tab内，则判断其全部位于画布中，当最终拖动状态结束时，上述四个条件满足一部分，则可以确定目标图表部分被拖入画布中。

S140、在将所述目标图表从tab拖入画布时，如果以下第二组条件均不满足(也就是均不成立)时，则判断所述目标图表整体超出不在tab中。

第二组条件为：

x1≥0；

y1≥0；

x1+Width＜tWidth；

y1+Height＜tHeight；

请参照图3所示，当tab中的目标图表被拖入画布内时，判断目标图表最终归属的容器是画布还是tab，其参照对象为tab，因此，使用的目标图表和tab的坐标均是相对于tab的平面坐标系而言的。所以使用上述四个公式来确定目标图表的四个角是否都位于tab中。

如果目标图表四个角有一个角位于tab内，则说明图表不是全部位于画布中，只有目标图表四个角均不在tab内时，即上述四个公式均不成立时，才能确定目标图表整体从tab中被拖入画布内。

可以理解的是：目标图表处于初始状态时，当上述四个条件均成立时，说明目标图表整体位于tab内。

综上所述，当目标图表在画布和tab中任意移动和穿插，最终判断其是归属的容器是画布中还是tab则通过上述步骤S130和步骤S140完成。

由于步骤S140的行为带来了参照物的转换，当目标图表从tab拖入画布中时，有可能会出现目标图表超出画布的容器范围，所以这种情况下，需要对目标图表最后的位置进行纠正。

具体地，

当所述目标图表从tab拖入画布tab中后，计算以下条件是否存在任意一个条件成立：

条件一、y2≤0；

条件二、y2+Height≥cHeight；

条件三、x2≤0；

条件四、x2+Width≥cWidth则将图表坐标；

其中，cWidth和cHeight分别为画布的宽和高，由于涉及到参照物的转换，所以要将目标图表左上角在tab中的位置坐标转换为在画布中的坐标，转换为的目标图表左上角的坐标记为(x2，y2)，其中，x2＝x1+tx，y2＝x1+ty；

如果存在任意一个条件成立，则自动对所述目标图表的坐标进行纠正。

具体的纠正过程是：

当所述条件一成立时，将目标图表沿画布的Y轴方向向下移动，使得目标图表的上边缘与所述画布的上边缘对齐，如图4和5所示。

当所述条件二成立时，将目标图表沿画布的Y轴方向向上移动，使得目标图表的下边缘与所述画布的下边缘对齐。

当所述条件三成立时，将目标图表沿画布的X轴方向右移动，使得目标图表的左边缘与所述画布的左边缘对齐；

当所述条件四成立时，将目标图表沿画布的X轴方向左移动，使得目标图表的右边缘与所述画布的右边缘对齐。

当然，也可以是上述两个条件都能成立，例如图6示出的结构使得条件一和条件三均成立，则其移动方式是将条件一和条件三的移动分别执行，纠正后的结果如图7所示。

上述纠正过程为终端基于Vue的监听结果自动完成的，对于操作者而言，其拖动目标图表松手后，当上述任意条件成立时，纠正工作即自动执行。

实施例二

请参阅图8，图8是本发明实施例公开的一种tab组件里的图表跨界交互装置的结构示意图。如图8所示，该tab组件里的图表跨界交互装置可以包括

创建单元210，用于分别为画布和tab建立X-Y坐标系，定义画布和tab的左上角在各自的X-Y坐标系的坐标为原点，每个X-Y坐标系从原点向右为正值，从原点向下为正值；

定义单元220，用于定义在画布的X-Y坐标系中，tab和目标图表的左上角坐标分别为(tx，ty)、(x0，y0)；定义在tab的X-Y坐标系中，目标图表的左上角坐标为(x1，y1)；

第一判断单元230，用于监听对目标图表的拖动操作，在将所述目标图表从画布中拖入tab时，如果满足以下所有条件：

tx≤x0；

ty≤y0；

tx+tWidth≥x0+Width；

ty+tHeight≥y0+Height；

则判断所述目标图表整体都被拖入tab中；

第二判断单元240，用于在将所述目标图表从tab拖入画布时，如果以下所有条件均不满足：

x1≥0；

y1≥0；

x1+Width＜tWidth；

y1+Height＜tHeight；

则判断所述目标图表整体不在tab中；

其中，tWidth和tHeight分别为tab的宽和高；Width和Height分别为目标图表的宽和高。

优选地，当所述目标图表从tab拖入画布tab中后，计算以下条件是否存在任意一个条件成立：

条件一、y2≤0；

条件二、y2+Height≥cHeight；

条件三、x2≤0；

条件四、x2+Width≥cWidth则将图表坐标；

其中，cWidth和cHeight分别为画布的宽和高，x2＝x1+tx，y2＝x1+ty；

如果存在任意一个条件成立，则自动对所述目标图表的坐标进行纠正。

作为较佳的实施例，在本发明实施例的第一方面中，所述纠正的过程是：当所述条件一成立时，将目标图表的上边缘与所述画布的上边缘对齐；当所述条件二成立时，将目标图表的下边缘与所述画布的下边缘对齐；当所述条件三成立时，将目标图表的左边缘与所述画布的左边缘对齐；当所述条件四成立时，将目标图表的右边缘与所述画布的右边缘对齐。

优选地，如果目标图表不是矩形，则以目标图表的最小外接矩形的左上角坐标、宽和高作为其被拖动时的计算参数。

实施例三

请参阅图9，图9是本发明实施例公开的一种电子设备的结构示意图。如图9所示，该电子设备可以包括：

存储有可执行程序代码的存储器310；

与存储器310耦合的处理器320；

其中，处理器320调用存储器310中存储的可执行程序代码，执行实施例一中的一种tab组件里的图表跨界交互方法中的部分或全部步骤。

本发明实施例公开一种计算机可读存储介质，其存储计算机程序，其中，该计算机程序使得计算机执行实施例一中的一种tab组件里的图表跨界交互方法中的部分或全部步骤。

本发明实施例还公开一种计算机程序产品，其中，当计算机程序产品在计算机上运行时，使得计算机执行实施例一中的一种tab组件里的图表跨界交互方法中的部分或全部步骤。

本发明实施例还公开一种应用发布平台，其中，应用发布平台用于发布计算机程序产品，其中，当计算机程序产品在计算机上运行时，使得计算机执行实施例一中的一种tab组件里的图表跨界交互方法中的部分或全部步骤。

在本发明的各种实施例中，应理解，所述各过程的序号的大小并不意味着执行顺序的必然先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可位于一个地方，或者也可以分布到多个网络单元上。可根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

另外，在本发明各实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。所述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元若以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可获取的存储器中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或者部分，可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干请求用以使得一台计算机设备(可以为个人计算机、服务器或者网络设备等，具体可以是计算机设备中的处理器)执行本发明的各个实施例所述方法的部分或全部步骤。

在本发明所提供的实施例中，应理解，“与A对应的B”表示B与A相关联，根据A可以确定B。但还应理解，根据A确定B并不意味着仅仅根据A确定B，还可以根据A和/或其他信息确定B。

本领域普通技术人员可以理解所述实施例的各种方法中的部分或全部步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质包括只读存储器(Read-Only Memory，ROM)、随机存储器(Random Access Memory，RAM)、可编程只读存储器(Programmable Read-only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)、一次可编程只读存储器(One-time Programmable Read-Only Memory，OTPROM)、电子抹除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(CompactDisc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。

以上对本发明实施例公开的一种tab组件里的图表跨界交互方法、装置、设备及介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。