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