floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Pre Merge pull request !462 from 聪小陈/N/A

This commit is contained in:
聪小陈 2025-04-28 02:56:31 +00:00 committed by Gitee
parent bc55de9e2e ca44a78092
commit d1b57f7c1d
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 79 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
README_zh.md
View File

@ -62,7 +62,7 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc: $r("app.media.app_icon"), loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -75,7 +75,7 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc: this.localFile, loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -88,7 +88,7 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -101,7 +101,7 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -123,7 +123,7 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)} progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
} }
@ -133,10 +133,10 @@ ImageKnifeComponent({
#### 6.支持option传入border，设置边框，圆角 #### 6.支持option传入border，设置边框，圆角
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50} border: {radius:50}
} }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -144,11 +144,11 @@ ImageKnifeComponent({ ImageKnifeOption:
#### 7.支持option图片变换 #### 7.支持option图片变换
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50}, border: {radius:50},
transformation: new BlurTransformation(3) transformation: new BlurTransformation(3)
} }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -160,12 +160,12 @@ transformations.push(new BlurTransformation(5));
transformations.push(new BrightnessTransformation(0.2)); transformations.push(new BrightnessTransformation(0.2));
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: { imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain, objectFit: ImageFit.Contain,
border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置 border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组 transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
} }
}).width(300) }).width(300)
.height(300) .height(300)
@ -177,12 +177,12 @@ ImageKnifeComponent({
圆形裁剪变换示例 圆形裁剪变换示例
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150 } border: { radius: 150 }
} }
}).width(300) }).width(300)
.height(300) .height(300)
``` ```
@ -190,12 +190,12 @@ ImageKnifeComponent({ ImageKnifeOption:
圆形裁剪带边框变换示例 圆形裁剪带边框变换示例
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150, color: Color.Red, width: 5 } border: { radius: 150, color: Color.Red, width: 5 }
} }
}).width(300) }).width(300)
.height(300) .height(300)
``` ```
@ -228,8 +228,8 @@ ImageKnifeComponent({
#### 8.监听图片加载成功与失败 #### 8.监听图片加载成功与失败
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
onLoadListener:{ onLoadListener:{
onLoadStart:()=>{ onLoadStart:()=>{
@ -254,61 +254,64 @@ ImageKnifeComponent({ ImageKnifeOption:
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可 设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption:{ imageKnifeOption:{
loadSrc:$r("app.media.pngSample"), loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r("app.media.loading") placeholderSrc:$r("app.media.loading")
},syncLoad:true },
}) syncLoad:true
})
``` ```
#### 10.ImageKnifeAnimatorComponent 示例 #### 10.ImageKnifeAnimatorComponent 示例
``` ```
ImageKnifeAnimatorComponent({ ImageKnifeAnimatorComponent({
imageKnifeOption: { imageKnifeOption: {
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'), placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed') errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption },
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
``` ```
#### 11.加载图片回调信息数据 示例 #### 11.加载图片回调信息数据 示例
``` ```
ImageKnifeComponent({ ImageKnifeOption: = { ImageKnifeComponent({
loadSrc: $r('app.media.pngSample'), imageKnifeOption: {
objectFit: ImageFit.Contain, loadSrc: $r('app.media.pngSample'),
onLoadListener: { objectFit: ImageFit.Contain,
onLoadStart: (req) => { onLoadListener: {
let startCallBackData = JSON.stringify(req?.imageKnifeData); onLoadStart: (req) => {
}, let startCallBackData = JSON.stringify(req?.imageKnifeData);
onLoadFailed: (res, req) => { },
let failedBackData = res + ";" + JSON.stringify(req?.imageKnifeData); onLoadFailed: (res, req) => {
}, let failedBackData = res + ";" + JSON.stringify(req?.imageKnifeData);
onLoadSuccess: (data, imageData, req) => { },
let successBackData = JSON.stringify(req?.imageKnifeData); onLoadSuccess: (data, imageData, req) => {
}, let successBackData = JSON.stringify(req?.imageKnifeData);
onLoadCancel: (res, req) => { },
let cancelBackData = res + ";" + JSON.stringify(req?.imageKnifeData); onLoadCancel: (res, req) => {
} let cancelBackData = res + ";" + JSON.stringify(req?.imageKnifeData);
}, }
border: { radius: 50 }, },
onComplete: (event) => { border: { radius: 50 },
if (event && event.loadingStatus == 0) { onComplete: (event) => {
let render_success = JSON.stringify(Date.now()) if (event && event.loadingStatus == 0) {
} let render_success = JSON.stringify(Date.now())
} }
} }
}
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 12.图片降采样 示例 #### 12.图片降采样 示例
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption:{ imageKnifeOption:{
loadSrc:$r("app.media.pngSample"), loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r('app.media.loading'), placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed'), errorholderSrc:$r('app.media.failed'),
downsampleOf: DownsampleStrategy.NONE downsampleOf: DownsampleStrategy.NONE
} }
}).width(300).height(300) }).width(300).height(300)
``` ```
#### 13.rcp自定义网络请求 #### 13.rcp自定义网络请求
``` ```