From e963f82a02781ff80171ba8e7ef7504c98e071d7 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Thu, 11 May 2023 15:12:32 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=9B=B4=E6=96=B0READE.md=20a.=E8=A7=A3?= =?UTF-8?q?=E5=86=B3=E4=BB=A3=E7=A0=81=E5=9D=97=E7=BA=A2=E5=AD=97=E6=8F=90?= =?UTF-8?q?=E9=86=92=E8=AF=AF=E5=AF=BC=E6=8F=90=E7=A4=BA=20b.=E8=A7=A3?= =?UTF-8?q?=E9=87=8ARequestOption=E7=9A=84size=E5=BF=85=E4=BC=A0,=E8=80=8C?= =?UTF-8?q?ImageKnifeOption=E7=94=B1=E4=BA=8E=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E9=93=BE=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E7=94=A8=E4=BA=8E1.0.5=E7=89=88=E6=9C=AC=E5=B7=B2=E7=BB=8F?= =?UTF-8?q?=E4=B8=8D=E5=86=8D=E4=BD=BF=E7=94=A8size=E5=8F=82=E6=95=B0.?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E8=A7=81CHANGELOG.md=20c.=E6=96=B0=E5=A2=9ES?= =?UTF-8?q?caleType=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E7=9A=84=E6=8F=8F=E8=BF=B0=20d.=E5=88=A0?= =?UTF-8?q?=E9=99=A4ImageKnifeOption=E7=9B=B8=E5=85=B3=E7=9A=84size?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=B1=95=E7=A4=BA=EF=BC=8C=E9=81=BF=E5=85=8D?= =?UTF-8?q?=E8=AF=AF=E5=AF=BC=E5=BC=80=E5=8F=91=E8=80=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- README.md | 47 +++++++++++++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 0a0f796..e830e9c 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ ## 下载安装 -```typescript +``` ohpm install @ohos/imageknife ``` @@ -106,7 +106,7 @@ struct IndexFunctionDemo { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text("简单示例：加载一张gif图片").fontSize(15) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) - .width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高 + .width(300) .height(300) } } @@ -238,8 +238,6 @@ struct Index { @State imageKnifeOption1: ImageKnifeOption = { // 加载一张本地的jpg资源（必选） loadSrc: $r('app.media.jpgSample'), - // 组件宽设置为300，高设置为300（必选） - size: { width: '300', height: '300' }, // 占位图使用本地资源icon_loading（可选） placeholderSrc: $r('app.media.icon_loading'), // 失败占位图使用本地资源icon_failed（可选） @@ -253,6 +251,8 @@ struct Index { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + .width(300) + .height(300) } } .width('100%') @@ -312,7 +312,7 @@ export default class MyAbilityStage extends AbilityStage { #### RequestOption构建: -请查看[RequestOption接口方法](##'RequestOption 用户配置参数') +请查阅下文接口内容：[RequestOption接口方法](#requestoption用户配置参数) 了解了RequestOption的参数内容后，我们可以参考ImageKnifeComponent组件代码进行分析。 @@ -322,11 +322,11 @@ export default class MyAbilityStage extends AbilityStage { #### 场景一: 简单加载一张图片 -```typescript +``` let request = new RequestOption(); -（必传） +// (必传) request.load("图片url") - （可选 整个request监听回调） + // (可选 整个request监听回调) .addListener((err, data) => { // data 是ImageKnifeData对象 if(data.isPixelMap()){ @@ -340,7 +340,7 @@ request.load("图片url") width: this.currentWidth, height:this.currentHeight } - // （必传）这里setImageViewSize函数必传组件大小，因为涉及到图片变换效果都需要适配图像源和组件大小。 + // (必传)这里setImageViewSize函数必传组件大小，因为涉及到图片变换效果都需要适配图像源和组件大小 request.setImageViewSize(compSize) // 最后使用ImageKnife的call函数调用request即可 globalThis.ImageKnife.call(request) @@ -348,9 +348,9 @@ request.load("图片url") **其他场景，可以按需加载** -比如我需要配置 **占位图** 只需要 在request对象创建好之后，调用 **placeholder** 函数即可 +比如我需要配置 **占位图** 只需要 在request对象创建好之后,调用 **placeholder** 函数即可 -```typescript +``` request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => { console.log('request.placeholder callback') this.displayPlaceholder(data) @@ -359,7 +359,7 @@ request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => { 再比如 我对缓存配置有要求，我要禁用内存缓存，调用 **skipMemoryCache** 函数即可 -```typescript +``` request.skipMemoryCache(true) ``` @@ -369,7 +369,7 @@ request.skipMemoryCache(true) ## 接口说明 -### RequestOption 用户配置参数: +### RequestOption用户配置参数 | 方法名 | 入参 | 接口描述 | | ------------------------------------------------------------ | ---------------------------------------------------------- | -------------------------------------------------------- | @@ -381,15 +381,13 @@ request.skipMemoryCache(true) | retryholder(src: PixelMap \| Resource, func?: AsyncSuccess) | src: PixelMap \| Resource, func?: AsyncSuccess | 配置重试占位图，如果配置则加载失败后优先展示重试占位图 | | addListener(func: AsyncCallback) | func: AsyncCallback | 配置整个监听回调，数据正常加载返回，加载失败返回错误信息 | | thumbnail(sizeMultiplier:number, func?: AsyncSuccess) | sizeMultiplier:number, func?: AsyncSuccess | 设置缩略图比例，缩略图返回后，加载并展示缩略图 | -| addProgressListener(func?: AsyncSuccess){ this.progressFunc = func; return this; } | func?: AsyncSuccess | 设置网络下载百分比监听，返回数据加载百分比数值 | -| addRetryListener(func?: AsyncSuccess){ this.retryFunc = func; return this; } | func?: AsyncSuccess | 设置重试监听 | +| addProgressListener(func?: AsyncSuccess) | func?: AsyncSuccess | 设置网络下载百分比监听，返回数据加载百分比数值 | +| addRetryListener(func?: AsyncSuccess) | func?: AsyncSuccess | 设置重试监听 | | addAllCacheInfoCallback(func: IAllCacheInfoCallback) | func: IAllCacheInfoCallback | 设置获取所有缓存信息监听 | | skipMemoryCache(skip: boolean) | skip: boolean | 配置是否跳过内存缓存 | | retrieveDataFromCache(flag: boolean) | flag: boolean | 配置仅从缓存中加载数据 | - - -同时支持[图片变换相关](##'图片变换相关')接口。 +同时支持[图片变换相关](#图片变换相关)接口。 ### ImageKnife 启动器/门面类 @@ -408,6 +406,19 @@ request.skipMemoryCache(true) | request.diskCacheStrategy(new NONE()) | NONE | 表示不缓存任何内容 | | request.diskCacheStrategy(new RESOURCE()) | RESOURCE | 表示只缓存转换过后的图片 | +### ScaleType类型展示效果 + +| 使用方法 | 类型 | 策略描述 | +| ----------------------- | ---- | ---------------------------------------------------- | +| ScaleType.FIT_START | int | 图像位于用户设置组件左上角显示,图像会缩放至全部展示 | +| ScaleType.FIT_END | int | 图像位于用户设置组件右下角显示,图像会缩放至全部展示 | +| ScaleType.FIT_CENTER | int | 图像位于用户设置组件居中,图像会缩放至全部展示 | +| ScaleType.CENTER | int | 图像居中展示,不缩放 | +| ScaleType.CENTER_CROP | int | 图像的宽高长度,短的部分缩放至组件大小,超出的全部裁剪 | +| ScaleType.FIT_XY | int | 图像拉伸至组件大小 | +| ScaleType.CENTER_INSIDE | int | 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER | +| ScaleType.NONE | int | 如果不想适配，直接展示原图大小 | + ### 图片变换相关 | 使用方法 | 类型 | 相关描述 |