CN114579028A - 一种界面截图方法、装置、计算机设备以及存储介质 - Google Patents

一种界面截图方法、装置、计算机设备以及存储介质 Download PDF

Info

Publication number
CN114579028A
CN114579028A CN202210211121.5A CN202210211121A CN114579028A CN 114579028 A CN114579028 A CN 114579028A CN 202210211121 A CN202210211121 A CN 202210211121A CN 114579028 A CN114579028 A CN 114579028A
Authority
CN
China
Prior art keywords
control
interface
flutter
screenshot
target
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
Application number
CN202210211121.5A
Other languages
English (en)
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.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology 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 Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN202210211121.5A priority Critical patent/CN114579028A/zh
Publication of CN114579028A publication Critical patent/CN114579028A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • 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/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • 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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/547—Remote procedure calls [RPC]; Web services

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Debugging And Monitoring (AREA)

Abstract

本公开提供了一种界面截图方法、装置、计算机设备以及存储介质，其中，该方法包括：获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；根据控件结构信息在展示界面上展示多个视图控件，并检测对多个视图控件的选择操作；确定选择操作所对应的目标视图控件，并基于目标视图控件生成界面截取请求；向终端设备发送所述界面截取请求，并获取终端设备反馈的截图结果。在本公开实施例中，在确定出目标视图控件后，就可以通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。

Description

一种界面截图方法、装置、计算机设备以及存储介质
技术领域
本公开涉及计算机的技术领域，具体而言，涉及一种界面截图方法、装置、计算机设备以及存储介质。
背景技术
随着应用平台的发展，不同平台之间由于编程语言差异，可以进行跨平台开发的Flutter平台逐渐普及。然而，在进行应用调试时，在Flutter平台中并没有对应的截图工具。此时，通过应用终端内的原生截图工具进行截图时，可以对显示在终端的展示界面进行全屏截图，而无法对应用中的某个单独界面组件进行针对性截图，因此，无法使用户直观的观察到界面组件的渲染效果。
发明内容
本公开实施例至少提供一种界面截图方法、装置、计算机设备以及存储介质。
第一方面，本公开实施例提供了一种界面截图方法，应用于Flutter性能调试程序，包括：
获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
一种可选的实施方式中，所述获取Flutter应用的目标页面中所包含各个视图控件的控件结构信息，包括：
获取Flutter应用的目标页面中所包含各个视图控件的控件结构树；其中，所述控件结构树包含多个节点和各个节点之间的层级关系，每个节点对应所述目标页面中的一个视图控件。
一种可选的实施方式中，所述根据所述控件结构信息在展示界面上展示所述多个视图控件，并检测对所述多个视图控件的选择操作，包括：
在所述展示界面上展示所述控件结构树；在检测到用户对所述控件结构树中节点的点击操作的情况下，确定检测到对所述多个视图控件的选择操作。
一种可选的实施方式中，在获取所述终端设备反馈的截图结果之后，所述方法还包括：
在所述Flutter性能调试程序的展示界面展示编辑窗口，并在所述编辑窗口中展示所述截图结果；响应于用户对所述编辑窗口中所展示的截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果。
一种可选的实施方式中，所述响应于用户对所述截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果，包括：
检测用户对所述编辑窗口中所展示的编辑工具标识的触发操作，并确定用户所触发的编辑工具标识的编辑类型；对所述截图结果进行与所述编辑类型相匹配的编辑处理，得到所述编辑之后的截图结果。
一种可选的实施方式中，在获取目标应用的目标页面中所包含各个视图控件的控件结构信息之前，所述方法还包括：
建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；基于所述WebSockt通信连接向所述Flutter应用发送数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；获取所述Flutter应用基于所述数据同步请求反馈的所述控件结构信息。
一种可选的实施方式中，所述向终端设备发送所述界面截取请求，包括：
调用所述Flutter性能调试程序中的调试扩展应用；基于所述Flutter性能调试程序中的调试扩展应用向所述终端设备发送所述界面截取请求。
第二方面，本公开实施例提供了一种界面截图方法，应用于运行有Flutter应用的设备，包括：
获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
一种可选的实施方式中，所述基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，包括：
确定所述控件标识信息所对应的目标视图控件，并获取所述目标视图控件的渲染数据；基于所述渲染数据生成所述目标视图控件的界面视觉图像。
一种可选的实施方式中，所述基于所述渲染数据生成所述目标视图控件的界面视觉图像，包括：
基于所述目标视图控件的渲染数据在所述Flutter应用中对相应视图控件进行渲染，得到渲染结果；确定所述渲染结果的渲染截图结果，并基于所述渲染截图结果确定所述界面视觉图像。
一种可选的实施方式中，在向Flutter性能调试程序发送所述控件结构信息之前，所述方法还包括：
建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；获取所述述Flutter性能调试程序基于所述WebSocke通信连接发送的数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；基于所述数据同步请求获取所述目标页面中各个视图控件的控件结构信息，并向所述Flutter性能调试程序发送所述控件结构信息。
一种可选的实施方式中，所述将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序，包括：
调用所述Flutter应用中的调试扩展应用；基于所述Flutter应用中的调试扩展应用向所述Flutter性能调试程序发送所述截图结果。
第三方面，本公开实施例还提供一种界面截图装置，包括：
第一获取单元，用于获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；展示单元，用于根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；第一确定单元，用于确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；第二获取单元，用于向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
第四方面，本公开实施例还提供一种界面截图装置，包括：
第三获取单元，用于获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；接收单元，用于接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；第二确定单元，用于基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
第五方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面至第二方面中任一种可能的实施方式中的步骤。
第六方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面至第二方面中任一种可能的实施方式中的步骤。
本公开实施例提供了一种界面截图方法、装置、计算机设备以及存储介质。在本公开实施例中，首先在Flutter平台的展示界面上展示目标应用中目标页面的多个视图控件，并通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种界面截图方法的流程图；
图2示出了本公开实施例所提供目标界面的部分视图控件在展示界面上的展示方式的示意图；
图3示出了本公开实施例所提供的一种编辑窗口的展示方式的示意图；
图4示出了本公开实施例所提供的另一种界面截图方法的流程图；
图5示出了本公开实施例所提供的一种界面截图装置的示意图；
图6示出了本公开实施例所提供的另一种界面截图装置的示意图；
图7示出了本公开实施例所提供的一种计算机设备的示意图；
图8示出了本公开实施例所提供的另一种计算机设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
经研究发现，由于不同应用平台之间存在编程语言差异，可以进行跨平台开发的Flutter平台逐渐普及。然而，在进行应用调试时，在Flutter平台中并没有对应的截图工具。此时，通过应用终端内的原生截图工具进行截图时，可以对显示在终端的展示界面进行全屏截图，而无法对应用中的某个单独界面组件进行针对性截图，因此，无法使用户直观的观察到界面组件的渲染效果。
基于上述研究，本公开提供了一种界面截图方法、装置、计算机设备以及存储介质。在本公开实施例中，首先在Flutter平台的展示界面上展示目标应用中目标页面的多个视图控件，并通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种界面截图方法进行详细介绍，本公开实施例所提供的界面截图方法的执行主体一般为具有一定计算能力的计算机设备。在一些可能的实现方式中，该界面截图方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。计算机设备中安装有Flutter性能调试程序，其中，该Flutter性能调试程序可以接收Flutter应用反馈的截图结果，该截图结果为Flutter应用的功能页面中的目标视图控件在终端设备的渲染区域的图像，以使用户能够基于该截图结果对目标视图控件的渲染效果进行分析。
参见图1所示，为本公开实施例提供的一种界面截图方法的流程图，应用于Flutter性能调试程序，所述方法包括步骤S101～S107，其中：
S101：获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系。
在本公开实施例中，首先需要确定Flutter应用中的目标页面，其中，该Flutter应用中包含多个功能页面，该目标页面为该Flutter应用中的功能页面。这里，该Flutter应用可以理解为基于Flutter框架开发的应用程序。
在本公开实施例中，上述目标页面中包含多个视图控件，其中，该目标页面的视图控件之间具有层级关系。例如，该视图控件可以为用于展示图片的图片控件，其中，该图片控件中还可以包含按钮控件，该按钮控件可以用于显示对应的文字。这里，该按钮控件可以理解为嵌套在图片控件内的控件。
这里，首先可以将该Flutter应用的全部功能页面显示在Flutter性能调试程序的展示界面上，然后就可以将用户在全部功能页面中选中的功能页面确定为目标页面；之后，就可以获取该目标页面中所包含的各个视图控件，以及各个视图控件之间的控件结构信息。
在本公开实施例中，Flutter性能调试程序可以为Flutter Devtools工具，除此之外，还可以为其他的Flutter调试工具，本公开对此不作具体限定。
S103：根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作。
在本公开实施例中，可以根据各个视图控件之间的控件结构信息，在展示界面上展示目标页面中所包含的多个视图控件。这里，该目标页面的部分视图控件在展示界面上的展示方式可以为如图2所示的展示方式，其中，图2所展示的目标页面为Flutter应用的主页面。
如图2所示，该主页面由多个界面控件组成，这里的界面控件可以分为结构控件和视图控件，例如，该界面控件可以为页面框架以及页面视图等结构控件，还可以为图片控件等视图控件。这里，如图2所示，该图片控件还包含按钮控件1，按钮控件2，按钮控件3和标签控件等控件。
另外的，如图2所示，还可以通过每个界面控件所对应的收起/展开按钮，对该界面控件的层级关系进行展开或者收起。例如，在通过收起/展开按钮对按钮控件1的层级关系进行展开时，可以看到该按钮控件1中包含本文。需要说明的是，如图2所示，上述收起/展开按钮在处于展开或者收起状态时的形态可以是不同的，例如，该收起/展开按钮包含展开形态和收起形态。
S105：确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息。
在本公开实施例中，用户可以在展示界面上通过选择操作，选择想要截取的目标视图控件。例如，如图2所示，当用户想截取按钮控件1时，可以通过选择操作选择该按钮控件1为目标视图控件。
在本公开实施例中，在通过选择操作确定出目标视图控件后，就可以获取该目标视图控件的控件信息，并基于该控件信息生成针对该目标视图控件的界面截取请求。
这里，该控件信息可以该目标视图控件的控件标识，例如，该控件标识可以为以下至少之一：控件id、该目标视图控件在目标页面中的位置信息、该目标视图控件的在Flutter应用中的渲染区域等标识信息。
S107：向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
在本公开实施例中，在向终端设备发送所述界面截取请求之前，可以建立Flutter性能调试程序和Flutter应用之间的通信连接，然后就可以基于该通信连接向安装有Flutter应用的终端设备发送界面截取请求。
终端设备在获取到上述界面截取请求后，就可以基于该界面截取请求中所携带的控件信息确定需要截取的目标视图控件，并确定该目标视图控件在该终端设备的渲染区域。然后，终端设备就可以截取该渲染区域的图像，得到目标视图控件的截图结果，并通过建立的通信连接将该截图结果反馈至终端设备，以使终端设备获取该目标视图控件的截图结果。
通过上述描述可知，在本公开实施例中，首先在Flutter平台的展示界面上展示目标应用中目标页面的多个视图控件，并通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。
在一个可选的实施方式中，上述步骤S101，获取Flutter应用的目标页面中所包含各个视图控件的控件结构信息，具体包括如下过程：
获取Flutter应用的目标页面中所包含各个视图控件的控件结构树；其中，所述控件结构树包含多个节点和各个节点之间的层级关系，每个节点对应所述目标页面中的一个视图控件。
在本公开实施例中，目标页面的控件结构树可以用于指示该目标页面的各个视图控件的控件结构信息，即各个视图控件之间的层级关系。
这里，控件结构树中包含多个节点，每个节点对应目标页面中的一个视图控件。该控件结构树中的多个节点包含对应的层级关系，以通过该节点之间的层级关系表示对应视图控件之间的层级关系。
这里，上述各视图控件之间层级关系可以用于指示各视图控件之间的堆叠关系以及排列顺序，因此，该控件结构树中包含该各个节点之间的堆叠关系以及排列顺序。
具体的，上述堆叠关系可以用于指示多个节点之间的包含关系，例如，图片控件A中包含按钮控件1以及按钮控件2。上述排列顺序可以用于指示多个视图控件在目标页面上的排布位置，例如，在目标页面中，图片控件A位于图片控件B的上方，那么，在控件结构树中，图片控件A的排列顺序可以位于图片控件B之前。
在本公开实施例中，可以通过遍历控件结构树中各节点之间的层级关系，来确定各个视图控件之间的层级关系(即，上述控件结构信息)。通过该处理方式，可以准确的得到目标页面中各视图控件的控件结构信息。
在一个可选的实施方式中，上述步骤S103，根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作，具体包括如下过程：
S1031：在所述展示界面上展示所述控件结构树。
在本公开实施例中，在获取到目标页面所对应的控件结构树后，就可以基于该控件结构树所指示的各个节点之间的层级关系，在Flutter性能调试程序的展示界面上展示该控件结构树。
具体实施时，首先需要确定该控件结构树的根节点，然后再基于该根节点将该控件结构按照各个节点之间的层级关系展示在Flutter性能调试程序的展示界面上。这里，根节点为不存在父节点的节点，例如，如图2所示，该目标页面的根节点可以为主页面。
S1032：在检测到用户对所述控件结构树中节点的点击操作的情况下，确定检测到对所述多个视图控件的选择操作。
在本公开实施例中，在检测到针对控件结构树中节点的点击操作后，首先可以确定该点击操作所选择的节点，然后，可以判断该节点所对应的视图控件是否在终端设备的展示界面上进行了渲染。
需要说明的是，在上述控件结构树中的节点为页面框架等结构控件的情况下，该结构控件在展示界面上实际并未展示，因此也不需要渲染在展示界面上。
因此，可以在上述点击操作所点击的节点对应的视图控件在终端设备的展示界面上进行了渲染的情况下，确定检测到针对该节点所对应的视图控件的选择操作，即确定该视图控件为目标视图控件。
通过上述描述可知，可以将控件结构树展示在展示界面上，并检测用户针对控件结构树中节点的点击操作，从而便于用户根据目标页面的控件结构树确定想要选择的视图控件。
在一个可选的实施方式中，在获取所述终端设备反馈的截图结果之后，所述方法还包括如下过程：
(1)、在所述Flutter性能调试程序的展示界面展示编辑窗口，并在所述编辑窗口中展示所述截图结果；
(2)、响应于用户对所述编辑窗口中所展示的截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果。
在本公开实施例中，上述Flutter性能调试程序在获取到终端设备反馈的截图结果后，就可以在展示界面内建立用于展示该截图结果的编辑窗口。
具体的，可以通过以下集中方式在展示上述编辑窗口。
方式一：
具体地，可以在展示界面上建立蒙层，并在该蒙层上展示编辑窗口，并在该编辑窗口中展示上述截图结果。另外的，该编辑窗口中还包含退出标识，用户可以通过触发该退出标识退出该截图结果的编辑窗口，并关闭蒙层。
方式二：
如图3所示为编辑窗口的另一种展示方式。在本公开实施例中，Flutter性能调试程序中还可以包含图片编辑功能。该Flutter性能调试程序在获取到截图结果后，就可以在展示界面上建立蒙层，并在该蒙层上展示编辑窗口，并在该编辑窗口中展示上述截图结果。另外的，上述图片编辑功能在建立编辑窗口时，还可以在该编辑窗口的两侧设置工具栏，该工具栏中包含用于对截图结果进行编辑操作的编辑工具的编辑工具标识。例如，绘画标识、涂色标识等编辑工具标识。
在本公开实施例中，在对编辑窗口中展示的截图结果进行编辑操作时，可以通过选择对应的编辑工具标识对该截图结果进行编辑操作，从而实现对该截图结果的修改，进而调整该截图结果的视觉效果，以使研发人员能够根据调整之后的截图结果，调整该截图结果所对应的目标视图控件的参数，从而改善该目标视图控件在终端设备的渲染效果。
在一个可选的实施方式中，上述步骤响应于用户对所述截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果，包括如下过程：
(1)、检测用户对所述编辑窗口中所展示的编辑工具标识的触发操作，并确定用户所触发的编辑工具标识的编辑类型；
(2)、对所述截图结果进行与所述编辑类型相匹配的编辑处理，得到所述编辑之后的截图结果。
具体实施时，在检测到用户对编辑窗口中所展示的编辑工具标识的触发操作之后，可以确定用户所触发的编辑工具标识的编辑类型，进而对截图结果进行与所述编辑类型相匹配的编辑处理。
举例来说，以图3为例，图3所展示的编辑窗口中包含的编辑工具标识为涂色标识以及绘画标识。
涂色标识所对应的编辑工具为涂色工具，用户可以通过该涂色工具改变该截图结果至少部分图像区域的颜色。例如，用户可以在截图结果中选择需要改变颜色的修改区域，然后选择想要的颜色进行涂色。上述绘画标识对应的编辑工具为绘画工具，用户可以通过该绘画工具在截图结果中绘制想要的图案，或者对该截图结果进行标注。
具体实施时，用户可以首先在截图结果中确定待填涂区域。之后，可以检测用户对涂色标识的触发操作。接下来，可以在编辑窗口的右侧与绘画标识相邻的位置展示至少一种颜色。此时，用户可以在至少一种颜色中选择需要进行填涂的颜色，例如，用户可以点击某一种颜色的标识。在确定出需要进行填涂的颜色之后，就可以将待填涂区域中的填涂颜色修改为用户所选择的颜色。
需要说明的是，上述编辑工具的还可以为其他能够进行图片编辑的工具，具体的编辑工具的类型可以根据用户的编辑需求进行设置，从而满足用户的使用需求，本公开对编辑工具的类型不做具体限定。
在本公开实施例中，用户可以通过不同的编辑工具对截图结果进行编辑处理，从而改变该截图结果的视觉效果，使得得到的编辑之后的截图结果在视觉效果上能够满足用户的需求。
在一个可选的实施方式中，在获取目标应用的目标页面中所包含各个视图控件的控件结构信息之前，所述方法还包括如下过程：
(1)、建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；
(2)、基于所述WebSockt通信连接向所述Flutter应用发送数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；
(3)、获取所述Flutter应用基于所述数据同步请求反馈的所述控件结构信息。
在本公开实施例中，首先可以通过WebSocket协议，建立Flutter应用和所述Flutter性能调试程序之间的通信连接。具体的，可以在Flutter应用中构建一个WebSocket实例，并为该WebSocket实例设置Flutter性能调试程序的地址。
在建立该Flutter应用和Flutter性能调试程序之间的通信连接时，Flutter应用可以通过构建的WebSocket实例向Flutter性能调试程序发送连接请求，该Flutter性能调试程序在接收到该连接请求后，就可以根据该连接请求向Flutter应用发送同意连接的连接信号，从而建立起Flutter应用和Flutter性能调试程序之间的WebSocket通信连接。
在建立起Flutter应用和Flutter性能调试程序之间的WebSocket通信连接，Flutter性能调试程序就可以基于该WebSocket通信连接向Flutter应用发送目标页面的控件结构信息的数据同步请求。Flutter应用在获取到该数据同步请求后，就可以确定该同步请求所指示的目标页面，并获取该目标页面的各个视图控件之间的层级结构。然后，该Flutter应用就可以通过WebSocket通信连接，向Flutter性能调试程序反馈该控件结构信息。
通过上述描述可知，Flutter性能调试程序通过WebSockt通信连接向Flutter应用发送控件结构信息的同步请求，并基于该WebSockt通信连接获取Flutter应用反馈的控件结构信息，从而完成Flutter性能调试程序和Flutter应用之间的数据交互，提高控件结构信息获取的效率。
在一个可选的实施方式中，上述步骤S107，向终端设备发送所述界面截取请求，具体包括如下过程：
S1071：调用所述Flutter性能调试程序中的调试扩展应用。
在本公开实施例中，上述Flutter性能调试程序中包含调试扩展应用，其中，该调试扩展应用可以基于WebSocket通信连接，进行Flutter性能调试程序和Flutter应用之间的数据传输，其中，该调试扩展应用可以为extension应用。
S1072：基于所述Flutter性能调试程序中的调试扩展应用向所述终端设备发送所述界面截取请求。
在本公开实施例中，在确定出上述目标视图控件后，就可以基于该目标视图控件的控件信息生成界面截取请求。在确定出该界面截取请求后，就可以调用Flutter性能调试程序中的调试扩展应用，以使该调试扩展应用基于WebSocket通信连接，将上述界面截取请求传输给Flutter应用。
通过上述描述可知，通过调用Flutter性能调试程序中的调试扩展应用，可以将界面截取请求传输给Flutter应用，从而使得Flutter应用能够基于该界面截取请求确定截图结果，实现了Flutter性能调试程序和Flutter应用之间的跨平台通信。
本公开实施例所提供的界面截图方法适用于运行有Flutter应用的设备，其中，在该设备中安装有基于Flutter框架搭建的目标应用，该目标应用包含多个功能页面，该功能页面由多个具有堆叠关系的视图控件组成。
参见图4所示，为本公开实施例提供的一种界面截图方法的流程图，应用于运行有Flutter应用的设备，所述方法包括步骤S401～S405，其中：
S401：获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系。
在本公开实施例中，在获取到Flutter性能调试程序发送的数据同步请求后，就可以确定该数据同步请求所指示的目标页面，并获取该目标页面中各个视图控件之间的控件结构信息。
具体实施时，首先可以获取该目标页面所对应的控件结构树，并将该控件结构树发送至Flutter性能调试程序，以使该Flutter性能调试程序展示该控件结构树；或者，在获取到该控件结构树后，就可以基于该控件结构树确定出目标页面的各个视图控件的层级关系，从而确定出该目标页面所对应的控件结构信息，并将该控件结构信息发送至Flutter性能调试程序，以使该Flutter性能调试程序展示该控件结构信息。
S403：接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识。
在本公开实施例中，在和Flutter性能调试程序之间建立通信连接后，就可以通过该通信连接实时获取Flutter性能调试程序发送的界面截图请求，其中，该界面截图请求可以包含截取的目标视图控件的控件标识。
S405：基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
在本公开实施例中，首先可以通过控件标识信息确定出界面截取请求所对应的目标视图控件，其中，该控件标识信息可以为目标视图控件的控件id，具体实施时，可以在Flutter应用中确定命中该控件id的目标视图控件。
在确定出上述目标视图控件后，就可以根据该目标视图控件的控件属性信息确定出该目标视图控件在终端设备中的渲染区域，并对该渲染区域进行截取，得到该目标视图控件的界面视觉图像，从而将该界面视觉图像作为截图结果返回至Flutter性能调试程序。
通过上述描述可知，在本公开实施例中，首先在Flutter平台的展示界面上展示目标应用中目标页面的多个视图控件，并通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。
在一个可选的实施方式中，上述步骤S405，基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，具体包括如下过程：
S4051：确定所述控件标识信息所对应的目标视图控件，并获取所述目标视图控件的渲染数据。
S4052：基于所述渲染数据生成所述目标视图控件的界面视觉图像。
在本公开实施例中，首先需要获取目标视图控件的渲染数据，具体的，首先可以获取该目标视图控件的控件属性信息，并基于该控件属性信息，确定该目标视图控件的渲染数据。
这里，该渲染数据包含该目标视图控件在终端设备中的渲染区域，以及用于指示该目标视图控件如何在渲染区域中进行渲染的底层数据，其中，该渲染数据可以为目标视图控件的Render Object数据。
在确定出上述目标视图控件的渲染数据后，就可以基于该渲染数据，生成目标视图控件的界面视觉图像，从而便于对该界面视觉图像进行截取，得到目标视图控件的截图结果。
在一个可选的实施方式中，上述步骤S4052，基于所述渲染数据生成所述目标视图控件的界面视觉图像，具体包括如下过程：
(1)、基于所述目标视图控件的渲染数据在所述Flutter应用中对相应视图控件进行渲染，得到渲染结果；
(2)、确定所述渲染结果的渲染截图结果，并基于所述渲染截图结果确定所述界面视觉图像。
在本公开实施例中，在获取到目标视图控件的渲染数据后，就可以通过渲染通道将该目标视图控件的渲染数据渲染到展示界面上，得到渲染结果，其中，该渲染通道可以为toImage通道。
在得到目标视图控件的渲染结果后，就可以对该渲染结果进行截图，得到该渲染结果的渲染截图结果，并基于该渲染截图结果确定界面视觉图像。这里，在对该渲染结果进行截图时，可以通过快照技术，以该渲染结果的所处的渲染区域为截图区域进行截图。
通过上述描述可知，通过渲染数据对目标视图控件进行渲染，得到渲染数据后，就可以对该渲染结果进行截图，从而得到渲染截图结果，以使Flutter性能调试程序获取到的截图结果能够直观的反应出目标视图控件在终端设备的渲染效果。
在一个可选的实施方式中，在向Flutter性能调试程序发送所述控件结构信息之前，所述方法还包括如下过程：
(1)、建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；
(2)、获取所述述Flutter性能调试程序基于所述WebSocke通信连接发送的数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；
(3)、基于所述数据同步请求获取所述目标页面中各个视图控件的控件结构信息，并向所述Flutter性能调试程序发送所述控件结构信息。
在本公开实施例中，首先可以通过WebSocket协议，建立Flutter应用和所述Flutter性能调试程序之间的通信连接。具体的，可以在Flutter应用中构建一个WebSocket实例，并为该WebSocket实例设置Flutter性能调试程序的地址。
在建立该Flutter应用和Flutter性能调试程序之间的通信连接时，Flutter应用可以通过构建的WebSocket实例向Flutter性能调试程序发送连接请求，该Flutter性能调试程序在接收到该连接请求后，就可以根据该连接请求向Flutter应用发送同意连接的连接信号，从而建立起Flutter应用和Flutter性能调试程序之间的WebSocket通信连接。
在建立起Flutter应用和Flutter性能调试程序之间的WebSocket通信连接，Flutter应用就可以获取Flutter性能调试程序基于该WebSocket通信连接发送的目标页面的控件结构信息的数据同步请求。Flutter应用在获取到该数据同步请求后，就可以确定该同步请求所指示的目标页面，并获取该目标页面的各个视图控件之间的层级结构。然后，该Flutter应用就可以通过WebSocket通信连接，向Flutter性能调试程序反馈该控件结构信息。
通过上述描述可知，在获取到Flutter性能调试程序通过WebSockt通信连接向Flutter应用发送的控件结构信息的同步请求后，就可以基于该WebSockt通信连接向Flutter应用反馈控件结构信息，从而完成Flutter性能调试程序和Flutter应用之间的数据交互，提高控件结构信息获取的效率。
在一个可选的实施方式中，上述步骤S407，将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序，具体包括如下过程：
(1)、调用所述Flutter应用中的调试扩展应用；
(2)、基于所述Flutter应用中的调试扩展应用向所述Flutter性能调试程序发送所述截图结果。
在本公开实施例中，上述Flutter应用中包含调试扩展应用，其中，该调试扩展应用可以基于WebSocket通信连接，进行Flutter性能调试程序和Flutter应用之间的数据传输，其中，该调试扩展应用可以为上述extension。
在确定出上述目标视图控件的截图结果后，就可以调用该Flutter应用中的调试扩展应用，以使该调试扩展应用基于WebSocket通信连接，将上述目标视图控件的截图结果发送至Flutter应用。
通过上述描述可知，通过调用Flutter应用中的调试扩展应用，可以将截图结果传输给Flutter性能调试程序，从而使得Flutter性能调试程序能够基于截图结果进行编辑处理，实现了Flutter性能调试程序和Flutter应用之间的跨平台通信。
综上，在本公开实施例中，首先在Flutter平台的展示界面上展示目标应用中目标页面的多个视图控件，并通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思，本公开实施例中还提供了与界面截图方法对应的界面截图装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述界面截图方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图5所示，为本公开实施例提供的一种界面截图装置的示意图，所述装置包括：第一获取单元51、展示单元52、第一确定单元53、第二获取单元54；其中，
第一获取单元51，用于获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
展示单元52，用于根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；
第一确定单元53，用于确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；
第二获取单元54，用于向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
在本公开实施例中，首先在Flutter平台的展示界面上展示目标应用中目标页面的多个视图控件，并通过界面截取请求指导终端设备针对目标视图控件的渲染区域进行截图，从而实现了以视图控件为基本单位的细粒度截图，使得用户能够更直观的观察到目标视图控件的渲染效果，便于用户针对该目标视图控件进行后续的调试。
一种可能的实施方式中，第一获取单元51，还用于：
获取Flutter应用的目标页面中所包含各个视图控件的控件结构树；其中，所述控件结构树包含多个节点和各个节点之间的层级关系，每个节点对应所述目标页面中的一个视图控件。
一种可能的实施方式中，第一获取单元51，还用于：
在所述展示界面上展示所述控件结构树；在检测到用户对所述控件结构树中节点的点击操作的情况下，确定检测到对所述多个视图控件的选择操作。
一种可能的实施方式中，该装置还用于：
在所述Flutter性能调试程序的展示界面展示编辑窗口，并在所述编辑窗口中展示所述截图结果；响应于用户对所述编辑窗口中所展示的截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果。
一种可能的实施方式中，该装置还用于：
检测用户对所述编辑窗口中所展示的编辑工具标识的触发操作，并确定用户所触发的编辑工具标识的编辑类型；对所述截图结果进行与所述编辑类型相匹配的编辑处理，得到所述编辑之后的截图结果。
一种可能的实施方式中，在获取目标应用的目标页面中所包含各个视图控件的控件结构信息之前，该装置还用于：
建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；基于所述WebSockt通信连接向所述Flutter应用发送数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；获取所述Flutter应用基于所述数据同步请求反馈的所述控件结构信息。
一种可能的实施方式中，第二获取单元54，还用于：
调用所述Flutter性能调试程序中的调试扩展应用；基于所述Flutter性能调试程序中的调试扩展应用向所述终端设备发送所述界面截取请求。
参照图6所示，为本公开实施例提供的另一种界面截图装置的示意图，所述装置包括：第三获取单元61、接收单元62、第二确定单元63；其中，
第三获取单元61，用于获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
接收单元62，用于接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；
第二确定单元63，用于基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
一种可能的实施方式中，第二确定单元63，还用于：
确定所述控件标识信息所对应的目标视图控件，并获取所述目标视图控件的渲染数据；基于所述渲染数据生成所述目标视图控件的界面视觉图像。
一种可能的实施方式中，第二确定单元63，还用于：
基于所述目标视图控件的渲染数据在所述Flutter应用中对相应视图控件进行渲染，得到渲染结果；确定所述渲染结果的渲染截图结果，并基于所述渲染截图结果确定所述界面视觉图像。
一种可能的实施方式中，在向Flutter性能调试程序发送所述控件结构信息之前，该装置还用于：
建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；获取所述述Flutter性能调试程序基于所述WebSocke通信连接发送的数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；基于所述数据同步请求获取所述目标页面中各个视图控件的控件结构信息，并向所述Flutter性能调试程序发送所述控件结构信息。
一种可能的实施方式中，第二确定单元63，还用于：
调用所述Flutter应用中的调试扩展应用；基于所述Flutter应用中的调试扩展应用向所述Flutter性能调试程序发送所述截图结果。
关于装置中的各单元的处理流程、以及各单元之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
对应于图1中的界面截图方法，本公开实施例还提供了一种计算机设备700，如图7所示，为本公开实施例提供的计算机设备700结构示意图，包括：
处理器71、存储器72、和总线73；存储器72用于存储执行指令，包括内存721和外部存储器722；这里的内存721也称内存储器，用于暂时存放处理器71中的运算数据，以及与硬盘等外部存储器722交换的数据，处理器71通过内存721与外部存储器722进行数据交换，当所述计算机设备700运行时，所述处理器71与所述存储器72之间通过总线73通信，使得所述处理器71执行以下指令：
获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；
确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；
向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
对应于图4中的界面截图方法，本公开实施例还提供了另一种计算机设备800，如图8所示，为本公开实施例提供的计算机设备800结构示意图，包括：
处理器81、存储器82、和总线83；存储器82用于存储执行指令，包括内存821和外部存储器822；这里的内存821也称内存储器，用于暂时存放处理器81中的运算数据，以及与硬盘等外部存储器822交换的数据，处理器81通过内存821与外部存储器822进行数据交换，当所述计算机设备800运行时，所述处理器81与所述存储器82之间通过总线83通信，使得所述处理器81执行以下指令：
获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；
基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的界面截图方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的界面截图方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (16)

1.一种界面截图方法，其特征在于，应用于Flutter性能调试程序，包括：
获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；
确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；
向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
2.根据权利要求1所述的方法，其特征在于，所述获取Flutter应用的目标页面中所包含各个视图控件的控件结构信息，包括：
获取Flutter应用的目标页面中所包含各个视图控件的控件结构树；其中，所述控件结构树包含多个节点和各个节点之间的层级关系，每个节点对应所述目标页面中的一个视图控件。
3.根据权利要求2所述的方法，其特征在于，所述根据所述控件结构信息在展示界面上展示所述多个视图控件，并检测对所述多个视图控件的选择操作，包括：
在所述展示界面上展示所述控件结构树；
在检测到用户对所述控件结构树中节点的点击操作的情况下，确定检测到对所述多个视图控件的选择操作。
4.根据权利要求1所述的方法，其特征在于，在获取所述终端设备反馈的截图结果之后，所述方法还包括：
在所述Flutter性能调试程序的展示界面展示编辑窗口，并在所述编辑窗口中展示所述截图结果；
响应于用户对所述编辑窗口中所展示的截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果。
5.根据权利要求4所述的方法，其特征在于，所述响应于用户对所述截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果，包括：
检测用户对所述编辑窗口中所展示的编辑工具标识的触发操作，并确定用户所触发的编辑工具标识的编辑类型；
对所述截图结果进行与所述编辑类型相匹配的编辑处理，得到所述编辑之后的截图结果。
6.根据权利要求1所述的方法，其特征在于，在获取目标应用的目标页面中所包含各个视图控件的控件结构信息之前，所述方法还包括：
建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；
基于所述WebSockt通信连接向所述Flutter应用发送数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；
获取所述Flutter应用基于所述数据同步请求反馈的所述控件结构信息。
7.根据权利要求1所述的方法，其特征在于，所述向终端设备发送所述界面截取请求，包括：
调用所述Flutter性能调试程序中的调试扩展应用；
基于所述Flutter性能调试程序中的调试扩展应用向所述终端设备发送所述界面截取请求。
8.一种界面截图方法，其特征在于，应用于运行有Flutter应用的设备，包括：
获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；
基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
9.根据权利要求8所述的方法，其特征在于，所述基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，包括：
确定所述控件标识信息所对应的目标视图控件，并获取所述目标视图控件的渲染数据；
基于所述渲染数据生成所述目标视图控件的界面视觉图像。
10.根据权利要求9所述的方法，其特征在于，所述基于所述渲染数据生成所述目标视图控件的界面视觉图像，包括：
基于所述目标视图控件的渲染数据在所述Flutter应用中对相应视图控件进行渲染，得到渲染结果；
确定所述渲染结果的渲染截图结果，并基于所述渲染截图结果确定所述界面视觉图像。
11.根据权利要求8所述的方法，其特征在于，在向Flutter性能调试程序发送所述控件结构信息之前，所述方法还包括：
建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；
获取所述Flutter性能调试程序基于所述WebSocke通信连接发送的数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；
基于所述数据同步请求获取所述目标页面中各个视图控件的控件结构信息，并向所述Flutter性能调试程序发送所述控件结构信息。
12.根据权利要求8所述的方法，其特征在于，所述将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序，包括：
调用所述Flutter应用中的调试扩展应用；
基于所述Flutter应用中的调试扩展应用向所述Flutter性能调试程序发送所述截图结果。
13.一种界面截图装置，其特征在于，包括：
第一获取单元，用于获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
展示单元，用于根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；
第一确定单元，用于确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；
第二获取单元，用于向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
14.一种界面截图装置，其特征在于，包括：
第三获取单元，用于获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；
接收单元，用于接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；
第二确定单元，用于基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
15.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至12任意一项所述的界面截图方法的步骤。
16.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至12任意一项所述的界面截图方法的步骤。
CN202210211121.5A 2022-03-03 2022-03-03 一种界面截图方法、装置、计算机设备以及存储介质 Pending CN114579028A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210211121.5A CN114579028A (zh) 2022-03-03 2022-03-03 一种界面截图方法、装置、计算机设备以及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210211121.5A CN114579028A (zh) 2022-03-03 2022-03-03 一种界面截图方法、装置、计算机设备以及存储介质

Publications (1)

Publication Number Publication Date
CN114579028A true CN114579028A (zh) 2022-06-03

Family

ID=81774459

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210211121.5A Pending CN114579028A (zh) 2022-03-03 2022-03-03 一种界面截图方法、装置、计算机设备以及存储介质

Country Status (1)

Country Link
CN (1) CN114579028A (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006350675A (ja) * 2005-06-16 2006-12-28 Hitachi Eng Co Ltd ソフトウェアテスト装置
CN103927255A (zh) * 2013-01-16 2014-07-16 腾讯科技（深圳）有限公司 基于云测试系统的软件测试方法、云测试系统及其客户端
CN112231206A (zh) * 2020-09-30 2021-01-15 广州掌动智能科技有限公司 应用程序测试的脚本编辑方法、计算机可读存储介质及测试平台
CN113434243A (zh) * 2021-08-27 2021-09-24 深圳市活力天汇科技股份有限公司 基于Weex页面的截图方法、装置、设备及存储介质
WO2021232951A1 (zh) * 2020-05-19 2021-11-25 Oppo广东移动通信有限公司 截屏方法、终端及非易失性计算机可读存储介质
CN113821433A (zh) * 2021-08-31 2021-12-21 北京百度网讯科技有限公司 云手机应用程序的测试方法、装置、设备、介质及产品
CN113885978A (zh) * 2021-09-17 2022-01-04 北京来也网络科技有限公司 结合rpa及ai的元素截图方法以及装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006350675A (ja) * 2005-06-16 2006-12-28 Hitachi Eng Co Ltd ソフトウェアテスト装置
CN103927255A (zh) * 2013-01-16 2014-07-16 腾讯科技（深圳）有限公司 基于云测试系统的软件测试方法、云测试系统及其客户端
WO2021232951A1 (zh) * 2020-05-19 2021-11-25 Oppo广东移动通信有限公司 截屏方法、终端及非易失性计算机可读存储介质
CN112231206A (zh) * 2020-09-30 2021-01-15 广州掌动智能科技有限公司 应用程序测试的脚本编辑方法、计算机可读存储介质及测试平台
CN113434243A (zh) * 2021-08-27 2021-09-24 深圳市活力天汇科技股份有限公司 基于Weex页面的截图方法、装置、设备及存储介质
CN113821433A (zh) * 2021-08-31 2021-12-21 北京百度网讯科技有限公司 云手机应用程序的测试方法、装置、设备、介质及产品
CN113885978A (zh) * 2021-09-17 2022-01-04 北京来也网络科技有限公司 结合rpa及ai的元素截图方法以及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
前端瓶子君: "Flutter的可视化界面、绘制性能调优——DecTools", Retrieved from the Internet <URL:https://blog.csdn.net/lunahaijiao/article/details/110458807> *
林磊;郭铸;罗方旋;余昌瑾;: "车载网络控制系统自动化仿真测试平台", 装备制造技术, no. 04 *

Similar Documents

Publication Publication Date Title
CN107908542B (zh) 测试用例创建方法、装置、计算机设备及存储介质
CN109375914B (zh) 信息远程交互方法和系统
CN107209773B (zh) 自动调用统一的可视化界面
CN106657192B (zh) 一种用于呈现服务调用信息的方法与设备
CN104268083B (zh) 软件自动化测试方法和装置
CN109543162A (zh) 数据的多图表展示方法、装置、计算机设备和存储介质
CN106598846B (zh) 应用界面测试方法和装置
CN110505079A (zh) 用于基于上下文的多维网络可视化的系统及方法
CN106293325B (zh) 自动寻窗的方法和装置
CN107908561B (zh) 虚拟现实软件性能测试方法和系统
CN107885645A (zh) 计算页面首屏渲染时长的方法、装置及电子设备
CN107229560A (zh) 一种界面显示效果测试方法、图像样张获取方法及装置
CN106055535B (zh) 一种图表生成方法及装置
CN112445693A (zh) 一种页面更新检测方法、装置、设备及存储介质
CN112560422A (zh) 一种图表的处理方法、装置、设备和介质
CN108628648B (zh) 数据处理方法和数据处理装置
CN113610963B (zh) 三维网络拓扑绘制方法、装置、计算设备及存储介质
CN114579028A (zh) 一种界面截图方法、装置、计算机设备以及存储介质
KR102282284B1 (ko) 오브젝트 집합의 시각적 표현을 제공하는 방법, 장치, 기기 및 저장 매체
CN114706581A (zh) 图像分析方法、装置、计算机设备以及存储介质
JP5615245B2 (ja) バグ対策優先度表示システム
CN114625663A (zh) 一种测试方法、装置、计算机设备以及存储介质
CN111078518B (zh) 数据采集方法、终端设备和计算机可读存储介质
CN109800362B (zh) 标识码的处理方法及装置、存储介质、计算机设备
CN104461549A (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
CB02 Change of applicant information

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant after: Douyin Vision Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant before: Tiktok vision (Beijing) Co.,Ltd.

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant after: Tiktok vision (Beijing) Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd.

CB02 Change of applicant information