高权重网站出售,图表设计网站,网站推广的常用方法,wordpress应用商店前言#xff1a;
这个模块可以截取组件的图片#xff0c;无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域#xff0c;超出的部分不会出现在截图中。截图不会拍到与当前组件平级的#xff08;兄弟#xff09;组件。
模块简…前言
这个模块可以截取组件的图片无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域超出的部分不会出现在截图中。截图不会拍到与当前组件平级的兄弟组件。
模块简介和注意
- XComponent场景建议
如果你正在开发一个视频播放器应该直接从视频画面获取图片而不是使用组件的截图功能。
- 组件截图注意事项
如果有一个按钮但按钮周围有空白截图时会显示这些空白为透明。 如果给按钮加了一个阴影效果截图时可能会看到额外的阴影部分。
简单实例
componentSnapshot.get
get(id: string, callback: AsyncCallbackimage.PixelMap, options?: SnapshotOptions): void
参数类型说明idstring目标组件标识callbackAsyncCallbackimage.PixelMap回调函数optionsSnapshotOptions截图相关的自定参数
AsyncCallback
AsyncCallbackT, E void {(err: BusinessErrorE, data: T): void;}
参数类型说明errBusinessError接口调用失败的公共错误信息。dataT接口调用时的公共回调信息。
options:SnapshotOptions
参数类型说明scalenumber指定截图时图形侧绘制pixelmap的缩放比。waitUntilRenderFinishedboolean指定是否强制等待系统执行截图指令前所有绘制指令都执行完成之后再截图。
先对项目中的关键代码进行简单讲解最后是
导入模块
import { componentSnapshot } from kit.ArkUI;导入 componentSnapshot 函数用于生成组件的快照。
import { image } from kit.ImageKit;导入 image 对象用于处理图像。状态变量
State pixmap: image.PixelMap | undefined undefined定义一个状态变量 pixmap用于存储图像像素映射初始值为 undefined。UI 结构
Column()
创建一个垂直排列的容器。
Row()
创建一个水平排列的容器。
Image(this.pixmap)
显示一个 Image 组件使用状态变量 pixmap 作为图像源设置宽度和高度为 200 像素添加黑色边框和外边距。
Image($r(app.media.app_icon))
显示另一个 Image 组件使用资源文件 app.media.app_icon 作为图像源自动调整大小设置宽度和高度为 200 像素添加外边距并设置 id 为 root。
Button(click to generate UI snapshot)
创建一个 Button 组件显示文本 click to generate UI snapshot并设置点击事件处理函数。
onClick(() { ... })
设置按钮的点击事件处理函数。
componentSnapshot.get(root, (error: Error, pixmap: image.PixelMap) { ... }, {scale : 2, waitUntilRenderFinished : true})使用 componentSnapshot.get 方法生成指定 id 的组件快照。
如果生成快照过程中发生错误打印错误信息并返回。
如果成功生成快照将生成的像素映射赋值给状态变量 pixmap。同步执行
// 导入 kit.ArkUI 模块中的 componentSnapshot 函数用于生成组件快照
import { componentSnapshot } from kit.ArkUI;
// 导入 kit.ImageKit 模块中的 image 对象用于处理图像
import { image } from kit.ImageKit;// 使用 Entry 装饰器标记该组件为应用的入口组件
Entry
// 使用 Component 装饰器标记该类为一个组件
Component
// 定义名为 SnapshotExample 的结构化组件
struct SnapshotExample {// 定义一个状态变量 pixmap用于存储图像像素映射初始值为 undefinedState pixmap: image.PixelMap | undefined undefined// 定义组件的构建方法用于描述组件的 UI 结构build() {// 创建一个垂直排列的容器 ColumnColumn() {// 创建一个水平排列的容器 RowRow() {// 显示一个 Image 组件使用状态变量 pixmap 作为图像源设置宽度和高度为 200 像素添加黑色边框和外边距Image(this.pixmap).width(200).height(200).border({ color: Color.Black, width: 2 }).margin(5)// 显示另一个 Image 组件使用资源文件 app.media.app_icon 作为图像源自动调整大小设置宽度和高度为 200 像素添加外边距并设置 id 为 rootImage($r(app.media.app_icon)).autoResize(true).width(200).height(200).margin(5).id(root)}// 创建一个 Button 组件显示文本 click to generate UI snapshot并设置点击事件处理函数Button(click to generate UI snapshot).onClick(() {// 使用 componentSnapshot.get 方法生成指定 id 的组件快照componentSnapshot.get(root,(error: Error, pixmap: image.PixelMap) {// 如果生成快照过程中发生错误打印错误信息并返回if (error) {console.log(error: JSON.stringify(error))return;}// 如果成功生成快照将生成的像素映射赋值给状态变量 pixmapthis.pixmap pixmap}, {scale : 2, waitUntilRenderFinished : true})}).margin(10)}// 设置 Column 容器的宽度为 100%.width(100%)// 设置 Column 容器的高度为 100%.height(100%)// 设置 Column 容器的子组件水平对齐方式为居中.alignItems(HorizontalAlign.Center)}
}异步执行
import { componentSnapshot } from kit.ArkUI;
import { image } from kit.ImageKit;Entry
Component
struct SnapshotExample {State pixmap: image.PixelMap | undefined undefinedbuild() {Column() {Row() {Image(this.pixmap).width(200).height(200).border({ color: Color.Black, width: 2 }).margin(5)Image($r(app.media.img)).autoResize(true).width(200).height(200).margin(5).id(root)}Button(click to generate UI snapshot).onClick(() {// 建议使用this.getUIContext().getComponentSnapshot().get()componentSnapshot.get(root, {scale : 2, waitUntilRenderFinished : true}).then((pixmap: image.PixelMap) {this.pixmap pixmap}).catch((err:Error) {console.log(error: err)})}).margin(10)}.width(100%).height(100%).alignItems(HorizontalAlign.Center)}
}componentSnapshot.createFromBuilder
createFromBuilder(builder: CustomBuilder, callback: AsyncCallbackimage.PixelMap, delay?: number, checkImageStatus?: boolean, options?: SnapshotOptions): void
参数类型说明builderCustomBuilder自定义组件构建函数。callbackAsyncCallbackimage.PixelMap截图返回结果的回调。delaynumber指定触发截图指令的延迟时间。默认值300单位毫秒checkImageStatusboolean指定是否允许在截图之前校验图片解码状态。optionsSnapshotOptions截图相关的自定义参数。
AsyncCallback
AsyncCallbackT, E void {(err: BusinessErrorE, data: T): void;}
参数类型说明errBusinessError接口调用失败的公共错误信息。dataT接口调用时的公共回调信息。
options:SnapshotOptions
参数类型说明scalenumber指定截图时图形侧绘制pixelmap的缩放比。waitUntilRenderFinishedboolean指定是否强制等待系统执行截图指令前所有绘制指令都执行完成之后再截图。
导入模块
import { componentSnapshot } from ‘kit.ArkUI’;导入 componentSnapshot 函数用于生成组件的快照。 import { image } from ‘kit.ImageKit’;导入 image 对象用于处理图像。
状态变量
State pixmap: image.PixelMap | undefined undefined定义一个状态变量 pixmap用于存储图像像素映射初始值为 undefined。
同步执行
// 导入 kit.ArkUI 模块中的 componentSnapshot 函数用于生成组件快照
import { componentSnapshot } from kit.ArkUI;
// 导入 kit.ImageKit 模块中的 image 对象用于处理图像
import { image } from kit.ImageKit;// 使用 Entry 装饰器标记该组件为应用的入口组件
Entry
// 使用 Component 装饰器标记该类为一个组件
Component
// 定义名为 OffscreenSnapshotExample 的结构化组件
struct OffscreenSnapshotExample {// 定义一个状态变量 pixmap用于存储图像像素映射初始值为 undefinedState pixmap: image.PixelMap | undefined undefined// 定义一个构建器方法 RandomBuilder用于生成随机内容的 UI 结构BuilderRandomBuilder() {// 创建一个垂直排列的 Flex 容器设置主轴对齐方式为居中交叉轴对齐方式为居中Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {// 显示一个 Text 组件显示文本 Test menu item 1设置字体大小为 20 像素宽度为 100 像素高度为 50 像素文本对齐方式为居中Text(Test menu item 1).fontSize(20).width(100).height(50).textAlign(TextAlign.Center)// 显示一个 Divider 组件设置高度为 10 像素Divider().height(10)// 显示另一个 Text 组件显示文本 Test menu item 2设置字体大小为 20 像素宽度为 100 像素高度为 50 像素文本对齐方式为居中Text(Test menu item 2).fontSize(20).width(100).height(50).textAlign(TextAlign.Center)}// 设置 Flex 容器的宽度为 100 像素并设置 id 为 builder.width(100).id(builder)}// 定义组件的构建方法用于描述组件的 UI 结构build() {// 创建一个垂直排列的 Column 容器Column() {// 创建一个 Button 组件显示文本 click to generate offscreen UI snapshot并设置点击事件处理函数Button(click to generate offscreen UI snapshot).onClick(() {// 使用 componentSnapshot.createFromBuilder 方法生成指定构建器的快照componentSnapshot.createFromBuilder(() { this.RandomBuilder() }, // 提供构建器方法(error: Error, pixmap: image.PixelMap) { // 回调函数处理生成的快照或错误// 如果生成快照过程中发生错误打印错误信息并返回if (error) {console.log(error: JSON.stringify(error))return;}// 如果成功生成快照将生成的像素映射赋值给状态变量 pixmapthis.pixmap pixmap// 保存 pixmap 到文件此处注释掉// ....// 获取组件的尺寸和位置信息let info this.getUIContext().getComponentUtils().getRectangleById(builder)// 打印组件的宽度、高度以及不同坐标系下的位置信息console.log(info.size.width info.size.height info.localOffset.x info.localOffset.y info.windowOffset.x info.windowOffset.y)},320, // 设置生成快照的宽度为 320 像素true, // 设置是否使用硬件加速{ scale: 2, waitUntilRenderFinished: true } // 设置缩放比例为 2等待渲染完成后再生成快照)})// 显示一个 Image 组件使用状态变量 pixmap 作为图像源设置外边距为 10 像素高度为 200 像素宽度为 200 像素添加黑色边框Image(this.pixmap).margin(10).height(200).width(200).border({ color: Color.Black, width: 2 })}// 设置 Column 容器的宽度为 100%设置外边距为左 10 像素上 5 像素下 5 像素设置高度为 300 像素.width(100%).margin({ left: 10, top: 5, bottom: 5 }).height(300)}
}
