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

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

【技术实现步骤摘要】
一种界面截图方法、装置、计算机设备以及存储介质


[0001]本公开涉及计算机的
，具体而言，涉及一种界面截图方法、装置、计算机设备以及存储介质。

技术介绍

[0002]随着应用平台的发展，不同平台之间由于编程语言差异，可以进行跨平台开发的Flutter平台逐渐普及。然而，在进行应用调试时，在Flutter平台中并没有对应的截图工具。此时，通过应用终端内的原生截图工具进行截图时，可以对显示在终端的展示界面进行全屏截图，而无法对应用中的某个单独界面组件进行针对性截图，因此，无法使用户直观的观察到界面组件的渲染效果。

技术实现思路

[0003]本公开实施例至少提供一种界面截图方法、装置、计算机设备以及存储介质。
[0004]第一方面，本公开实施例提供了一种界面截图方法，应用于Flutter性能调试程序，包括：
[0005]获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
[0006]一种可选的实施方式中，所述获取Flutter应用的目标页面中所包含各个视图控件的控件结构信息，包括：
[0007]获取Flutter应用的目标页面中所包含各个视图控件的控件结构树；其中，所述控件结构树包含多个节点和各个节点之间的层级关系，每个节点对应所述目标页面中的一个视图控件。
[0008]一种可选的实施方式中，所述根据所述控件结构信息在展示界面上展示所述多个视图控件，并检测对所述多个视图控件的选择操作，包括：
[0009]在所述展示界面上展示所述控件结构树；在检测到用户对所述控件结构树中节点的点击操作的情况下，确定检测到对所述多个视图控件的选择操作。
[0010]一种可选的实施方式中，在获取所述终端设备反馈的截图结果之后，所述方法还包括：
[0011]在所述Flutter性能调试程序的展示界面展示编辑窗口，并在所述编辑窗口中展示所述截图结果；响应于用户对所述编辑窗口中所展示的截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果。
[0012]一种可选的实施方式中，所述响应于用户对所述截图结果的编辑操作，对所述截图结果进行相应的编辑处理，得到编辑之后的截图结果，包括：
[0013]检测用户对所述编辑窗口中所展示的编辑工具标识的触发操作，并确定用户所触发的编辑工具标识的编辑类型；对所述截图结果进行与所述编辑类型相匹配的编辑处理，得到所述编辑之后的截图结果。
[0014]一种可选的实施方式中，在获取目标应用的目标页面中所包含各个视图控件的控件结构信息之前，所述方法还包括：
[0015]建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；基于所述WebSockt通信连接向所述Flutter应用发送数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；获取所述Flutter应用基于所述数据同步请求反馈的所述控件结构信息。
[0016]一种可选的实施方式中，所述向终端设备发送所述界面截取请求，包括：
[0017]调用所述Flutter性能调试程序中的调试扩展应用；基于所述Flutter性能调试程序中的调试扩展应用向所述终端设备发送所述界面截取请求。
[0018]第二方面，本公开实施例提供了一种界面截图方法，应用于运行有Flutter应用的设备，包括：
[0019]获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；接收所述Flutter性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果返回至所述Flutter性能调试程序。
[0020]一种可选的实施方式中，所述基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，包括：
[0021]确定所述控件标识信息所对应的目标视图控件，并获取所述目标视图控件的渲染数据；基于所述渲染数据生成所述目标视图控件的界面视觉图像。
[0022]一种可选的实施方式中，所述基于所述渲染数据生成所述目标视图控件的界面视觉图像，包括：
[0023]基于所述目标视图控件的渲染数据在所述Flutter应用中对相应视图控件进行渲染，得到渲染结果；确定所述渲染结果的渲染截图结果，并基于所述渲染截图结果确定所述界面视觉图像。
[0024]一种可选的实施方式中，在向Flutter性能调试程序发送所述控件结构信息之前，所述方法还包括：
[0025]建立所述Flutter应用和所述Flutter性能调试程序之间的WebSocket通信连接；获取所述述Flutter性能调试程序基于所述WebSocke通信连接发送的数据同步请求；其中，所述数据同步请求为用于请求同步所述控件结构信息；基于所述数据同步请求获取所述目标页面中各个视图控件的控件结构信息，并向所述Flutter性能调试程序发送所述控件结构信息。
[0026]一种可选的实施方式中，所述将所述界面视觉图像作为截图结果返回至所述
Flutter性能调试程序，包括：
[0027]调用所述Flutter应用中的调试扩展应用；基于所述Flutter应用中的调试扩展应用向所述Flutter性能调试程序发送所述截图结果。
[0028]第三方面，本公开实施例还提供一种界面截图装置，包括：
[0029]第一获取单元，用于获取Flutter应用的目标页面中所包含的各个视图控件的控件结构信息；所述控件结构信息用于指示所述各个视图控件之间的层级关系；展示单元，用于根据所述控件结构信息在展示界面上展示多个所述视图控件，并检测对所述多个视图控件的选择操作；第一确定单元，用于确定所述选择操作所对应的目标视图控件，并基于所述目标视图控件生成界面截取请求；所述界面截取请求包含所述目标视图控件的控件信息；第二获取单元，用于向终端设备发送所述界面截取请求，并获取所述终端设备反馈的截图结果；所述截图结果为所述目标页面中的目标视图控件在所述终端设备的渲染区域的图像。
[0030]第四方面，本公开实施例还提供一种界面截图装置，包括：
[0031]第三获取单元，用于获取目标应用的目标页面中各个视图控件的控件结构信息，并向Flutter性能调试程序发送所述控件结构本文档来自技高网...

【技术保护点】

【技术特征摘要】
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性能调试程序发送的界面截图请求，其中，所述界面截图请求中所包含所截取的目标视图控件的控件标识；基于所述控件标识信息确定所述目标页面中目标视图控件的界面视觉图像，并将所述界面视觉图像作为截图结果...

【专利技术属性】
技术研发人员：王李坤，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：