组件操控方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种组件操控方法、装置、电子设备及存储介质。

背景技术

随着计算机技术的快速发展，各种基于网页Web端的可视化编辑器层出不穷。用户在Web端使用编辑器进行编辑时，例如使用编辑器构建网页或创作流程图时，需要在编辑器的编辑区域内添加多个组件，而为了使设计出的界面内容更加丰富多样，就需要用户在编辑区域内对这些组件进行大量的交互操作，例如拖拽、旋转、调整大小、组件吸附、对齐等。

现有技术中，由于多数组件在开发时并没有设计这样的交互功能，而二次开发时都是对组件本身进行侵入式改造，也即，将相应的交互操作属性植入到组件本身的逻辑代码中，使得交互操作属性与组件本身的操作属性耦合在一起。这样，用户在对这些组件进行交互操作时，容易因为交互操作属性与组件本身的操作属性发生冲突，而导致错误的发生，降低了组件交互操作时的可靠性。

发明内容

本公开实施例的目的是提供一种组件操控方法、装置、电子设备及存储介质，以至少解决现有经二次开发的组件在交互操作时可靠性较低的问题。

本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种组件操控方法，该方法可以包括：

在编辑器中的编辑区域显示有目标组件的情况下，检测针对所述目标组件的第一操作事件；其中，所述目标组件上覆盖有与至少一个属性对应的至少一个属性层，所述属性为所述目标组件的属性；

响应于检测到的所述第一操作事件，从所述目标组件上覆盖的所述属性层中确定目标属性层；

根据所述目标属性层对应的目标属性，对所述目标组件进行操控。

在其中一个实施例中，上述涉及的属性层包括事件层和/或显示层；其中，所述事件层中包含有需要捕获目标事件的元素，所述显示层用于显示与所述显示层对应的显示内容。

基于此，在其中一个实施例中，在所述目标属性层为事件层的情况下，上述涉及的从所述目标组件上覆盖的所述属性层中确定目标属性层的步骤，可以包括：

确定所述第一操作事件为目标事件；

将所述目标组件上覆盖的用于捕获所述目标事件的至少一个事件层，确定为目标属性层。

另外，在其中一个实施例中，在所述目标属性层为显示层的情况下，所述目标属性为内容显示属性；

上述涉及的根据所述目标属性层对应的目标属性，对所述目标组件进行操控的步骤，可以包括：

在所述目标组件上，显示所述显示层对应的显示内容。

在其中一个实施例中，在所述事件层为事件捕获层的情况下，上述涉及的根据所述目标属性层对应的目标属性，对所述目标组件进行操控的步骤，可以包括：

控制所述事件捕获层根据所述第一操作事件的类型，确定是否将所述第一操作事件传递给所述目标组件；

在确定传递的情况下，将所述第一操作事件传递给所述目标组件，以根据所述第一操作事件执行对所述目标组件本身的操作；

在确定不传递的情况下，对所述目标组件执行选中操作，以基于所述第一操作事件对所述目标组件上的属性层进行操控。

在其中一个实施例中，上述涉及的控制所述事件捕捉层根据所述第一操作事件的类型，确定是否将所述第一操作事件传递给所述目标组件的步骤，可以包括：

在所述第一操作事件的类型为目标类型的情况下，控制所述事件捕捉层将所述第一操作事件传递给所述目标组件；

其中，所述目标类型包括需要触发所述目标组件的事件类型。

在其中一个实施例中，在对所述目标组件执行选中操作之后，上述涉及的组件操控方法还可以包括：

显示至少一个隐藏的目标属性层。

在其中一个实施例中，在所述事件层包括辅助节点层和事件辅助层，且所述第一操作事件为针对所述辅助节点层对应的至少一个辅助节点的操作事件的情况下，所述目标属性为边界位置属性；

上述涉及的根据所述目标属性层对应的目标属性，对所述目标组件进行操控的步骤，可以包括：

确定所述辅助节点层中所述第一操作事件对应操控的辅助节点，作为目标辅助节点；

接收针对所述目标辅助节点的第二操作事件；其中，所述第二操作事件由所述事件辅助层捕获；

获取所述目标组件的初始边界位置信息；

根据所述初始边界位置信息和所述第二操作事件，对所述目标组件的边界位置进行更新。

基于此，在其中一个实施例中，在所述事件辅助层为隐藏状态的情况下，在确定所述辅助节点层中所述第一操作事件对应操控的辅助节点，作为目标辅助节点之后，接收针对所述目标辅助节点的第二操作事件之前，所述方法还包括：

显示所述事件辅助层。

另外，在其中一个实施例中，在根据所述初始边界位置信息和所述第二操作事件，对所述目标组件的边界位置进行更新之后，上述涉及的组件操控方法还可以包括：

接收针对所述目标辅助节点的第三操作事件；其中，所述第三操作事件由所述事件辅助层捕获；

响应于所述第三操作事件，隐藏所述事件辅助层。

基于此，在其中一个实施例中，上述涉及的目标组件上覆盖有层容器，所述属性层放置于所述层容器中；其中，所述层容器用于使所述属性层与所述目标组件的边界位置保持重合。

根据本公开实施例的第二方面，提供一种组件操控装置，该装置可以包括：

操作检测模块，被配置为执行在编辑器中的编辑区域显示有目标组件的情况下，检测针对所述目标组件的第一操作事件；其中，所述目标组件上覆盖有与至少一个属性对应的至少一个属性层，所述属性为所述目标组件的属性；

目标确定模块，被配置为执行响应于检测到的所述第一操作事件，从所述目标组件上覆盖的所述属性层中确定目标属性层；

属性操控模块，被配置为执行根据所述目标属性层对应的目标属性，对所述目标组件进行操控。

在其中一个实施例中，上述涉及的属性层包括事件层和/或显示层；其中，所述事件层中包含有需要捕获目标事件的元素，所述显示层用于显示与所述显示层对应的显示内容。

基于此，在其中一个实施例中，在所述目标属性层为事件层的情况下，上述涉及的目标确定模块，可以包括：事件确定子模块和事件捕获子模块，其中：

事件确定子模块，被配置为执行确定所述第一操作事件为目标事件；

事件捕获子模块，被配置为执行将所述目标组件上覆盖的用于捕获所述目标事件的至少一个事件层，确定为目标属性层。

另外，在其中一个实施例中，在所述目标属性层为显示层的情况下，所述目标属性为内容显示属性；

上述涉及的属性操控模块，可以包括：内容显示子模块，其中：

内容显示子模块，被配置为执行在所述目标组件上，显示所述显示层对应的显示内容。

在其中一个实施例中，在所述事件层为事件捕获层的情况下，所述目标属性为事件捕获属性；

上述涉及的属性操控模块，可以包括：传递确定子模块、事件传递子模块和组件选中子模块，其中：

传递确定子模块，被配置为执行控制所述事件捕获层根据捕获的所述第一操作事件的类型，确定是否将所述第一操作事件传递给所述目标组件；

事件传递子模块，被配置为执行在确定传递的情况下，将所述第一操作事件传递给所述目标组件，以根据所述第一操作事件执行对所述目标组件本身的操作；

组件选中子模块，被配置为执行在确定不传递的情况下，对所述目标组件执行选中操作，以基于所述第一操作事件对所述目标组件上的属性层进行操控。

在其中一个实施例中，上述涉及的传递确定子模块，包括：

传递控制单元，被配置为执行在所述第一操作事件的类型为目标类型的情况下，控制所述事件捕捉层将所述第一操作事件传递给所述目标组件；

其中，所述目标类型包括需要触发所述目标组件的事件类型。

基于此，在其中一个实施例中，上述涉及的属性操控模块还可以包括：属性层显示子模块，其中：

属性层显示子模块，被配置为执行在对所述目标组件执行选中操作之后，显示至少一个隐藏的目标属性层。

在其中一个实施例中，在所述事件层包括辅助节点层和事件辅助层，且所述第一操作事件为针对所述辅助节点层对应的至少一个辅助节点的操作事件的情况下，所述目标属性为边界位置属性；

上述涉及的属性操控模块，可以包括：节点确定子模块、第二事件接收子模块、位置获取子模块和位置更新子模块，其中：

节点确定子模块，被配置为执行确定所述辅助节点层中所述第一操作事件对应操控的辅助节点，作为目标辅助节点；

第二事件接收子模块，被配置为执行接收针对所述目标辅助节点的第二操作事件；其中，所述第二操作事件由所述事件辅助层捕获；

位置获取子模块，被配置为执行获取所述目标组件的初始边界位置信息；

位置更新子模块，被配置为执行根据所述初始边界位置信息和所述第二操作事件，对所述目标组件的边界位置进行更新。

基于此，在其中一个实施例中，在所述事件辅助层为隐藏状态的情况下，上述涉及的属性操控模块还可以包括：辅助层显示子模块，其中：

辅助层显示子模块，被配置为执行在确定所述辅助节点层中所述第一操作事件对应操控的辅助节点，作为目标辅助节点之后，接收针对所述目标辅助节点的第二操作事件之前，显示所述事件辅助层。

另外，在其中一个实施例中，上述涉及的属性操控模块还可以包括：第三事件接收子模块和辅助层隐藏子模块，其中：

第三事件接收子模块，被配置为执行在根据所述初始边界位置信息和所述第二操作事件，对所述目标组件的边界位置进行更新之后，接收针对所述目标辅助节点的第三操作事件；其中，所述第三操作事件由所述事件辅助层捕获；

辅助层隐藏子模块，被配置为执行响应于所述第三操作事件，隐藏所述事件辅助层。

基于此，在其中一个实施例中，上述涉及的目标组件上覆盖有层容器，所述属性层放置于所述层容器中；其中，所述层容器用于使所述属性层与所述目标组件的边界位置保持重合。

根据本公开实施例的第三方面，提供一种电子设备，该电子设备可以包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如第一方面的任一项实施例中所示的组件操控方法。

根据本公开实施例的第四方面，提供一种存储介质，当存储介质中的指令由组件操控装置或者服务器的处理器执行时，以使组件操控装置或者服务器实现以实现如第一方面的任一项实施例中所示的组件操控方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序存储在可读存储介质中，设备的至少一个处理器从存储介质读取并执行计算机程序，使得设备执行第一方面的任一项实施例中所示的组件操控方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开实施例中，由于目标组件上覆盖有与至少一个属性对应的至少一个属性层，因此，在编辑器中的编辑区域显示有该目标组件的情况下，可以通过检测针对该目标组件的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层，进而根据该目标属性层对应的目标属性，对该目标组件进行操控，利用对应于不同的交互操作属性的属性层，实现对目标组件的交互操作，使得交互操作属性能够与目标组件本身的逻辑代码解耦，从而可以避免出现交互操作属性与目标组件本身的操作属性发生冲突的问题，减少了经二次开发的组件在交互操作时发生错误几率，提高了组件交互操作时的可靠性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种组件操控应用场景的示意图；

图2是根据一示例性实施例示出的一种组件操控方法的流程图；

图3a是根据一示例性实施例示出的另一种组件操控方法的流程图；

图3b是根据一示例性实施例示出的一种经二次开发的目标组件的结构图；

图4a是根据一示例性实施例示出的又一种组件操控方法的流程图；

图4b是根据一示例性实施例示出的另一种经二次开发的目标组件的结构图；

图5是根据一示例性实施例示出的一种经二次开发的目标组件的三维结构图；

图6是根据一示例性实施例示出的又一种经二次开发的目标组件的结构图；

图7是根据一示例性实施例示出的再一种经二次开发的目标组件的结构图；

图8是根据一示例性实施例示出的一种针对目标组件进行操控的示意图；

图9是根据一示例性实施例示出的一种组件操控装置的结构框图；

图10是根据一示例性实施例示出的一种电子设备的结构框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本公开所提供的组件操控方法，可以应用于如图1所示的场景中，具体结合图1进行详细说明。

图1是根据一示例性实施例示出的一种组件操控应用场景的示意图。

如图1所示，在该应用场景中，用户可向编辑器10中的编辑区域101内添加需要的组件，以完成相应的界面设计。其中，该编辑器10可以是基于web端的编辑器，当然也可以是其他的编辑器类型的软件，例如用于构建网页的编辑器，或用于创作流程图的编辑器等，在此不做限定。编辑区域101可以是编辑器10中用于添加组件，并基于这些组件进行设计的舞台。

基于上述应用场景，用户可通过多种方式向编辑区域101内添加需要的组件，添加方式包括但不限于从组件候选区域102中选择需要的组件，并拖拽至编辑区域101中。为了使设计出的界面内容更加丰富多样，就需要用户在编辑区域101内对这些组件进行大量的交互操作，例如通过拖拽、旋转、调整大小、组件吸附、对齐等方式对这些组件进行操控。

目前，由于多数组件在开发时并没有设计这样的交互功能，也即并不支持对组件进行这样的操控，因此，需要对编辑器中所使用的组件进行二次开发，使其具有交互功能。基于此，现有技术中在对组件进行二次开发时，都是对组件本身进行侵入式改造，也即，将相应的交互操作属性植入到组件本身的逻辑代码中，使得交互操作属性与组件本身的操作属性耦合在一起。如此，用户在对这些组件进行交互操作时，容易因为交互操作属性与组件本身的操作属性发生冲突，而导致错误的发生，降低了组件交互操作时的可靠性。

为了解决上述问题，本公开实施例提供了一种组件操控方法，也即，在编辑器中的编辑区域内添加并显示有目标组件的情况下，检测用户针对该目标组件的第一操作事件；其中，目标组件上覆盖有与至少一个属性对应的至少一个属性层；响应于检测到的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层；根据目标属性层对应的目标属性，对目标组件进行操控。

这样，由于目标组件为覆盖有与至少一个属性对应的至少一个属性层的组件，因此，本公开实施例中可以利用对应于不同的交互操作属性的属性层，实现对目标组件的操控，使得组件操控时所需的交互操作属性能够与组件本身的逻辑代码解耦，从而可以避免出现交互操作属性与组件本身的操作属性发生冲突的问题，减少了经二次开发的组件在交互操作时发生错误几率，提高了组件交互操作时的可靠性。

根据上述应用场景，下面结合图2-图5对本公开实施例提供的组件操控方法进行详细说明，该组件操控方法可以由组件操控装置执行，该组件操控装置可以是单独的设备，也可以是集成于手机、电脑等电子设备中的功能模块，本公开实施例对此不作限定。

图2是根据一示例性实施例示出的一种组件操控方法的流程图。

如图2所示，该组件操控方法具体可以包括如下步骤：

首先，步骤210，在编辑器中的编辑区域显示有目标组件的情况下，检测针对目标组件的第一操作事件；其中，目标组件上覆盖有与至少一个属性对应的至少一个属性层。

接着，步骤220，响应于检测到的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层。

然后，步骤230，根据目标属性层对应的目标属性，对目标组件进行操控。

由此，由于在目标组件上覆盖有与至少一个属性对应的至少一个属性层，因此，在编辑器中的编辑区域显示有该目标组件的情况下，可以通过检测针对该目标组件的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层，进而根据该目标属性层对应的目标属性，对该目标组件进行操控，利用对应于不同的交互操作属性的属性层，实现对目标组件的交互操作，使得交互操作属性能够与目标组件本身的逻辑代码解耦，从而可以避免出现交互操作属性与目标组件本身的操作属性发生冲突的问题，减少了经二次开发的组件在交互操作时发生错误几率，提高了组件交互操作时的可靠性。

下面对上述步骤进行详细说明，具体如下所示：

首先，涉及步骤210，本公开实施例中所涉及的组件，例如可以是文本框组件、按钮组件等，用户可选择需要的组件，并将其添加至编辑器中的编辑区域内，以便对组件进行进一步的操控。具体的，在编辑器中的编辑区域内显示有目标组件的情况下，可实时检测针对目标组件的第一操作事件。

这里，第一操作事件可以是用户针对目标组件进行操作的事件，例如用户单击或双击目标组件时产生的操作事件等，除此之外，第一操作事件也可以是JS模拟事件。通过该JS模拟事件，可以模拟用户对目标组件的操作。

另外，目标组件可以是覆盖有至少一个属性层的组件，其中，属性层可以是用于承载交互操作属性的图层，例如可以是div元素。不同的属性层可对应于目标组件的不同属性，以便于对目标组件进行二次开发时，根据实际需求增加或减少属性层，以增加或减少相应的操作功能。这里，属性可以是目标组件的属性。例如，二次开发时，在需要给目标组件添加缩放功能时，可在目标组件上覆盖与缩放属性对应的缩放层，而在需要给目标组件继续添加旋转功能时，可在目标组件上继续覆盖与旋转属性对应的旋转层。

需要指明的是，本公开实施例中属性层的大小可根据需要进行设置，例如属性层可以是1:1覆盖目标组件，也即属性层的大小可以与目标组件的大小相同，当然，其也可以不仅覆盖目标组件，同时还覆盖目标组件之外预设范围内的区域，例如其大小可以与编辑器中整个编辑区域的大小相同，用于辅助捕获一些特殊的操作事件。

此外，每个属性层均可默认为pointer-events:none状态，以免影响下方的属性层捕捉不到事件，并且属性层中若存在需要捕获事件的节点，则可将节点覆盖pointer-events属性。

在一种可选的实施方式中，上述涉及的属性层可以包括事件层和/或显示层；其中，事件层中包含有需要捕获目标事件的元素，显示层用于显示与显示层对应的显示内容。也即，如果属性层中包含有需要捕获目标事件的至少一个元素，则为事件层；如果属性层中没有需要捕获目标事件的元素，则为显示层。

具体的，事件层可以包括事件捕获层、辅助节点层、事件辅助层等。其中，事件捕获层可用于捕获所有针对目标组件的操作事件，例如对目标组件的点击事件等；辅助节点层中可包括至少一个辅助节点，例如旋转层可包括一个旋转节点、缩放层可包括多个缩放节点等，该层用于捕获针对辅助节点的操作事件；事件辅助层用于捕获特殊的目标事件，以辅助其他层对目标组件进行操控，例如辅助缩放层对目标组件进行缩放等。

另外，显示层可以用于显示对应的显示内容，其中，显示内容包括但不限于与目标组件对应的边框等。

由此，通过将属性层划分为事件层和显示层，可以将需要捕获操作事件的属性层和无需捕获操作事件的属性层区分开，使得事件层可以对应实际操作功能，而显示层仅用于显示，不同操控功能类型对应不同类型的属性层，便于对属性层进行管理，方便对目标组件的操控功能进行增删。

其次，涉及步骤220，在检测到第一操作事件后，可以从目标组件上覆盖的属性层中确定目标属性层。这里，目标属性层可以是能够捕获第一操作事件的事件层，或者显示层。

相应的，在目标属性层为事件层的情况下，上述步骤220，具体可以包括：

确定第一操作事件为目标事件；

将目标组件上覆盖的用于捕获目标事件的至少一个事件层，确定为目标属性层。

这里，由于事件层包含需要捕获目标事件的元素，因此，在确定第一操作事件为目标事件时，可将目标组件上覆盖的事件层中，能够捕获该目标事件的事件层，确定为目标属性层。

示例性的，在检测到用户点击目标组件所产生的mousedown事件时，可将能够捕获mousedown事件的旋转层、缩放层、和/或事件捕获层等，确定为目标属性层。而在检测到用户拖动目标组件所产生的mousemove事件时，可将能够捕获mousemove事件的事件辅助层，确定为目标属性层。

如此，可通过确定第一操作事件对应的事件类型，来确定具体使用那些事件层，作为目标属性层，以利用该层的属性对目标组件进行操控。这样，可以在不侵入组件本身的情况下，利用各层的属性对目标组件进行交互操作，从而避免出现对组件进行操控时，由于交互操作属性与组件本身属性发生冲突，而导致报错的情况。

特殊地，在目标组件覆盖有显示层的情况下，可根据需要设置默认显示或隐藏该显示层。在检测到第一操作事件时，可将显示层确定为目标属性层，进而在后续步骤中响应于该第一操作事件，控制该显示层显示对应的显示内容。

然后，涉及步骤230，由于不同的属性层对应于不同的交互操作属性，因此，可根据目标属性层对应的目标属性，对目标组件进行操控。其中，具体的操控方式可根据目标属性来确定。下面分情况进行具体说明。

在其中一种可能的实施例中，在目标属性层为显示层的情况下，目标属性可以为内容显示属性，相应的，上述步骤230具体可以包括：

在目标组件上，显示该显示层对应的显示内容。

这里，显示内容可以是图形、文字等，例如目标组件的边框，具体在此不作限定。

示例性的，在默认情况下，可设置显示层为隐藏状态，例如隐藏显示层对应的组件边框。当检测到对目标组件的选中操作事件时，可显示该隐藏的组件边框，以标识目标组件处于选中状态。

由此，通过显示该显示层对应的显示内容，可以对目标组件所处的状态进行标识，以便用户对该目标组件进行交互操作。

在另一种可能的实施例中，在目标属性层为事件层的情况下，可根据事件层具体的属性，对目标组件进行操控，下面以事件捕获层、辅助节点层、事件辅助层为例，进行具体说明。

如图3a所示，在上述步骤210-220的基础上，在目标属性层为事件层，且具体为事件捕获层的情况下，目标属性可以为事件捕获属性，相应的，上述步骤230具体可以包括：步骤2301-2303，其中：

步骤2301，在目标属性层为事件层中的事件捕获层的情况下，控制事件捕获层根据捕获的第一操作事件的类型，确定是否将第一操作事件传递给目标组件；若是，则执行步骤2302；若否，则执行步骤2303。

这里，事件捕获层可以捕获所有针对目标组件的操作事件，例如点击该目标组件时，可由事件捕获层来捕获该点击事件，然后事件捕获层可根据第一操作事件的类型，决定是否将第一操作事件传递给目标组件本身。

步骤2302，将第一操作事件传递给目标组件，以根据第一操作事件执行对目标组件本身的操作。

步骤2303，对目标组件执行选中操作，以基于第一操作事件对目标组件上的属性层进行操控。

举例说明，若点击事件为双击事件，则可控制事件捕获层将该双击事件传递给目标组件本身，以对目标组件本身进行操作，例如在目标组件是文本框时，通过双击可激活文本框，进而在文本框中进行文字输入操作；而若点击事件为单击事件，则可控制事件捕获层不将该单击事件传递给目标组件本身，而是通过该单击事件对目标组件执行选中操作。

如此，可通过事件捕获层，选择是否对目标组件本身进行操作，从而将对目标组件本身的操作与二次开发时新增的交互操作进行区分，这样可以减少组件操控过程中可能导致的组件响应混乱的问题。

基于此，在一种可选实施方式中，上述步骤2301，具体可以包括：

在第一操作事件的类型为目标类型的情况下，控制事件捕捉层将第一操作事件传递给目标组件；其中，目标类型包括需要触发目标组件的事件类型。

这里，目标类型例如可以是双击类型，也即，若点击事件为双击事件，则可控制事件捕获层将该双击事件传递给目标组件本身，以对目标组件本身进行操作，而若点击事件不是双击事件，例如是单击事件，则可控制事件捕获层不将该单击事件传递给目标组件本身，而是通过该单击事件对目标组件执行选中操作。

由此，通过在第一操作事件的类型为触发目标组件的事件类型时，才将捕获的第一操作事件传递给目标组件，这样可以防止在对目标组件进行交互操作的过程中，触发目标组件本身的操作，减少误触发概率。

基于此，在一种可选实施方式中，在对目标组件执行选中操作之后，上述涉及的组件操控方法还可以包括：

显示至少一个隐藏的目标属性层。

这里，目标组件上覆盖的所有属性层均可以设置为默认显示或默认隐藏。如此，在目标组件被选中的状态下，可控制默认隐藏的至少一个目标属性层进行显示。

举例说明，如图3b所示，在目标组件30上覆盖有旋转层31、缩放层32、边框层33、事件捕获层34的情况下，在默认状态下，旋转层31、缩放层32和边框层33都是隐藏的，只有事件捕获层34是显示的，此时用户单击目标组件30。事件捕获层34捕获到这个单击事件时，可对目标组件进行选中，然后，在目标组件30处于选中状态期间，可显示隐藏的旋转层31、缩放层32以及边框层33。

这样，通过隐藏一些属性层，仅在被选中时才显示，可以使目标组件在非操控状态下更美观，满足操控属性要求的同时，不影响目标组件的正常使用。

如图4a所示，在上述步骤210-220的基础上，在目标属性层为事件层中的辅助节点层和事件辅助层，且第一操作事件为针对辅助节点层对应的至少一个辅助节点的操作事件的情况下，目标属性可以为边界位置属性，相应的，上述步骤230具体可以包括：

步骤2304，在目标属性层为事件层中的辅助节点层和事件辅助层，且第一操作事件为针对辅助节点层对应的至少一个辅助节点的操作事件的情况下，确定辅助节点层中第一操作事件对应操控的辅助节点，作为目标辅助节点。

这里，辅助节点层例如可以是旋转层、缩放层等。其中，旋转层可以包括一个用于旋转的辅助节点，缩放层可以包括一个或多个用于控制边界大小的缩放节点。用户可以通过操控辅助节点层中的辅助节点，对目标组件进行相应的操控。

示例性的，第一操作事件可以是点击事件，例如mousedown事件。在一个具体例子中，当用户点击缩放层中的一个缩放节点时，可将该缩放节点确定为待操控的目标辅助节点。

步骤2305，接收针对目标辅助节点的第二操作事件；其中，第二操作事件由事件辅助层捕获。

这里，第二操作事件可以是基于第一操作事件的拖拽事件，例如在mousedown事件的基础上由事件辅助层捕获的mousemove事件。由于在利用辅助节点层对目标组件进行移动、旋转、缩放等操控时，需要捕获用户操作的移动方向以及位置，因此，可以相应设置一个事件辅助层，专门用于捕获第二操作事件。

在一个具体例子中，当用户点击缩放层中的一个缩放节点时，可在该点击操作的基础上进行拖拽操作，以对目标组件进行放大或缩小。

步骤2306，获取目标组件的初始边界位置信息。

这里，初始边界位置信息可以是目标组件在位置和/或大小发生改变之前，组件边界的坐标信息。

步骤2307，根据初始边界位置信息和第二操作事件，对目标组件的边界位置进行更新。

举例说明，如图4b所示，目标组件50上除了覆盖有旋转层51、缩放层52、边框层53、以及事件捕获层54之外，在目标组件50以及所有属性层的上，还覆盖有事件辅助层55。当第一操作事件为用户针对旋转层51中的第一辅助节点511的操作事件时，旋转层51捕获点击操作产生的针对第一辅助节点511的mousedown事件。然后，用户拖动第一辅助节点511进行旋转时可产生mousemove事件，事件辅助层55捕获到该事件后，可结合目标组件50初始边界位置坐标，实时计算并确定目标组件50的边界位置坐标，控制目标组件50及其上方覆盖的所有属性层进行旋转操作。当用户离开第一辅助节点511时产生mouseup事件，事件辅助层55捕捉到该mouseup事件时，可计算出最终的边界位置信息，进而对目标组件的边界位置进行更新。

当第一操作事件为用户针对缩放层52中的第二辅助节点521的操作事件时，缩放层52捕获点击操作产生的针对第二辅助节点521的mousedown事件。然后，用户移动第二辅助节点521时可产生mousemove事件，事件辅助层55捕获到该事件后，可结合目标组件50初始边界位置坐标，实时计算并确定目标组件50的边界位置坐标，控制目标组件50及其上方覆盖的所有属性层进行缩放操作。当用户离开第二辅助节点521时产生mouseup事件，事件辅助层55捕捉到该mouseup事件时，可计算出最终的边界位置信息，进而对目标组件的边界位置进行更新。

如此，可通过设置辅助节点层，实现在不对组件本身进行操作的情况下，对组件进行例如旋转、缩放等形式的操控，进而实现组件操控逻辑与组件本身逻辑之间的完全分离，减少了对经二次开发的组件进行旋转、缩放等操控时发生错误的几率，提高了利用辅助节点对组件进行操控时的可靠性。另外，通过设置事件辅助层，辅助其他属性层实现相应的操控功能。同时，由于分层逻辑，使得事件与辅助节点都在单独的属性层中，互不干涉，因此，在对组件进行操控时出现错误的概率极低，从而极大地提高了利用辅助节点对组件进行操控时的可靠性。

具体的，在目标组件上覆盖包括旋转层、缩放层等多个属性层时，呈现的3D透视图可如图5所示。

基于此，在事件辅助层为隐藏状态的情况下，在步骤2304之后，步骤2305之前，上述组件操控方法还可以包括：

显示事件辅助层。

这里，可将事件辅助层默认设置为隐藏状态，也即，在没有触发辅助节点层之前，事件辅助层处于隐藏状态，而在触发辅助节点层中的某个辅助节点之后，可显示该事件辅助层。例如，用户点击缩放层中任意一个节点，缩放层可捕获到针对该节点的mousedown事件，此时外层用于捕获mousemove事件的事件辅助层显示，这样，当用户移动鼠标产生mousemove事件时，事件辅助层可捕捉到该事件。

由此，通过配合辅助节点层，在确定对辅助节点层中的目标辅助节点进行操控时，对隐藏的事件辅助层进行显示，可以利用事件辅助层捕捉相应的拖拽事件，结合目前目标组件的宽、高、左边界、右边界等位置属性重新计算并设置目标组件及其上覆盖的其他属性层的宽、高、左边界、右边界等，这样，可以保证基于辅助节点层的交互操作的顺利执行。

另外，在一种可选实施方式中，在步骤2307之后，上述组件操控方法还可以包括：

接收针对目标辅助节点的第三操作事件；其中，第三操作事件由事件辅助层捕获；

响应于第三操作事件，隐藏事件辅助层。

这里，第三操作事件可以是结束事件，例如mouseup事件。

在一个具体例子中，当用户松开鼠标，事件辅助层可以捕捉到mouseup事件，此时，事件辅助层隐藏。

由此，通过在结束对辅助节点层中节点的操控后，及时隐藏该事件辅助层，可以防止事件辅助层的误触发，只是在操作节点时事件辅助层才会发挥辅助作用，进而可以进一步降低交互操作出现错误的概率。

基于此，在上述各实施例的基础上，一种可选实施方式是，目标组件上还可以覆盖有层容器，各属性层均放置于该层容器中；其中，该层容器可用于使属性层与目标组件的边界位置保持重合。

这里，层容器的大小可以与目标组件大小相同，也即，可以通过绝对定位的方式，始终保持层容器与目标组件1:1重合，同时，将覆盖在目标组件上的各属性层放置在层容器中，这样，在目标组件的位置或大小发生改变时，可通过层容器控制各属性层与目标组件始终保持边界重合，简化控制逻辑。

如图6所示，为层容器61以及各属性层62覆盖于目标组件60的示意图。当目标组件60的边界位置发生改变时，层容器61可控制各属性层62与目标组件60的边界位置保持重合。

在上述各实施例的基础上，举一个实际例子，以对目标组件进行二次开发，实现缩放和旋转功能为例，如图7所示，具体实现过程如下：

首先，添加待处理的目标组件70，并获取目标组件70的边界位置信息，例如宽、高、top、left属性，具体的，可使用逐级向上offset累加的方式，也可以使用高级浏览器提供的getBoundClientRectAPI等方式来获取边界位置信息。

然后，创建层容器71，令其宽、高、top、left和该目标组件70保持一致，做到1：1覆盖。

接着，在层容器71中，依次创建用于捕获用户点选组件的事件捕获层72，用于显示选中状态的边框层73，用于显示缩放操作时所需节点的缩放层74，用于显示旋转按钮的旋转层75，以及用于捕获特殊事件的事件辅助层76。其中，事件捕获层72位于各属性层中的最底层，负责按需兜底所有落在组件上的事件，例如捕捉click事件；边框层73设置为pointer-events:none属性，且不捕捉任何事件；缩放层74设置为pointer-events:none属性，但其中的8个辅助节点741设置为pointer-events:all属性；旋转层75设置为pointer-events:none属性，但其中的辅助旋钮751设置为pointer-events:all属性；事件辅助层76位于所有属性层中的最外层，负责捕获一些特殊事件，辅助其他属性层实现相应的操控功能，例如捕获mousemove事件。上述所有属性层以及层容器，均可设置为pointer-events:none属性。

另外，在默认状态下，可设置事件捕获层72、边框层73、缩放层74、以及旋转层75，都是隐藏的，而事件捕获层72是显示的。

最终，可使经二次开发后的目标组件呈现出如图7所示的组件结构。

下面，结合上述经二次开发的目标组件，以控制该目标组件进行缩放为例，详细说明本公开实施例提供的组件操控方法，具体如下所示：

首先，如图8所示，在用户点击目标组件70后，事件捕获层捕获点击操作所产生的click事件，并在确定click事件为单击事件后，控制目标组件70进入选中状态，此时，旋转层、缩放层以及边框层均显示，也即在目标组件70上显示相应的辅助旋钮751、辅助节点741以及边框731。

然后，接收用户针对缩放层上任一辅助节点741的点击操作，也即捕获针对缩放层上任一辅助节点741的mousedown事件，此时，事件辅助层显示。在此基础上，接收用户针对该辅助节点741的鼠标移动操作，通过事件辅助层捕获移动时产生的mousemove事件，进而结合目标组件70的宽、高、top、left，重新计算并设置组件与覆盖层容器的宽、高、top、left。

最后，在接收到用户松开鼠标时产生的mouseup事件时，控制外层辅助层隐藏。

需要说明的是，上述本公开实施例描述的应用场景是为了更加清楚的说明本公开实施例的技术方案，并不构成对于本公开实施例提供的技术方案的限定，本领域普通技术人员可知，随着新应用场景的出现，本公开实施例提供的技术方案对于类似的技术问题，同样适用。

基于相同的发明构思，本公开还提供了一种组件操控装置。具体结合图7进行详细说明。

图9是根据一示例性实施例示出的一种组件操控装置的结构示意图。

如图9所示，该组件操控装置90具体可以包括：

操作检测模块901，被配置为执行在编辑器中的编辑区域显示有目标组件的情况下，检测针对目标组件的第一操作事件；其中，目标组件上覆盖有与至少一个属性对应的至少一个属性层，属性为目标组件的属性；

目标确定模块902，被配置为执行响应于检测到的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层；

属性操控模块903，被配置为执行根据目标属性层对应的目标属性，对目标组件进行操控。

下面对上述组件操控装置90进行详细说明，具体如下所示：

在其中一个实施例中，上述涉及的属性层包括事件层和/或显示层；其中，事件层中包含有需要捕获目标事件的元素，显示层用于显示与显示层对应的显示内容。

基于此，在其中一个实施例中，在目标属性层为事件层的情况下，上述涉及的目标确定模块，可以包括：事件确定子模块和事件捕获子模块，其中：

事件确定子模块，被配置为执行确定第一操作事件为目标事件；

事件捕获子模块，被配置为执行将目标组件上覆盖的用于捕获目标事件的至少一个事件层，确定为目标属性层。

另外，在其中一个实施例中，在目标属性层为显示层的情况下，目标属性为内容显示属性；

上述涉及的属性操控模块，可以包括：内容显示子模块，其中：

内容显示子模块，被配置为执行在目标组件上，显示显示层对应的显示内容。

在其中一个实施例中，在事件层为事件捕获层的情况下，目标属性为事件捕获属性；

上述涉及的属性操控模块，可以包括：传递确定子模块、事件传递子模块和组件选中子模块，其中：

传递确定子模块，被配置为执行控制事件捕获层根据捕获的第一操作事件的类型，确定是否将第一操作事件传递给目标组件；

事件传递子模块，被配置为执行在确定传递的情况下，将第一操作事件传递给目标组件，以根据第一操作事件执行对目标组件本身的操作；

组件选中子模块，被配置为执行在确定不传递的情况下，对目标组件执行选中操作，以基于所述第一操作事件对所述目标组件上的属性层进行操控。

在其中一个实施例中，上述涉及的传递确定子模块，包括：

传递控制单元，被配置为执行在所述第一操作事件的类型为目标类型的情况下，控制所述事件捕捉层将所述第一操作事件传递给所述目标组件；

其中，所述目标类型包括需要触发所述目标组件的事件类型。

基于此，在其中一个实施例中，上述涉及的属性操控模块还可以包括：属性层显示子模块，其中：

属性层显示子模块，被配置为执行在对目标组件执行选中操作之后，显示至少一个隐藏的目标属性层。

在其中一个实施例中，在事件层包括辅助节点层和事件辅助层，且第一操作事件为针对辅助节点层对应的至少一个辅助节点的操作事件的情况下，目标属性为边界位置属性；

上述涉及的属性操控模块，可以包括：节点确定子模块、第二事件接收子模块、位置获取子模块和位置更新子模块，其中：

节点确定子模块，被配置为执行确定辅助节点层中第一操作事件对应操控的辅助节点，作为目标辅助节点；

第二事件接收子模块，被配置为执行接收针对目标辅助节点的第二操作事件；其中，第二操作事件由事件辅助层捕获；

位置获取子模块，被配置为执行获取目标组件的初始边界位置信息；

位置更新子模块，被配置为执行根据初始边界位置信息和第二操作事件，对目标组件的边界位置进行更新。

基于此，在其中一个实施例中，在事件辅助层为隐藏状态的情况下，上述涉及的属性操控模块还可以包括：辅助层显示子模块，其中：

辅助层显示子模块，被配置为执行在确定辅助节点层中第一操作事件对应操控的辅助节点，作为目标辅助节点之后，接收针对目标辅助节点的第二操作事件之前，显示事件辅助层。

另外，在其中一个实施例中，上述涉及的属性操控模块还可以包括：第三事件接收子模块和辅助层隐藏子模块，其中：

第三事件接收子模块，被配置为执行在根据初始边界位置信息和第二操作事件，对目标组件的边界位置进行更新之后，接收针对目标辅助节点的第三操作事件；其中，第三操作事件由事件辅助层捕获；

辅助层隐藏子模块，被配置为执行响应于第三操作事件，隐藏事件辅助层。

基于此，在其中一个实施例中，上述涉及的目标组件上覆盖有层容器，属性层放置于层容器中；其中，层容器用于使属性层与目标组件的边界位置保持重合。

由此，本公开实施例由于目标组件上覆盖有与至少一个属性对应的至少一个属性层，因此，在编辑器中的编辑区域显示有该目标组件的情况下，可以通过检测针对该目标组件的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层，进而根据该目标属性层对应的目标属性，对该目标组件进行操控，利用对应于不同的交互操作属性的属性层，实现对目标组件的交互操作，使得交互操作属性能够与目标组件本身的逻辑代码解耦，从而可以避免出现交互操作属性与目标组件本身的操作属性发生冲突的问题，减少了经二次开发的组件在交互操作时发生错误几率，提高了组件交互操作时的可靠性。

基于同一发明构思，本公开实施例还提供了一种电子设备，具体结合图10进行详细说明。

图10是根据一示例性实施例示出的一种电子设备的结构框图。

如图10所示，该电子设备100能够实现根据本公开实施例中的组件操控方法以及组件操控装置的电子设备的示例性硬件架构的结构图。该电子设备可以是手机、便携式计算机、台式计算机、平板电脑等客户端设备。

该电子设备100可以包括处理器1001以及存储有计算机程序指令的存储器1002。

具体地，上述处理器1001可以包括中央处理器(CPU)，或者特定集成电路(application specific integrated circuit，ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

存储器1002可以包括用于信息或指令的大容量存储器。举例来说而非限制，存储器1002可包括硬盘驱动器(hard disk drive，HDD)、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线(universal serial bus，USB)驱动器或者两个及其以上这些的组合。在合适的情况下，存储器1002可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器1002可在综合网关设备的内部或外部。在特定实施例中，存储器1002是非易失性固态存储器。在特定实施例中，存储器1002包括只读存储器(ROM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(PROM)、可擦除PROM(EPROM)、电可擦除PROM(EEPROM)、电可改写ROM(EAROM)或闪存，或者两个或及其以上这些的组合。

处理器1001通过读取并执行存储器1002中存储的计算机程序指令，以执行如下步骤：

处理器1001，执行在编辑器中的编辑区域显示有目标组件的情况下，检测针对目标组件的第一操作事件；其中，目标组件上覆盖有与至少一个属性对应的至少一个属性层，属性为目标组件的属性；

响应于检测到的第一操作事件，从目标组件上覆盖的属性层中确定目标属性层；

根据目标属性层对应的目标属性，对目标组件进行操控。

在其中一个实施例中，处理器1001具体执行确定第一操作事件为目标事件；

将目标组件上覆盖的用于捕获目标事件的至少一个事件层，确定为目标属性层。

基于此，在其中一个实施例中，上述涉及的处理器1001具体还执行在目标组件上，显示显示层对应的显示内容。

此外，在其中一个实施例中，处理器1001具体还执行控制事件捕获层根据第一操作事件的类型，确定是否将第一操作事件传递给目标组件；

在确定传递的情况下，将第一操作事件传递给目标组件，以根据第一操作事件执行对目标组件本身的操作；

在确定不传递的情况下，对目标组件执行选中操作，以基于选中操作对目标组件进行操控。

在其中一个实施例中，处理器1001具体还执行在第一操作事件的类型为目标类型的情况下，控制事件捕捉层将第一操作事件传递给目标组件；其中，目标类型包括需要触发目标组件的事件类型。

在其中一个实施例中，处理器1001具体还执行显示至少一个隐藏的目标属性层。

基于此，在其中一个实施例中，上述涉及的处理器1001具体还执行确定辅助节点层中第一操作事件对应操控的辅助节点，作为目标辅助节点；

接收针对目标辅助节点的第二操作事件；其中，第二操作事件由事件辅助层捕获；

获取目标组件的初始边界位置信息；

根据初始边界位置信息和第二操作事件，对目标组件的边界位置进行更新。

在其中一个实施例中，上述涉及的处理器1001具体还执行显示事件辅助层。

在其中一个实施例中，上述涉及的处理器1001具体还执行接收针对目标辅助节点的第三操作事件；其中，第三操作事件由事件辅助层捕获；

响应于第三操作事件，隐藏事件辅助层。

在一个示例中，该电子设备100还可包括收发器1003和总线1004。其中，如图10所示，处理器1001、存储器1002和收发器1003通过总线1004连接并完成相互间的通信。

总线1004包括硬件、软件或两者。举例来说而非限制，总线可包括加速图形端口(AGP)或其他图形总线、增强工业标准架构(EISA)总线、前端总线(FSB)、超传输(HT)互连、工业标准架构(ISA)总线、无限带宽互连、低引脚数(LPC)总线、存储器总线、微信道架构(MCA)总线、外围控件互连(PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(SATA)总线、视频电子标准协会局部(VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线1004可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

本公开实施例还提供了一种计算机存储介质，所述计算机存储介质中存储有计算机可执行指令，所述计算机可执行指令用于实现本公开实施例所记载的组件操控方法。

在一些可能的实施方式中，本公开提供的方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在计算机设备上运行时，所述程序代码用于使所述计算机设备执行本说明书上述描述的根据本公开各种示例性实施方式的方法中的步骤，例如，所述计算机设备可以执行本公开实施例所记载的组件操控方法。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于：电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本公开是参照根据本公开的方法、设备和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程信息处理设备的处理器以产生一个机器，使得通过计算机或其他可编程信息处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程信息处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程信息处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本公开进行各种改动和变型而不脱离本公开的精神和范围。这样，倘若本公开的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包含这些改动和变型在内。