openharmony_ci
Gitee
commit
4a12d5dbed
47
README.md
47
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<PixelMap>) | src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap> | 配置重试占位图，如果配置则加载失败后优先展示重试占位图 |
|
||||
| addListener(func: AsyncCallback<PixelMap>) | func: AsyncCallback<PixelMap> | 配置整个监听回调，数据正常加载返回，加载失败返回错误信息 |
|
||||
| thumbnail(sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>) | sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData> | 设置缩略图比例，缩略图返回后，加载并展示缩略图 |
|
||||
| addProgressListener(func?: AsyncSuccess<string>){ this.progressFunc = func; return this; } | func?: AsyncSuccess<string> | 设置网络下载百分比监听，返回数据加载百分比数值 |
|
||||
| addRetryListener(func?: AsyncSuccess<any>){ this.retryFunc = func; return this; } | func?: AsyncSuccess<any> | 设置重试监听 |
|
||||
| addProgressListener(func?: AsyncSuccess<string>) | func?: AsyncSuccess<string> | 设置网络下载百分比监听，返回数据加载百分比数值 |
|
||||
| addRetryListener(func?: AsyncSuccess<any>) | func?: AsyncSuccess<any> | 设置重试监听 |
|
||||
| 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 | 如果不想适配，直接展示原图大小 |
|
||||
|
||||
### 图片变换相关
|
||||
|
||||
| 使用方法 | 类型 | 相关描述 |
|
||||
|
|
|
|||
Loading…
Reference in New Issue