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 | 如果不想适配,直接展示原图大小 | + ### 图片变换相关 | 使用方法 | 类型 | 相关描述 |